/**
 * Detalhar Drawer — Componentes visuais
 *
 * CSS puro e aditivo: não remove nem sobrescreve nenhum componente existente.
 * Classes novas a serem aplicadas gradualmente, tela por tela.
 *
 * Componentes:
 *   .detail-htabs         — Tabs horizontais (seleção de seção)
 *   .detail-row-list      — Tabela simples label/valor
 *   .drawer--detalhar     — Variante de largura fixa para detalhares
 *
 * @version 1.0.0
 * @date 2026-08-07
 */

/* ==========================================================================
   HORIZONTAL TABS
   Wrapper com fundo neutro, tabs crescem igualmente no espaço disponível.
   Estado ativo: fundo branco + sombra sutil. Inativo: fundo do wrapper.
   ========================================================================== */

.detail-htabs {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-default);
    width: 100%;
    box-sizing: border-box;
}

.detail-htabs__tab {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto; /* distribui espaço proporcional ao conteúdo — evita truncamento em abas no limite */
    min-width: 0; /* permite encolher abaixo do conteúdo para text-overflow funcionar */
    height: calc(var(--spacing-lg) + var(--spacing-sm)); /* 20 + 8 = 28px — sem token exato */
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-default);
    cursor: pointer;
    transition: background var(--transition-base), box-shadow var(--transition-base);
    border: none;
    padding: 0 var(--spacing-xs);
    user-select: none;
}

.detail-htabs__tab.is-active {
    background: var(--color-bg-secondary);
    border-radius: calc(var(--radius-default) - var(--radius-sm));
    box-shadow: var(--shadow-sm);
}

.detail-htabs__label {
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-p3);
    line-height: var(--line-height-p3);
    color: var(--color-text-secondary);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.detail-htabs__tab.is-active .detail-htabs__label {
    color: var(--color-text-primary);
}

/* Tooltip das tabs — position: fixed para escapar do overflow: auto do drawer */
.detail-htabs__tooltip {
    position: fixed;
    background: #1A1D29; /* cor padrão de tooltip do design system — ver tooltip.css */
    color: var(--color-text-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-default);
    font-family: var(--font-body);
    font-size: var(--font-size-p5);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-p5);
    white-space: nowrap;
    pointer-events: none;
    z-index: var(--z-tooltip);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.detail-htabs__tooltip.is-visible {
    opacity: 1;
}



/* ==========================================================================
   SIMPLE TABLE (ROW LIST)
   Título opcional + lista de pares label/valor separados por borda esquerda.
   ========================================================================== */

.detail-row-list {
    --detail-label-min-width: 140px; /* largura mínima da coluna de label — sem token exato no design system */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
    width: 100%;
}

.detail-row-list__title {
    width: 100%;
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-p3);
    line-height: var(--line-height-p3);
    color: var(--color-text-primary);
}

.detail-row-list__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-left: 1px solid var(--color-border);
    padding-left: var(--spacing-lg);
}

.detail-row-list__row {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-12) 0;
    gap: var(--spacing-5xl);
    width: 100%;
    min-height: var(--spacing-4xl);
    box-sizing: border-box;
}

.detail-row-list__label-col {
    display: flex;
    align-items: center;
    flex: none;
    min-width: var(--detail-label-min-width);
}

.detail-row-list__value-col {
    display: flex;
    align-items: center;
    flex: 1;
}

.detail-row-list__label {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p4);
    line-height: var(--line-height-p4);
    color: var(--color-text-secondary);
    flex: 1;
}

.detail-row-list__value {
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-p3);
    line-height: var(--line-height-p3);
    color: var(--color-text-primary);
    flex: 1;
    word-break: break-word;
}


/* ==========================================================================
   DETAIL GRID — OVERRIDES PARA O DRAWER
   Converte o layout 2col/1col do DetailResolver (grid) para o padrão
   row-list (label esquerda, valor direita, uma linha por campo).
   Escopo: apenas dentro de .drawer--detalhar — nenhuma outra tela é afetada.
   ========================================================================== */

.drawer--detalhar .detail-section {
    margin-bottom: var(--spacing-2xl);
}

.drawer--detalhar .detail-section:last-child {
    margin-bottom: 0;
}

.drawer--detalhar .detail-section-title {
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-p3);
    line-height: var(--line-height-p3);
    color: var(--color-text-primary);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: var(--spacing-sm);
    border-bottom: none;
    padding-bottom: 0;
}

.drawer--detalhar .detail-grid {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border);
    padding-left: var(--spacing-lg);
    gap: 0;
}

