/*
 * css/core/utilities.css
 * [VERSÃO 7.2 - PURE UTILS - ENQUADRAMENTO BLINDADO]
 * - Expansão de utilitários Flexbox, Espaçamento, Texto e Visibilidade.
 * - Adição de classes responsivas para controle granular.
 * - [ADD] Classes para CSS Grid (`grid-2`).
 * - [ADD] Classes de texto (`text-xl`, `tracking-wide`).
 */

/* BOX SIZING GLOBAL (Melhoria de Desenvolvimento) */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* 1. DISPLAY & VISIBILITY */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flexbox utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-center { align-self: center !important; }
.align-self-end { align-self: flex-end !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
.flex-grow-1 { flex-grow: 1 !important; }

/* Visibilidade responsiva */
.hide-mobile { display: none !important; }


/* 2. TEXTO & COR */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-success { color: var(--ok) !important; }
.text-danger { color: var(--err) !important; }
.text-warning { color: var(--warn) !important; }
.text-muted { color: var(--txt-500) !important; }
.text-white { color: var(--txt-100) !important; } /* Usando variável para branco */
.text-primary { color: var(--bee-primary) !important; } /* Cor branding */
.text-honey { color: var(--bee-honey) !important; } /* Cor branding */

/* Font Weight & Size */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.small { font-size: 0.85rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.5rem !important; } /* Adicionado para textos maiores como códigos */

/* Espaçamento entre letras */
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0em !important; }
.tracking-wide { letter-spacing: 0.025em !important; } /* Adicionado para códigos de verificação */


/* 3. TAMANHO */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.w-50 { width: 50% !important; } /* Adicionado para botões lado a lado */
.max-w-xs { max-width: 20rem !important; /* 320px */ }
.max-w-sm { max-width: 24rem !important; /* 384px */ }
.max-w-md { max-width: 28rem !important; /* 448px */ }


/* 4. ESPAÇAMENTO (Margin & Padding) */
/* Margins */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0, .mx-0 { margin-left: 0 !important; } /* mx aplica a left e right */
.mr-0, .mx-0 { margin-right: 0 !important; }

.m-auto { margin: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.mb-1 { margin-bottom: 0.25rem !important; } /* 4px */
.mb-2 { margin-bottom: 0.5rem !important; } /* 8px */
.mb-3 { margin-bottom: 1rem !important; } /* 16px */
.mb-4 { margin-bottom: 1.5rem !important; } /* 24px */
.mb-5 { margin-bottom: 3rem !important; } /* 48px */

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.ml-1 { margin-left: 0.25rem !important; }
.mr-1 { margin-right: 0.25rem !important; }

/* Paddings */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }


/* 5. GRID (CSS Grid & Flexbox) - MOBILE FIRST */
.row { 
    display: flex; 
    flex-wrap: wrap; 
    margin: -0.5rem; /* Negativo para compensar o padding das colunas */
}
.col-auto {
    padding: 0.5rem;
    flex: 0 0 auto; /* Não cresce nem encolhe, largura auto */
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { 
    padding: 0.5rem; 
    width: 100%; /* Padrão mobile: ocupa 100% da largura */
    box-sizing: border-box; 
}
/* Força 100% da largura para mobile explicitamente */
.col-12, .col-full { width: 100%; }

/* Nova classe grid-2 (usando CSS Grid para formulários) */
.grid-2 { 
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 1.5rem; /* Espaçamento entre os itens do grid */
}


/* Breakpoint para Tablet/Pequeno Desktop (ex: 768px) */
@media (min-width: 768px) {
    .md-d-flex { display: flex !important; }
    .md-flex-row { flex-direction: row !important; }
    .md-flex-column { flex-direction: column !important; }
    
    .md-col-1 { width: 8.33333%; }
    .md-col-2 { width: 16.66667%; }
    .md-col-3 { width: 25%; }
    .md-col-4 { width: 33.33333%; }
    .md-col-5 { width: 41.66667%; }
    .md-col-6 { width: 50%; }
    .md-col-7 { width: 58.33333%; }
    .md-col-8 { width: 66.66667%; }
    .md-col-9 { width: 75%; }
    .md-col-10 { width: 83.33333%; }
    .md-col-11 { width: 91.66667%; }
    .md-col-12 { width: 100%; }

    /* Ajusta grid-2 para 2 colunas em telas maiores */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr); 
    }

    /* Espaçamento responsivo a partir de MD */
    .md-mb-1 { margin-bottom: 0.25rem !important; }
    .md-mb-2 { margin-bottom: 0.5rem !important; }
    .md-mb-3 { margin-bottom: 1rem !important; }
    .md-mb-4 { margin-bottom: 1.5rem !important; }
    .md-mb-5 { margin-bottom: 3rem !important; }

    .md-mt-1 { margin-top: 0.25rem !important; }
    .md-mt-2 { margin-top: 0.5rem !important; }
    .md-mt-3 { margin-top: 1rem !important; }
    .md-mt-4 { margin-top: 1.5rem !important; }
    .md-mt-5 { margin-top: 3rem !important; }
    
    .md-p-1 { padding: 0.25rem !important; }
    .md-p-2 { padding: 0.5rem !important; }
    .md-p-3 { padding: 1rem !important; }
    .md-p-4 { padding: 1.5rem !important; }
    .md-p-5 { padding: 3rem !important; }

    .hide-desktop { display: none !important; } /* Esconde em desktop */
    .hide-mobile { display: block !important; } /* Mostra em desktop */
}


