@tailwind base;
@tailwind components;
@tailwind utilities;

/* Cores customizadas das loterias */
:root {
    --lotofacil-color: #932B8C;
    --lotofacil-light: #f3e5f1;
    --quina-color: #260485;
    --quina-light: #e8e5f5;
    --maismilionaria-color: #2C1966;
    --maismilionaria-light: #e9e5f3;
}

/* Classes customizadas para Lotofácil */
.bg-lotofacil {
    background-color: var(--lotofacil-color);
}

.bg-lotofacil-light {
    background-color: var(--lotofacil-light);
}

.text-lotofacil {
    color: var(--lotofacil-color);
}

.border-lotofacil {
    border-color: var(--lotofacil-color);
}

.hover\:bg-lotofacil-light:hover {
    background-color: var(--lotofacil-light);
}

/* Classes customizadas para Quina */
.bg-quina {
    background-color: var(--quina-color);
}

.bg-quina-light {
    background-color: var(--quina-light);
}

.text-quina {
    color: var(--quina-color);
}

.border-quina {
    border-color: var(--quina-color);
}

.hover\:bg-quina-light:hover {
    background-color: var(--quina-light);
}

/* Classes customizadas para +Milionária */
.bg-maismilionaria {
    background-color: var(--maismilionaria-color);
}

.bg-maismilionaria-light {
    background-color: var(--maismilionaria-light);
}

.text-maismilionaria {
    color: var(--maismilionaria-color);
}

.border-maismilionaria {
    border-color: var(--maismilionaria-color);
}

.hover\:bg-maismilionaria-light:hover {
    background-color: var(--maismilionaria-light);
}

/* Filtros de cor para os ícones do menu */
.icone-menu {
    transition: filter 0.2s ease;
}

/* Verde para Mega-Sena */
#menuMegaSena.text-gray-700 .icone-menu {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(94%) contrast(101%);
}

/* Roxo Lotofácil (#932B8C) */
#menuLotofacil.text-gray-700 .icone-menu {
    filter: brightness(0) saturate(100%) invert(29%) sepia(82%) saturate(2419%) hue-rotate(296deg) brightness(82%) contrast(88%);
}

/* Azul escuro Quina (#260485) */
#menuQuina.text-gray-700 .icone-menu {
    filter: brightness(0) saturate(100%) invert(9%) sepia(91%) saturate(7498%) hue-rotate(252deg) brightness(94%) contrast(123%);
}

/* Laranja Lotomania */
#menuLotomania.text-gray-700 .icone-menu {
    filter: brightness(0) saturate(100%) invert(60%) sepia(98%) saturate(1789%) hue-rotate(359deg) brightness(101%) contrast(101%);
}

/* Roxo escuro +Milionária (#2C1966) */
#menuMaisMilionaria.text-gray-700 .icone-menu {
    filter: brightness(0) saturate(100%) invert(11%) sepia(73%) saturate(3929%) hue-rotate(259deg) brightness(86%) contrast(92%);
}

/* Cinza para ícones inativos */
.menu-link.text-gray-600 .icone-menu {
    filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.toggle-checkbox:checked {
    right: 0;
    border-color: #10B981;
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #10B981;
}

.toggle-label {
    transition: background-color 0.2s ease;
}

.numero-sorteado input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    text-align: center;
    font-weight: bold;
    outline: none;
}

.numero-sorteado input:focus {
    background-color: #E1F9EE;
}

.numero-sorteado input:disabled {
    background: transparent;
    cursor: not-allowed;
}


/* Scrollbar customizado sempre visível */
.scroll-hover::-webkit-scrollbar {
    width: 6px;
}

.scroll-hover::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    margin: 4px 0;
}

.scroll-hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

.scroll-hover::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
}

/* Adiciona espaçamento à direita para afastar o scroll do conteúdo */
.scroll-hover {
    padding-right: 8px;
}

/* Estilos para impressão */
@media print {
    body * {
        visibility: hidden;
    }
    
    #modalImprimirCartoes,
    #modalImprimirCartoes * {
        visibility: visible;
    }
    
    #modalImprimirCartoes {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: white;
    }
    
    #modalImprimirCartoes .flex.justify-between.items-center.p-6,
    #modalImprimirCartoes .flex.justify-between.items-center.p-6.border-t,
    #fecharModalImprimir {
        display: none !important;
    }
    
    #cartoesParaImprimir {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }
    
    .bg-white.border-2 {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}