.drawer--detalhar .detail-item {
    display: flex;
    flex-direction: row; /* detail.css tem column !important — override necessário */
    align-items: flex-start;
    padding: var(--spacing-12) 0;
    gap: var(--spacing-5xl);
    min-height: var(--spacing-4xl);
    grid-column: unset;
}

.drawer--detalhar .detail-label {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p4);
    line-height: var(--line-height-p4);
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: 0;
    flex: 1;
}

.drawer--detalhar .detail-value {
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-p3);
    line-height: var(--line-height-p3);
    color: var(--color-text-primary);
    flex: 1;
    word-break: break-word;
}

/* Seção de tabela sem dados: mostra mensagem discreta em vez de título flutuando.
   Sem border-left própria — o pai (.detail-grid) já tem a borda lateral. */
.drawer--detalhar .detail-grid.layout-table:empty::after {
    content: "Nenhum registro encontrado.";
    display: block;
    padding: var(--spacing-12) 0;
    font-family: var(--font-body);
    font-size: var(--font-size-p4);
    line-height: var(--line-height-p4);
    color: var(--color-text-secondary);
}


/* ==========================================================================
   DRAWER — VARIANTE DETALHAR
   Largura fixa de 600px. Footer oculto (detalhar é somente leitura).
   Depende da estrutura base de drawer.css (.drawer, .drawer__header, etc.).
   ========================================================================== */

.drawer--detalhar {
    --drawer-width: 600px; /* largura fixa do drawer detalhar — sem token exato */
    --detail-scrollbar-width: 6px; /* largura da scrollbar — sem token exato */
    overflow-y: auto; /* drawer é o scroll container */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.drawer--detalhar::-webkit-scrollbar {
    width: var(--detail-scrollbar-width);
}

.drawer--detalhar::-webkit-scrollbar-track {
    background: transparent;
}

.drawer--detalhar::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-sm);
}

.drawer--detalhar::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Body com altura hug: o JS força flex:none e overflow:visible via inline style !important.
   CSS só consegue controlar o que o JS não sobrescreve (ex: padding-bottom). */
.drawer--detalhar .drawer__body#tabelaDetalhar {
    padding-bottom: var(--spacing-5xl);
}

/* Gap de 32px entre as tabs e o primeiro título de seção */
.drawer--detalhar .detail-htabs {
    margin-bottom: var(--spacing-2xl);
}

.drawer--detalhar .drawer__footer {
    display: none;
}

/* Footer visível quando o conteúdo possui ações globais.
   position: sticky + bottom: 0 mantém o footer ancorado ao fim do viewport do drawer.
   JS (moverBotoesParaFooter) garante min-height no body suficiente para o footer sempre
   estar no fundo — mesmo quando o conteúdo é curto.
   z-index: 10005 necessário acima do #tabelaDetalhar (z-index: 10004 em detail.css). */
.drawer--detalhar.has-footer .drawer__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10005;
    padding: var(--drawer-footer-padding);
    gap: var(--spacing-lg);
    background: linear-gradient(
        to bottom,
        transparent 0,
        var(--arenito-surface-base-neutral-container-default, #F6F6F9) var(--drawer-footer-padding)
    );
}

/* Reduz padding-bottom do body quando há footer */
.drawer--detalhar.has-footer .drawer__body#tabelaDetalhar {
    padding-bottom: var(--spacing-2xl) !important;
}

/* Botões do footer — crescem igualmente para preencher a largura */
.detalhar-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-12);
    height: var(--spacing-3xl);
    flex: 1;
    border-radius: var(--radius-default);
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-p3);
    line-height: var(--line-height-p3);
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    transition: background var(--transition-base), border-color var(--transition-base);
}

.detalhar-btn--primary {
    background: var(--color-primary);
    color: var(--color-text-light);
}

.detalhar-btn--primary:hover {
    background: var(--color-primary-hover);
}

.detalhar-btn--secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.detalhar-btn--secondary:hover {
    background: var(--color-bg-tertiary);
}

.drawer--detalhar .drawer__subtitle {
    display: none;
}

/* Cor das labels: detail.css tem #tabelaDetalhar span:not() com especificidade
   (1,0,1)=101 que bate nosso seletor de classe. !important resolve o conflito. */