/* Breakpoint para Desktop (ex: 992px) */
@media (min-width: 992px) {
    .lg-d-flex { display: flex !important; }
    .lg-flex-row { flex-direction: row !important; }
    .lg-flex-column { flex-direction: column !important; }
    
    .lg-col-1 { width: 8.33333%; }
    .lg-col-2 { width: 16.66667%; }
    .lg-col-3 { width: 25%; }
    .lg-col-4 { width: 33.33333%; }
    .lg-col-5 { width: 41.66667%; }
    .lg-col-6 { width: 50%; }
    .lg-col-7 { width: 58.33333%; }
    .lg-col-8 { width: 66.66667%; }
    .lg-col-9 { width: 75%; }
    .lg-col-10 { width: 83.33333%; }
    .lg-col-11 { width: 91.66667%; }
    .lg-col-12 { width: 100%; }

    /* Espaçamento responsivo a partir de LG */
    .lg-mb-1 { margin-bottom: 0.25rem !important; }
    .lg-mb-2 { margin-bottom: 0.5rem !important; }
    .lg-mb-3 { margin-bottom: 1rem !important; }
    .lg-mb-4 { margin-bottom: 1.5rem !important; }
    .lg-mb-5 { margin-bottom: 3rem !important; }

    .lg-mt-1 { margin-top: 0.25rem !important; }
    .lg-mt-2 { margin-top: 0.5rem !important; }
    .lg-mt-3 { margin-top: 1rem !important; }
    .lg-mt-4 { margin-top: 1.5rem !important; }
    .lg-mt-5 { margin-top: 3rem !important; }
    
    .lg-p-1 { padding: 0.25rem !important; }
    .lg-p-2 { padding: 0.5rem !important; }
    .lg-p-3 { padding: 1rem !important; }
    .lg-p-4 { padding: 1.5rem !important; }
    .lg-p-5 { padding: 3rem !important; }

    .hide-desktop { display: none !important; } /* Garante que esconde elementos para desktop */
    .hide-mobile { display: block !important; } /* Garante que mostra elementos para desktop */
}


@media (max-width: 767px) { /* Breakpoint para esconder em mobile */
    .hide-desktop { display: block !important; } /* Mostra elementos apenas em mobile */
    .hide-mobile { display: none !important; } /* Esconde elementos em mobile */
}


/* 6. SPINNER (GENÉRICO) */
.spinner-border {
    display: inline-block; 
    width: 1.5rem; 
    height: 1.5rem;
    border: 0.2em solid currentColor; 
    border-right-color: transparent; /* Cria o efeito de rotação */
    border-radius: 50%; 
    animation: spinner-border .75s linear infinite;
}
.spinner-border-sm { 
    width: 1rem; 
    height: 1rem; 
    border-width: 0.15em; 
}
@keyframes spinner-border { 
    to { transform: rotate(360deg); } 
}

/* 7. DIVERSOS */
.overflow-hidden { overflow: hidden !important; }
.position-relative { position: relative !important; }
.cursor-pointer { cursor: pointer !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }

/* Estilos para o PWA Install Banner */
.pwa-install-banner {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%;
    background: var(--bg-dark); 
    border-top: 1px solid var(--bee-honey); 
    padding: 15px; 
    z-index: 9999; 
    display: flex; /* Alterado para flex para alinhar o conteúdo */
    flex-direction: column; 
    align-items: center; 
    box-shadow: 0 -5px 20px rgba(0,0,0,0.8);
    /* Removido o display:none daqui, agora controlado via JS */
}

.pwa-banner-content {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 10px;
}

.pwa-banner-logo {
    width: 40px; 
    height: 40px; 
    border-radius: 10px;
}

.pwa-banner-app-info {
    color: var(--txt-100); /* Cor de texto padrão */
    font-size: 0.9rem;
}

.pwa-banner-title {
    font-weight: 700;
    display: block;
}

.pwa-banner-subtitle {
    color: var(--txt-500);
    display: block;
}

.pwa-banner-actions {
    display: flex; 
    gap: 10px; 
    width: 100%;
}

/* =========================================
   UTILITY CLASSES (NOVAS DEFINIÇÕES CRÍTICAS)
   ========================================= */

/* Classe para esconder elementos (display: none !important) */
.d-none {
    display: none !important;
}

/* Spinner de Carregamento (inspirado em Bootstrap) */
.spinner-border {
    display: inline-block;
    width: 2rem; /* ou o tamanho que desejar */
    height: 2rem; /* ou o tamanho que desejar */
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* Classe para conteúdo que deve ser lido por leitores de tela mas escondido visualmente */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Outras classes utilitárias que podem ser úteis se ainda não existirem */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.text-center { text-align: center !important; }
.text-danger { color: var(--err) !important; } /* Cor para erros */
.text-success { color: var(--ok) !important; } /* Cor para sucesso */
.text-warning { color: var(--warn) !important; } /* Cor para avisos */
.text-info { color: var(--info) !important; } /* Cor para informações */
.text-muted { color: var(--txt-500) !important; }
.d-flex { display: flex !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.flex-column { flex-direction: column !important; }
/* ... (outras classes comuns como mb-X, mt-X, p-X, row, col-X) ... */