/**
 * CSS Global para Scroll
 * Scroll vertical SEMPRE visível (como grandes portais)
 * Previne scroll horizontal
 */

/* ============================================
   SCROLL PRINCIPAL - SEMPRE VISÍVEL
   ============================================ */

/* HTML - sem scroll próprio */
html {
    overflow: hidden !important;
    height: 100%;
}

/* Body - ÚNICO scroll principal */
body {
    overflow-y: scroll !important; /* SEMPRE visível */
    overflow-x: hidden !important;
    width: 100% !important;
    min-height: 100vh;
    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   PREVENÇÃO DE SCROLL HORIZONTAL GLOBAL
   ============================================ */

/* Todos os elementos principais - EXCETO carrosséis mobile */
*:not(.overflow-x-auto):not(.overflow-x-auto *) {
    max-width: 100%;
    box-sizing: border-box;
}

/* Permitir que carrosséis mobile tenham scroll horizontal */
.overflow-x-auto {
    max-width: 100% !important; /* Container respeita viewport */
    box-sizing: border-box;
}

.overflow-x-auto * {
    max-width: none; /* Conteúdo interno pode ultrapassar */
    box-sizing: border-box;
}

/* Containers principais - apenas prevenir overflow horizontal, não bloquear scroll */
.container,
.max-w-custom,
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-2xl,
.max-w-xl,
.max-w-lg,
.max-w-md,
.max-w-sm {
    max-width: 100%;
}

/* Elementos que podem causar overflow */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* Tabelas */
table {
    max-width: 100%;
    table-layout: auto;
    word-wrap: break-word;
}

/* Pre e Code */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

/* Flex containers */
.flex,
.flex-row,
.flex-col {
    min-width: 0;
    max-width: 100%;
}

/* Grid containers - apenas prevenir overflow horizontal */
.grid {
    max-width: 100%;
}

/* ============================================
   SCROLLBAR CUSTOMIZADA (APENAS NO BODY)
   ============================================ */

/* Webkit (Chrome, Safari, Edge) - Scrollbar apenas no body */
body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: #f3f4f6;
}

body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9333EA, #71E9D8);
    border-radius: 6px;
    border: 2px solid #f3f4f6;
}

body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #71E9D8, #9333EA);
}

/* Firefox - Scrollbar apenas no body */
body {
    scrollbar-width: thin;
    scrollbar-color: #9333EA #f3f4f6;
}

/* ============================================
   CORREÇÕES ESPECÍFICAS PARA PÁGINAS
   ============================================ */

/* Header - SEM SCROLL (elemento fixo e compacto) */
header,
.desktop-header,
.mobile-header {
    overflow: hidden !important; /* Header não deve ter scroll */
    max-width: 100vw !important; /* Não ultrapassar viewport */
    width: 100% !important; /* Largura total */
    position: relative; /* Contexto de posicionamento */
}

.desktop-header nav,
.desktop-header .header-line-1,
.desktop-header > div {
    overflow: hidden !important; /* Elementos internos do header sem scroll */
    max-width: 100% !important;
    width: 100% !important;
}

/* Navbar específica - prevenir scroll horizontal */
.desktop-header nav {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important; /* Permitir shrink */
    max-width: calc(100% - 400px) !important; /* Reservar espaço para logo e ações */
    flex: 1 1 0% !important; /* Flex grow mas respeitando limites */
}

/* Em telas menores, ajustar max-width da navbar */
@media (max-width: 1400px) {
    .desktop-header nav {
        max-width: calc(100% - 350px) !important;
    }
}

@media (max-width: 1200px) {
    .desktop-header nav {
        max-width: calc(100% - 300px) !important;
    }
}

/* Links de categoria - prevenir overflow */
.desktop-header .categoria-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 0 !important;
    max-width: fit-content !important;
}

/* Container de ações - não encolher mas respeitar limites */
.desktop-header .flex-shrink-0 {
    flex-shrink: 0 !important;
    min-width: fit-content !important;
    max-width: 100% !important;
}

/* Login page */
.login-container,
.login-card {
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
}

/* Index page - apenas prevenir overflow horizontal */
main,
section {
    max-width: 100%;
}

/* Garantir que elementos inline não causem overflow */
a,
button,
input,
textarea,
select {
    max-width: 100%;
    word-wrap: break-word;
}

/* ============================================
   CORREÇÃO DE SOMBRAS CORTADAS EM HOVER
   (DESATIVADO: Causa conflito com elementos fixed/sticky como navbar)
   ============================================ */

/* 
   ATENÇÃO: Não habilitar regras globais que alteram position/z-index no hover
   Isso quebra layouts fixos (como navbar) e causa "pulos" visuais.
   Se precisar corrigir sombra cortada, aplique position: relative apenas no container específico.
*/

/* 
*:hover[class*="shadow"],
*:hover[class*="shadow-sm"],
*:hover[class*="shadow-md"],
*:hover[class*="shadow-lg"],
*:hover[class*="shadow-xl"],
.hover\:shadow-sm:hover,
.hover\:shadow-md:hover,
.hover\:shadow-lg:hover,
.hover\:shadow-xl:hover {
    position: relative !important;
    z-index: 10 !important;
}
*/

/* Containers específicos do Kanban que cortam sombras */
.kanban-column-content {
    padding: 4px 2px;
    margin: -4px -2px;
}

/* Outros containers com overflow que podem ter cards com hover */
.overflow-y-auto:has(.empresa-card),
.overflow-y-auto:has(.contato-card),
.overflow-y-auto:has(.negocio-card),
.overflow-y-auto:has(.nota-item),
.overflow-y-auto:has(.acao-card),
.overflow-y-scroll:has(.empresa-card),
.overflow-y-scroll:has(.contato-card),
.overflow-y-scroll:has(.negocio-card) {
    padding: 4px 2px;
    margin: -4px -2px;
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */

@media (max-width: 768px) {
    html {
        overflow: hidden !important;
        height: 100%;
    }
    
    body {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        width: 100% !important;
        min-height: 100vh;
        height: 100vh;
        margin: 0 !important;
        padding: 0 !important;
    }
}