#tabelaDetalhar .detail-label {
    color: var(--color-text-secondary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ==========================================================================
   DETALHAR DENÚNCIA
   Classes específicas do detalhar de abrir-denuncia.
   ========================================================================== */

/* Estado vazio — dentro de .detail-grid para herdar border-left e recuo */
.detail-vazio {
    font-family: var(--font-body);
    font-size: var(--font-size-p4);
    line-height: var(--line-height-p4);
    color: var(--color-text-secondary);
    margin: 0;
    padding: var(--spacing-12) 0;
}

/* Assunto: texto longo preserva quebras de linha */
.detail-value--pre {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Itens que ocupam a largura total (ex.: Assunto) */
.detail-item--full {
    grid-column: 1 / -1;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Wrapper com scroll horizontal para tabelas em detail-section */
.detail-table-container {
    overflow-x: auto;
}

/* Canvas de visualização de marca ferro */
.detail-canvas-marca {
    width: 140px;
    height: 140px;
    border: 1px solid var(--color-border);
    margin: 0 0 var(--spacing-xs) 0;
    display: block;
}

/* Tabela de itens dentro de detail-section (ex.: materiais solicitados) */
.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--font-size-p3);
    line-height: var(--line-height-p3);
}

.detail-table thead th {
    text-align: left;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-p4);
    color: var(--color-text-secondary);
    padding: 0 var(--spacing-sm) var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.detail-table tbody td {
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
    vertical-align: top;
}

.detail-table tbody tr:last-child td {
    border-bottom: none;
}

/* Sub-seção dentro de detail-section (ex.: testes de exame, antígenos) */
.detail-subsection {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.detail-subsection-title {
    font-family: var(--font-body);
    font-size: var(--font-size-p3);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

/* Margem superior para itens após tabelas */
.detail-item--mt {
    margin-top: var(--spacing-sm);
}

/* Mapas no drawer — altura fixa sem token de design system correspondente */
.denuncia-mapa,
.detalhar-mapa {
    --detalhar-mapa-height: 400px;
    width: 100%;
    height: var(--detalhar-mapa-height);
    border: none;
    border-radius: var(--radius-md);
    display: block;
}


/* ==========================================================================
   ERRO DE CARREGAMENTO
   Mensagem exibida quando o AJAX falha — inserida via JS no #tabelaDetalhar.
   ========================================================================== */

.detail-error {
    padding: var(--spacing-md);
}


/* ==========================================================================
   SKELETON LOADING STATE
   4 grupos × 7 barras. Barra 0 de cada grupo = 120px (título de seção).
   Shimmer via ::after — gradiente que varre cada grupo da esquerda para direita.
   ========================================================================== */

/* Reflexo horizontal — varre o grupo inteiro da esquerda para a direita */
@keyframes detail-grupo-reflexo {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.detail-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    padding: var(--spacing-sm) 0;
}

/* overflow:hidden + position:relative necessários para o clip do ::after */
.detail-skeleton__grupo {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    position: relative;
    overflow: hidden;
}

/* Reflexo: gradiente semi-transparente que varre o grupo */
.detail-skeleton__grupo::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 15%,
        color-mix(in srgb, var(--color-neutral-100) 50%, transparent) 50%,
        transparent 85%
    );
    animation: detail-grupo-reflexo 2.5s ease-in-out infinite;
}


.detail-skeleton__bar {
    height: var(--spacing-lg);
    border-radius: var(--radius-default);
    background: var(--color-neutral-200);
}

.detail-skeleton__bar--titulo {
    width: var(--spacing-11xl);
}


/* ==========================================================================
   BADGE — OVERRIDE PARA O DRAWER
   Mesmo padrão do table-listing.css: escopo por #tabelaDetalhar garante
   que os !important batam em qualquer regra de detail.css carregado via AJAX.
   Reproduz exatamente o Figma: padding 4px 12px, pill, font 12px 500.
   ========================================================================== */

#tabelaDetalhar .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--spacing-xs) var(--spacing-12) !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-p5) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-p5) !important;
    white-space: nowrap !important;
    border: none !important;
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: auto !important;
}

#tabelaDetalhar .badge-outline {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important; /* restaura border removido pelo reset acima */
}

#tabelaDetalhar .badge-success {
    background-color: var(--color-success-light) !important;
    color: var(--color-success-dark) !important;
}

#tabelaDetalhar .badge-danger {
    background-color: var(--color-danger-light) !important;
    color: var(--color-danger-dark) !important;
}

#tabelaDetalhar .badge-warning {
    background-color: var(--color-warning-light) !important;
    color: var(--color-warning-dark) !important;
}

#tabelaDetalhar .badge-secondary {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-secondary) !important;
}

.detail-grid--mb {
    margin-bottom: var(--spacing-md);
}

.detail-grid--mb-sm {
    margin-bottom: var(--spacing-sm);
}

.badge--gap {
    margin-right: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}