/* =============================================================================
   Lumina UI — refinamento visual global
   Carregado POR ÚLTIMO no layout. Não altera o markup das telas: ajusta os
   tokens do tema (Tailwind v4 usa variáveis CSS) e os componentes compartilhados.
   Objetivos: tipografia ~8% menor, espaçamento consistente, controles com a
   mesma altura, transições suaves e foco acessível.
   ============================================================================= */

/* ---------- 1. Tokens: tipografia mais compacta e proporcional ---------- */
:root {
    --text-theme-xs: 11.5px;  --text-theme-xs--line-height: 16px;
    --text-theme-sm: 13px;    --text-theme-sm--line-height: 19px;
    --text-theme-xl: 18px;    --text-theme-xl--line-height: 26px;
    --text-title-sm: 24px;    --text-title-sm--line-height: 32px;
    --text-title-md: 28px;    --text-title-md--line-height: 36px;
    --text-title-2xl: 56px;   --text-title-2xl--line-height: 68px;

    --text-xs: 0.71875rem;    /* 11.5px */
    --text-sm: 0.8125rem;     /* 13px   */
    --text-base: 0.9375rem;   /* 15px   */
    --text-lg: 1.0625rem;     /* 17px   */
    --text-xl: 1.1875rem;     /* 19px   */
    --text-2xl: 1.375rem;     /* 22px   */

    --ui-raio: 10px;
    --ui-altura-controle: 40px;
    --ui-transicao: 160ms cubic-bezier(.2, .8, .2, 1);
    --ui-foco: 0 0 0 3px rgba(70, 95, 255, .18);
    --ui-sombra-card: 0 1px 2px rgba(16, 24, 40, .04);
    --ui-sombra-hover: 0 4px 14px rgba(16, 24, 40, .07);
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* Área de conteúdo: um pouco mais de respiro lateral no desktop */
main > div { padding-top: 20px; }
@media (min-width: 768px) { main > div { padding: 24px 28px; } }

/* Entrada suave do conteúdo a cada navegação.
   SEM fill-mode "both/forwards": uma animação de opacidade que permanece aplicada
   mantém um stacking context no container e "prende" os modais (z-index) abaixo
   do cabeçalho e do menu. Sem fill, ao terminar (220 ms) o contexto some. */
@keyframes ui-entrar { from { opacity: 0; } to { opacity: 1; } }
main > div { animation: ui-entrar 220ms ease-out; }

/* ---------- 3. Formulários: mesma altura e tipografia em todos os controles ---------- */
.campo-label { font-size: 12px; margin-bottom: 5px; letter-spacing: .01em; }
.campo-input,
.dt-search-wrap input {
    height: var(--ui-altura-controle);
    border-radius: var(--ui-raio);
    font-size: 13px;
    transition: border-color var(--ui-transicao), box-shadow var(--ui-transicao), background-color var(--ui-transicao);
}
.campo-input:hover { border-color: #b3bcca; }
.dark .campo-input:hover { border-color: #4b5563; }
.campo-input:focus { box-shadow: var(--ui-foco); }
.campo-input:disabled { opacity: .6; cursor: not-allowed; }
select.campo-input { padding-right: 32px; cursor: pointer; }
textarea.campo-input { height: auto; min-height: 88px; padding-top: 10px; padding-bottom: 10px; line-height: 1.5; }

/* iOS dá zoom automático em campos com fonte < 16px: no celular mantém 16px */
@media (max-width: 640px) {
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
}

/* ---------- 4. Botões: altura, respiro e feedback consistentes ---------- */
.btn-salvar, .btn-cancelar, .dt-download {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--ui-altura-controle);
    padding: 0 16px;
    border-radius: var(--ui-raio);
    font-size: 13px; font-weight: 500; line-height: 1;
    white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background-color var(--ui-transicao), border-color var(--ui-transicao),
                box-shadow var(--ui-transicao), transform 80ms ease, opacity var(--ui-transicao);
}
.btn-salvar { box-shadow: 0 1px 2px rgba(70, 95, 255, .25); }
.btn-salvar:hover { box-shadow: 0 3px 10px rgba(70, 95, 255, .28); }
.btn-cancelar:hover { background: #f9fafb; border-color: #b3bcca; }
.dark .btn-cancelar:hover { background: #273244; }
.btn-salvar:active, .btn-cancelar:active, .dt-download:active { transform: translateY(1px); }
.btn-salvar:disabled, .btn-cancelar:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* Botões "soltos" usados nas tabelas/ações (Editar / Remover etc.) */
button, [role=button], a { transition: color var(--ui-transicao), background-color var(--ui-transicao), border-color var(--ui-transicao), opacity var(--ui-transicao); }

/* Grupos de ação lado a lado: garante respiro mínimo mesmo quando o container não tem gap */
:is(.btn-salvar, .btn-cancelar, .dt-download) + :is(.btn-salvar, .btn-cancelar, .dt-download) { margin-inline-start: 8px; }
:is(.flex, .grid, .inline-flex)[class*="gap-"] > :is(.btn-salvar, .btn-cancelar, .dt-download) + :is(.btn-salvar, .btn-cancelar, .dt-download) { margin-inline-start: 0; }

/* Foco visível só por teclado (não aparece no clique) */
:focus { outline: none; }
:focus-visible { outline: 2px solid #465fff; outline-offset: 2px; border-radius: 6px; }
.campo-input:focus-visible { outline: none; }

/* ---------- 5. Cards e superfícies ---------- */
.rounded-2xl.border { box-shadow: var(--ui-sombra-card); }
a.rounded-2xl.border:hover, .ftth-card:hover { box-shadow: var(--ui-sombra-hover); }

/* ---------- 6. Tabelas: cabeçalho discreto, linhas com hover e respiro ---------- */
table { border-collapse: collapse; }
thead th {
    font-size: 11px !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .04em;
    color: #667085;
    white-space: nowrap;
}
.dark thead th { color: #98a2b3; }
tbody tr { transition: background-color var(--ui-transicao); }
tbody tr:hover { background-color: rgba(70, 95, 255, .035); }
.dark tbody tr:hover { background-color: rgba(255, 255, 255, .025); }
/* Ações dentro de células: nunca coladas (se o anterior já tem mr-*, não duplica) */
td > :is(button, a):not([class*="mr-"]) + :is(button, a) { margin-left: 12px; }

/* Rolagem horizontal das tabelas com indicação suave de conteúdo cortado */
.overflow-x-auto { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* ---------- 7. Badges/pílulas: leitura mais leve ---------- */
.rounded-full.px-2\.5, .rounded-full.px-2 { letter-spacing: .01em; }

/* ---------- 8. Modais (padrão Alpine x-show do template + ftth) ---------- */
@keyframes ui-modal { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ui-fundo { from { opacity: 0; } to { opacity: 1; } }
.fixed.inset-0.z-99999 > .relative, .ftth-modal.aberto .ftth-modal-caixa { animation: ui-modal 180ms cubic-bezier(.2, .8, .2, 1) both; }
.fixed.inset-0.z-99999 > .fixed, .ftth-modal.aberto .ftth-modal-fundo { animation: ui-fundo 160ms ease-out both; }
.fixed.inset-0.z-99999 > .relative { box-shadow: 0 20px 50px rgba(16, 24, 40, .18); }
.fixed.inset-0.z-99999 h4 { font-size: 18px; line-height: 26px; }
@media (max-width: 640px) { .fixed.inset-0.z-99999 > .relative, .ftth-modal-caixa { padding: 20px !important; border-radius: 18px !important; } }

/* ---------- 9. Menu lateral e cabeçalho ---------- */
.menu-item, .menu-dropdown-item { font-size: 13px; transition: background-color var(--ui-transicao), color var(--ui-transicao); }

/* ---------- 10. Barras de rolagem discretas ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(152, 162, 179, .45) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(152, 162, 179, .45); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(152, 162, 179, .7); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 11. Acessibilidade: respeita quem prefere menos animação ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 12. Evita "piscar" antes do Alpine iniciar (ver _Layout) ---------- */
.ui-carregando [x-show]:not([style*="display"]),
.ui-carregando [x-cloak],
.ui-carregando .overflow-hidden.transform.translate { display: none !important; }


/* ---------- 13. Altura real da tela no celular + rolagem do menu ---------- */
/* 100vh no navegador do celular inclui a área da barra de endereço: o fim do
   menu e da página ficava escondido. dvh = altura visível de verdade. */
body > .flex.h-screen { height: 100vh; height: 100dvh; }

@media (max-width: 1023.98px) {
    .sidebar {
        height: 100vh; height: 100dvh;
        z-index: 100000;              /* acima do cabeçalho (z 99999) quando aberto */
    }
    .sidebar .no-scrollbar {
        overscroll-behavior: contain; /* rolar o menu não arrasta a página por trás */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- 14. Modais do template (Alpine): sempre acima de tudo e centralizados ---------- */
/* align-items:center corta o topo de modais mais altos que a tela; margin:auto
   centraliza quando cabe e, quando não cabe, começa no topo com rolagem. */
.fixed.inset-0.z-99999.overflow-y-auto { z-index: 100001; align-items: flex-start; }
.fixed.inset-0.z-99999.overflow-y-auto > .relative { margin-top: auto; margin-bottom: auto; }