/* ==========================================================================
   Estilos Gerais e Responsivos - Gestão de Avaliação de Desempenho 360º
   ========================================================================== */

:root {
    --trf-primary: #2563eb;
    --trf-primary-hover: #1d4ed8;
    --trf-success: #10b981;
    --trf-warning: #f59e0b;
    --trf-danger: #ef4444;
    --trf-dark: #0f172a;
    --trf-slate-800: #1e293b;
    --trf-slate-600: #475569;
    --trf-slate-400: #94a3b8;
    --trf-bg-light: #f8fafc;
    --trf-border: #cbd5e1;
    --trf-radius: 8px;
}

html, body {
    max-width: 100% !important;
}

.trf-eval-wrapper, 
.trf-frontend-dashboard, 
.trf-eval-online-form {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 960px;
    margin: 20px auto;
}

.trf-eval-wrapper *, 
.trf-frontend-dashboard *, 
.trf-eval-online-form * {
    box-sizing: border-box !important;
}

/* Radio buttons estilizados para toque de dedo */
.trf-eval-online-form label input[type="radio"],
.trf-eval-wrapper label input[type="radio"] {
    accent-color: var(--trf-primary);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.trf-eval-online-form label,
.trf-eval-wrapper label {
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Badges de Status */
.trf-badge-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.trf-badge-concluido {
    background-color: #d1fae5;
    color: #065f46;
}

.trf-badge-pendente {
    background-color: #fef3c7;
    color: #92400e;
}

/* ==========================================================================
   MEDIA QUERIES - RESPONSIVIDADE MOBILE FORÇADA (QUALQUER DISPOSITIVO MÓVEL)
   ========================================================================== */

@media screen and (max-width: 900px) {
    
    /* Resetar contêineres e wrappers de qualquer Tema do WordPress */
    body, html,
    #page, #main, #content, #primary,
    .site-content, .entry-content, .content-area, .site-main,
    .page, .post, .ast-container, .et_pb_section, .elementor-section,
    .wp-site-blocks, .wc-block-components-sidebar-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .trf-eval-wrapper, 
    .trf-frontend-dashboard, 
    .trf-eval-online-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px 0 !important;
        padding: 8px !important;
    }

    /* Forçar Banners e Cabeçalhos em Coluna */
    .trf-mobile-flex-col,
    .trf-frontend-dashboard > div:first-child,
    .trf-eval-online-form > div:first-child,
    .trf-eval-wrapper > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
        text-align: center !important;
    }

    .trf-mobile-flex-col a,
    .trf-mobile-flex-col button,
    .trf-frontend-dashboard > div:first-child a,
    .trf-eval-online-form > div:first-child a,
    .trf-eval-wrapper > div:first-child a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
    }

    /* Formulários e Seletores */
    #trf-form-avaliacao-online,
    #trf-form-avaliacao {
        padding: 14px 10px !important;
    }

    #trf-select-colaborador,
    #btn-iniciar-nova-eval {
        width: 100% !important;
        min-width: 100% !important;
        font-size: 15px !important;
    }

    /* Inputs de Cadastro e PDI */
    #box-cad-colab > div:first-child,
    div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Botões de notas 1 a 5 expandidos no Celular */
    div[style*="display: flex; gap: 12px; align-items: center;"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .trf-radio-option-label,
    div[style*="display: flex; gap: 12px; align-items: center;"] label {
        flex: 1 1 18% !important;
        min-width: 44px !important;
        min-height: 44px !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 4px !important;
        font-size: 14px !important;
    }

    /* Tabela Responsiva com Rolagem Suave */
    .trf-table-responsive,
    .trf-frontend-dashboard table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Botões do Rodapé */
    div[style*="justify-content: flex-end; padding-top"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    div[style*="justify-content: flex-end; padding-top"] button,
    div[style*="justify-content: flex-end; padding-top"] a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    input[type="text"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
        width: 100% !important;
    }
}