/**
 * Design System - Componente Listar (Layout de Listagem)
 *
 * Layout de listagem com sidebar esquerdo contendo as abas de navegação
 * (Pesquisar/Listagem) e área principal de conteúdo à direita.
 *
 * IMPORTANTE: Usa variáveis CSS do Design System para suporte a light/dark mode.
 * As cores são definidas em variables.css e colors.css
 *
 * Estrutura:
 * .listing-layout
 *   ├── .listing-layout__sidebar (Abas: Pesquisar/Listagem)
 *   └── .listing-layout__right (Coluna direita: scroll + footer)
 *       ├── .listing-layout__content (Área scrollável)
 *       │   ├── .listing-layout__breadcrumb
 *       │   └── .listing-layout__main
 *       └── .listing-layout__footer (Botões de ação — fora do scroll)
 *
 * NOTAS SOBRE !important:
 * Este componente usa !important em alguns seletores para sobrescrever estilos
 * de CSS legado. Os conflitos identificados são:
 * - tabs.css: Define border-bottom em .tabs-button que afeta buttons genéricos
 * - breadcrumb.css: Define estilos de lista que conflitam com o novo layout
 * - emergency-overrides.css: Aplica estilos via [class*="panel-"] e [class*="card-"]
 * - styleAgrodefesa.css: Estilos legados em formulários e containers
 *
 * TODO: Remover !important quando os CSS legados forem refatorados
 *
 * @version 1.1.0
 * @date 2025-12-11
 * @figma https://www.figma.com/design/sXxwnANEp9rOHdnThR3jan/UI-KIT?node-id=5706-1573
 */

/* ============================================================
   LAYOUT PRINCIPAL - Container Fixo
   ============================================================ */

/* Remove scrollbar do body quando layout de listagem está ativo */
body:has(.listing-layout) {
    overflow: hidden;
}

.listing-layout {
    position: fixed;
    top: var(--header-height, 96px); /* altura do header Arenito definida em variables.css */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}


/* ============================================================
   SIDEBAR ESQUERDO - Abas de Navegação
   ============================================================ */

.listing-layout__sidebar {
    position: relative;
    width: 290px;
    min-width: 290px;
    height: 100%;
    background: var(--color-bg-tertiary, #ECEDF2);
    border-right: 1px solid var(--color-border, #CED3E2);
    padding: 24px 20px 0px 72px; /* padding-bottom: 0 conforme Figma */
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden; /* Sem scrollbar - texto quebra linha se necessário */
    box-sizing: border-box;
}

/* Dark mode - Sidebar */
/* Sidebar deve ter cor mais escura que o content para criar hierarquia visual */
/* Sidebar: #10141D (--color-bg-primary) | Content: #141926 | Inputs: #1D2333 */
.dark .listing-layout__sidebar,
.dark-mode .listing-layout__sidebar,
[data-theme="dark"] .listing-layout__sidebar {
    background: var(--color-bg-primary, #10141D);
    border-right-color: var(--color-border, #2A2F41);
}

/* Nota: Sidebar sem scrollbar - textos longos quebram linha */

/* ============================================================
   ABAS/TABS DO SIDEBAR
   ============================================================

   Conforme Figma (sidebar_light.css e sidebar_dark.css):

   Light Mode:
   - Tab inativo: bg #ECEDF2 (mesmo do sidebar), texto #394360, chevron hidden
   - Tab ativo: bg rgba(206, 211, 226, 0.4), texto #12151F, chevron visible #12151F

   Dark Mode:
   - Tab inativo: bg #10141D (mesmo do sidebar), texto #BFC3CF, chevron hidden
   - Tab ativo: bg #1D2333, texto #E0E2EB, chevron visible #E0E2EB
   ============================================================ */

/* Aumenta especificidade para evitar conflito com tabs.css (.tabs-button) */
.listing-layout .listing-layout__sidebar .listing-layout__tab,
.listing-layout__tab[type="button"],
button.listing-layout__tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-default);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease-in-out);
    background: var(--color-bg-tertiary, #ECEDF2); /* Mesma cor do sidebar - Light */
    border: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
}

.listing-layout__tab:hover {
    background: rgba(206, 211, 226, 0.5);
}

/* Tab ativo - Light Mode */
.listing-layout__tab--active {
    background: rgba(206, 211, 226, 0.4) !important;
}

.listing-layout__tab--active:hover {
    background: rgba(206, 211, 226, 0.5) !important;
}

/* Dark mode - Tabs
   Especificidade aumentada para sobrescrever o seletor base:
   .listing-layout .listing-layout__sidebar .listing-layout__tab */
.dark .listing-layout .listing-layout__sidebar .listing-layout__tab,
.dark .listing-layout__tab[type="button"],
.dark button.listing-layout__tab,
.dark-mode .listing-layout .listing-layout__sidebar .listing-layout__tab,
[data-theme="dark"] .listing-layout .listing-layout__sidebar .listing-layout__tab {
    background: var(--color-bg-primary, #10141D); /* Mesma cor do sidebar - Dark */
}

.dark .listing-layout__tab:hover,
.dark-mode .listing-layout__tab:hover,
[data-theme="dark"] .listing-layout__tab:hover {
    background: rgba(29, 35, 51, 0.7); /* #1D2333 com transparência */
}

/* Tab ativo - Dark Mode */
.dark .listing-layout__tab--active,
.dark-mode .listing-layout__tab--active,
[data-theme="dark"] .listing-layout__tab--active {
    background: var(--color-neutral-700, #1D2333) !important;
}

.dark .listing-layout__tab--active:hover,
.dark-mode .listing-layout__tab--active:hover,
[data-theme="dark"] .listing-layout__tab--active:hover {
    background: var(--color-neutral-700, #1D2333) !important;
}

/* Texto das tabs - Light Mode */
.listing-layout__tab-text {
    flex: 1;
    font-family: var(--font-body, 'Inter'), sans-serif;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-p3, 14px);
    line-height: var(--line-height-p3, 24px);
    color: var(--color-text-secondary, #394360); /* Tab inativo - Light */
    margin: 0;
    word-wrap: break-word; /* Permite quebra de linha em textos longos */
    overflow-wrap: break-word;
}

/* Tab ativo - texto mais escuro - Light Mode */
.listing-layout__tab--active .listing-layout__tab-text {
    color: var(--color-text-primary, #12151F);
}

/* Dark mode - Texto das tabs */
.dark .listing-layout__tab-text,
.dark-mode .listing-layout__tab-text,
[data-theme="dark"] .listing-layout__tab-text {
    color: var(--color-neutral-400, #BFC3CF); /* Tab inativo - Dark conforme Figma */
}

.dark .listing-layout__tab--active .listing-layout__tab-text,
.dark-mode .listing-layout__tab--active .listing-layout__tab-text,
[data-theme="dark"] .listing-layout__tab--active .listing-layout__tab-text {
    color: var(--color-neutral-300, #E0E2EB); /* Tab ativo - Dark conforme Figma */
}

/* ============================================================
   CHEVRON - Ícone de seta na tab
   ============================================================

   Conforme Figma:
   - Tab inativo: chevron hidden (display: none)
   - Tab ativo: chevron visible

   O chevron deve aparecer APENAS no item ativo.
   ============================================================ */

.listing-layout__tab-icon {
    width: 12px;
    height: 12px;
    display: none; /* Hidden por padrão (tab inativo) */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Chevron visível apenas no tab ativo */
.listing-layout__tab--active .listing-layout__tab-icon {
    display: flex;
}

.listing-layout__tab-icon svg {
    width: 8px;
    height: 12px;
    color: var(--color-text-primary, #12151F); /* Light mode - usado pelo currentColor */
}

/* Dark mode - Ícone chevron */
.dark .listing-layout__tab-icon svg,
.dark-mode .listing-layout__tab-icon svg,
[data-theme="dark"] .listing-layout__tab-icon svg {
    color: var(--color-neutral-300, #E0E2EB); /* Dark mode conforme Figma */
}

/* ============================================================
   ÁREA DE CONTEÚDO PRINCIPAL
   ============================================================ */

/* Coluna direita: agrupa o scroll container (content) e o footer fixo */
.listing-layout__right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.listing-layout__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-secondary, #F6F6F9); /* neutral-100 — GALES v1 sem dark mode */
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    position: relative;
}


/* Scrollbar content */
.listing-layout__content::-webkit-scrollbar {
    width: 6px;
}

.listing-layout__content::-webkit-scrollbar-track {
    background: transparent;
}

.listing-layout__content::-webkit-scrollbar-thumb {
    background: var(--color-border, #CED3E2);
    border-radius: 3px;
}

/* Dark mode - Scrollbar content */
.dark .listing-layout__content::-webkit-scrollbar-thumb,
.dark-mode .listing-layout__content::-webkit-scrollbar-thumb,
[data-theme="dark"] .listing-layout__content::-webkit-scrollbar-thumb {
    background: var(--color-neutral-700, #1D2333);
}

/* Dark mode - Content */
/* Cor mais clara que o body para criar "card" visual conforme Figma */
.dark .listing-layout__content,
.dark-mode .listing-layout__content,
[data-theme="dark"] .listing-layout__content {
    background: var(--color-neutral-750, #141926);
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.listing-layout__breadcrumb {
    padding: 16px 72px 8px 56px; /* Reduzido para otimizar espaço vertical */
    background: transparent;
    border-bottom: none;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Dark mode - Breadcrumb */
.dark .listing-layout__breadcrumb,
.dark-mode .listing-layout__breadcrumb,
[data-theme="dark"] .listing-layout__breadcrumb {
    border-bottom: none;
}

/*
 * Breadcrumb visibility overrides
 * !important necessário: breadcrumb.css e styleAgrodefesa.css podem esconder elementos
 * com display:none ou visibility:hidden em determinados contextos
 */
.listing-layout__breadcrumb,
.listing-layout__breadcrumb .noprint,
.listing-layout__breadcrumb .breadcrumb-list {
    display: block !important;
    visibility: visible !important;
}

/*
 * Breadcrumb container width
 * !important necessário: .mdl-cell do Material Design Lite define width em grid
 */
.listing-layout__breadcrumb .noprint,
.listing-layout__breadcrumb .agr-menu-fixo,
.listing-layout__breadcrumb nav,
.listing-layout__breadcrumb .mdl-cell {
    display: block !important;
    width: 100% !important;
}

/*
 * Breadcrumb list flexbox
 * !important necessário: breadcrumb.css define display:block e flex-direction diferentes
 */
.listing-layout__breadcrumb-list,
.listing-layout__breadcrumb .breadcrumb-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/*
 * Breadcrumb items inline
 * !important necessário: breadcrumb.css define display:block em li
 */
.listing-layout__breadcrumb-list li,
.listing-layout__breadcrumb .breadcrumb-list li,
.listing-layout__breadcrumb .breadcrumb-list .breadcrumb-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/*
 * Links e spans inline
 * !important necessário: styleAgrodefesa.css pode definir display:block
 */
.listing-layout__breadcrumb-list li a,
.listing-layout__breadcrumb-list li span,
.listing-layout__breadcrumb .breadcrumb-list li a,
.listing-layout__breadcrumb .breadcrumb-list li span,
.listing-layout__breadcrumb .breadcrumb-list .breadcrumb-item a,
.listing-layout__breadcrumb .breadcrumb-list .breadcrumb-item span {
    display: inline !important;
    white-space: nowrap !important;
}

/*
 * Chevron separador entre itens
 * !important necessário: breadcrumb.css usa background-image para ícone SVG
 */
.listing-layout__breadcrumb-list li:not(:last-child)::after,
.listing-layout__breadcrumb .breadcrumb-list li:not(:last-child)::after,
.listing-layout__breadcrumb .breadcrumb-list .breadcrumb-item:not(:last-child)::after {
    content: '' !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 12L31 24L19 36' stroke='%237A839F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    color: transparent !important;
    font-size: 0 !important;
    margin-left: 0 !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/*
 * Breadcrumb link/span typography
 * !important necessário: estilos globais de links podem sobrescrever cor
 */
.listing-layout__breadcrumb-list li a,
.listing-layout__breadcrumb-list li span,
.listing-layout__breadcrumb .breadcrumb-list li a,
.listing-layout__breadcrumb .breadcrumb-list li span {
    font-family: var(--font-body, 'Inter'), sans-serif;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-p3, 14px);
    line-height: var(--line-height-p3, 24px);
    color: var(--color-text-muted, #7A839F) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast, 150ms ease-in-out);
}

.listing-layout__breadcrumb-list li a:hover,
.listing-layout__breadcrumb .breadcrumb-list li a:hover {
    color: var(--color-text-secondary, #394360) !important;
    text-decoration: none !important;
}

.listing-layout__breadcrumb-list li:last-child a,
.listing-layout__breadcrumb-list li:last-child span,
.listing-layout__breadcrumb .breadcrumb-list li:last-child a,
.listing-layout__breadcrumb .breadcrumb-list li:last-child span {
    color: var(--color-text-primary, #12151F) !important;
    font-weight: var(--font-weight-semibold, 600);
}

/* Dark mode - Breadcrumb chevron */
.dark .listing-layout__breadcrumb-list li:not(:last-child)::after,
.dark-mode .listing-layout__breadcrumb-list li:not(:last-child)::after,
[data-theme="dark"] .listing-layout__breadcrumb-list li:not(:last-child)::after,
.dark .listing-layout__breadcrumb .breadcrumb-list li:not(:last-child)::after,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li:not(:last-child)::after,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li:not(:last-child)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 12L31 24L19 36' stroke='%23A2A8B9' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.dark .listing-layout__breadcrumb-list li a,
.dark .listing-layout__breadcrumb-list li span,
.dark-mode .listing-layout__breadcrumb-list li a,
.dark-mode .listing-layout__breadcrumb-list li span,
[data-theme="dark"] .listing-layout__breadcrumb-list li a,
[data-theme="dark"] .listing-layout__breadcrumb-list li span,
.dark .listing-layout__breadcrumb .breadcrumb-list li a,
.dark .listing-layout__breadcrumb .breadcrumb-list li span,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li a,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li span,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li a,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li span {
    color: var(--color-neutral-500, #6B7280) !important;
}

.dark .listing-layout__breadcrumb-list li a:hover,
.dark-mode .listing-layout__breadcrumb-list li a:hover,
[data-theme="dark"] .listing-layout__breadcrumb-list li a:hover,
.dark .listing-layout__breadcrumb .breadcrumb-list li a:hover,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li a:hover,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li a:hover {
    color: var(--color-neutral-400, #9CA3AF) !important;
}

.dark .listing-layout__breadcrumb-list li:last-child a,
.dark .listing-layout__breadcrumb-list li:last-child span,
.dark-mode .listing-layout__breadcrumb-list li:last-child a,
.dark-mode .listing-layout__breadcrumb-list li:last-child span,
[data-theme="dark"] .listing-layout__breadcrumb-list li:last-child a,
[data-theme="dark"] .listing-layout__breadcrumb-list li:last-child span,
.dark .listing-layout__breadcrumb .breadcrumb-list li:last-child a,
.dark .listing-layout__breadcrumb .breadcrumb-list li:last-child span,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li:last-child a,
.dark-mode .listing-layout__breadcrumb .breadcrumb-list li:last-child span,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li:last-child a,
[data-theme="dark"] .listing-layout__breadcrumb .breadcrumb-list li:last-child span {
    color: var(--color-text-primary, #E0E2EB) !important;
}

/* ============================================================
   ÁREA PRINCIPAL (Conteúdo Scrollável)
   ============================================================ */

.listing-layout__main {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    padding: 0;
}

/* Evita que dropdowns position:absolute dentro do painel pesquisar
   inflacionem o scrollHeight do .listing-layout__content */
.listing-layout__main:has(#panel-pesquisar.listing-layout__panel--active) {
    overflow: clip;
}

/* Painéis que precisam preencher o viewport (mapa, dashboard, BI):
   main vira flex container e o painel ocupa todo o espaço disponível.
   panel-listagem NÃO está aqui — ele cresce livremente e o .listing-layout__content scrolla. */
.listing-layout__main:has(
    #panel-geo.listing-layout__panel--active,
    #panel-dashboard.listing-layout__panel--active,
    #panel-bi.listing-layout__panel--active,
    #panel-indicador.listing-layout__panel--active,
    #panel-interestadual.listing-layout__panel--active,
    #panel-resumo.listing-layout__panel--active
) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}


/* ============================================================
   PAINÉIS DE CONTEÚDO (Pesquisar/Listagem)
   ============================================================ */

.listing-layout__panel {
    display: none;
    width: 100%;
}

.listing-layout__panel--active {
    display: flex;
    flex-direction: column;
    padding: var(--arenito-spacing-4, 16px) var(--arenito-spacing-12, 72px) 0 var(--arenito-spacing-10, 56px);
    box-sizing: border-box;
}

/* Painéis de preenchimento (mapa, dashboard, BI): ocupam todo o espaço do main */
#panel-geo.listing-layout__panel--active,
#panel-dashboard.listing-layout__panel--active,
#panel-bi.listing-layout__panel--active,
#panel-indicador.listing-layout__panel--active,
#panel-interestadual.listing-layout__panel--active,
#panel-resumo.listing-layout__panel--active {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ============================================================
   FORMULÁRIO DE PESQUISA
   ============================================================ */

.listing-layout__search-form {
    display: flex;
    flex-direction: column;
    height: auto; /* não preenche o painel — altura do conteúdo */
}

.listing-layout__search-title {
    font-family: var(--font-heading, 'Space Grotesk'), sans-serif;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-h2, 20px);
    line-height: var(--line-height-h2, 30px);
    color: var(--color-text-primary, #12151F);
    margin: 0 0 24px 0;
    text-transform: capitalize;
}

/* Dark mode - Search title */
.dark .listing-layout__search-title,
.dark-mode .listing-layout__search-title,
[data-theme="dark"] .listing-layout__search-title {
    color: var(--color-text-primary, #E0E2EB);
}

.listing-layout__search-fields {
    overflow: visible;
}

/* ============================================================
   FOOTER - Botões de Ação
   ============================================================ */

.listing-layout__footer {
    flex-shrink: 0;
    z-index: 10;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: var(--arenito-spacing-5, 20px);
    padding: var(--arenito-spacing-6, 24px) var(--arenito-spacing-12, 72px) var(--arenito-spacing-6, 24px) var(--arenito-spacing-7, 32px);
    background: var(--arenito-surface-base-neutral-container-default, #F6F6F9);
    border-top: 1px solid var(--arenito-border-base-neutral-default, #CED3E2);
}

/* Botões do footer */
.listing-layout__btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    width: 180px;
    height: 40px;
    border-radius: var(--radius-default);
    font-family: var(--font-body, 'Inter'), sans-serif;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-p3);
    line-height: var(--line-height-p3);
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
    text-decoration: none !important;
}

/* Botão outline (Limpar) */
.listing-layout__btn--outline {
    background: transparent;
    border: 1px solid var(--color-border, #CED3E2);
    color: var(--color-text-primary, #12151F) !important;
}

.listing-layout__btn--outline:hover {
    background: var(--color-bg-tertiary, #ECEDF2);
    border-color: var(--color-border, #CED3E2);
}

/* Dark mode - Botão outline */
.dark .listing-layout__btn--outline,
.dark-mode .listing-layout__btn--outline,
[data-theme="dark"] .listing-layout__btn--outline {
    border-color: var(--color-border, #2A2F41);
    color: var(--color-text-primary, #E0E2EB);
}

.dark .listing-layout__btn--outline:hover,
.dark-mode .listing-layout__btn--outline:hover,
[data-theme="dark"] .listing-layout__btn--outline:hover {
    background: var(--color-bg-tertiary, #1D2333);
    border-color: var(--color-border, #2A2F41);
}

/* Botão primary (Pesquisar) - Arenito filled accent */
.listing-layout__btn.listing-layout__btn--primary,
.listing-layout__btn--primary.mdl-button {
    background: var(--color-primary) !important;
    color: var(--color-neutral-100, #F6F6F9) !important;
}

.listing-layout__btn.listing-layout__btn--primary:hover,
.listing-layout__btn--primary.mdl-button:hover {
    background: var(--color-primary-hover) !important;
    color: var(--color-neutral-100, #F6F6F9) !important;
}

/* Dark mode - Botão primary - dark accent-300 */
.dark .listing-layout__btn--primary,
.dark-mode .listing-layout__btn--primary,
[data-theme="dark"] .listing-layout__btn--primary {
    background: #476DF5;
    color: var(--color-neutral-100, #F6F6F9);
}

.dark .listing-layout__btn--primary:hover,
.dark-mode .listing-layout__btn--primary:hover,
[data-theme="dark"] .listing-layout__btn--primary:hover {
    background: #153193;
}

/* ============================================================
   TABS EXTRAS (Dashboard) - Indicadores, Geo, etc.
   ============================================================ */

.listing-layout__tab-divider {
    width: 100%;
    height: 1px;
    background: var(--color-border, #CED3E2);
    margin: 8px 0;
}

/* Dark mode - Divider */
.dark .listing-layout__tab-divider,
.dark-mode .listing-layout__tab-divider,
[data-theme="dark"] .listing-layout__tab-divider {
    background: var(--color-border, #2A2F41);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
    .listing-layout__sidebar {
        width: 240px;
        min-width: 240px;
        padding-left: 40px;
    }

    .listing-layout__panel--active {
        padding: var(--arenito-spacing-4, 16px) var(--arenito-spacing-8, 40px) 0 var(--arenito-spacing-7, 32px);
    }

    .listing-layout__breadcrumb {
        padding: 24px 40px 12px 32px;
    }

    .listing-layout__footer {
        padding: 24px 40px;
    }
}

@media (max-width: 1024px) {
    .listing-layout__sidebar {
        width: 200px;
        min-width: 200px;
        padding: 16px 12px 16px 24px;
    }

    .listing-layout__footer {
        padding: 20px 24px;
    }

    .listing-layout__btn {
        width: 140px;
    }
}

@media (max-width: 768px) {
    .listing-layout {
        flex-direction: column;
    }

    .listing-layout__sidebar {
        width: 100%;
        min-width: 100%;
        height: auto;
        flex-direction: row;
        padding: 12px 16px;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--color-border, #CED3E2);
    }

    .listing-layout__tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .listing-layout__content {
        flex: 1;
        overflow: auto;
    }

    .listing-layout__panel--active {
        padding: var(--arenito-spacing-4, 16px) var(--arenito-spacing-4, 16px) 0;
    }

    .listing-layout__breadcrumb {
        padding: 16px;
    }

    .listing-layout__footer {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .listing-layout__btn {
        width: 100%;
    }
}

/* ============================================================
   COMPATIBILIDADE COM CLASSES EXISTENTES

   Nota: Alguns !important são necessários para sobrescrever estilos legados
   de styleAgrodefesa.css e outros arquivos CSS antigos.
   ============================================================ */

/* Esconde tabs antigas quando novo layout está ativo */
/* !important necessário: tabs antigas podem ter display definido inline */
.listing-layout .listing-tabs-container,
.listing-layout .listing-tabs,
body .listing-layout .listing-tabs-container,
body .listing-layout .listing-tabs {
    display: none !important;
}

/* Ajusta conteúdo existente */
.listing-layout #caixaListar,
body .listing-layout #caixaListar {
    width: 100%;
}

/* Grid wrapper: oculto até revealTable() adicionar .listagem-revealed */
#listagem-skeleton {
    margin-top: var(--arenito-spacing-8);
}

#listagem-grid-wrapper {
    opacity: 0;
    margin-top: var(--arenito-spacing-8);
}

#listagem-grid-wrapper.listagem-revealed {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ============================================================
   SKELETON DE CARREGAMENTO
   ============================================================ */

@keyframes gales-shimmer {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.gales-skeleton__row {
    width: 100%;
    height: 52px;
    border-bottom: 1px solid var(--color-bg-tertiary);
    background: transparent;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-lg);
    gap: var(--spacing-lg);
    animation: gales-shimmer 1.5s ease-in-out infinite;
    animation-delay: var(--gales-delay, 0s);
}

.gales-skeleton__row::before {
    content: '';
    flex: 3;
    height: 12px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
}

.gales-skeleton__row::after {
    content: '';
    flex: 1;
    height: 12px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
    opacity: 0.5;
}

.gales-skeleton__row--header {
    height: 40px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    padding: 0;
    display: block;
    animation: gales-shimmer 1.5s ease-in-out infinite;
}

.gales-skeleton__row--header::before,
.gales-skeleton__row--header::after {
    content: none;
}

/* !important necessário: .caixaConteudo tem margin definido em styleAgrodefesa.css */
.listing-layout .caixaConteudo,
body .listing-layout .caixaConteudo {
    margin-block-start: 0 !important;
}

.listing-layout #boxPesquisar,
body .listing-layout #boxPesquisar {
    padding: 0;
}

/* !important necessário: #formPesquisar pode ter padding de estilos legados */
/* Exceção: quando tem .ds-form-search, usa o padding do design system */
.listing-layout #formPesquisar:not(.ds-form-search),
body .listing-layout #formPesquisar:not(.ds-form-search) {
    padding: 0 !important;
}

.listing-layout #divEdicao,
body .listing-layout #divEdicao {
    background: transparent;
    border-radius: 0;
    margin: 0;
}

/* !important necessário: .search-box-size tem background em estilos legados */
.listing-layout .search-box-size,
body .listing-layout .search-box-size {
    background: transparent !important;
}

/* ============================================================
   PAINEL (BI/Superset) EM TELA CHEIA
   Quando a aba "Painel" está ativa, esconde a migalha de pão e
   faz o iframe ocupar 100% da área de conteúdo disponível.
   Ativado pela classe .listing-layout--panel-fullscreen (listar-tabs.js).
   ============================================================ */
.listing-layout--panel-fullscreen .listing-layout__breadcrumb {
    display: none !important;
}

/* Remove o padding do main para o painel usar toda a largura/altura */
.listing-layout--panel-fullscreen .listing-layout__main {
    padding: 0 !important;
    overflow: hidden !important;
}

/* Cadeia de alturas até o iframe ocupar 100% */
.listing-layout--panel-fullscreen #panel-dashboard,
.listing-layout--panel-fullscreen #dashboard,
.listing-layout--panel-fullscreen .dashboard-container,
.listing-layout--panel-fullscreen .dashboard-iframe-wrapper {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
}

.listing-layout--panel-fullscreen .dashboard-iframe-wrapper iframe {
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
}