/* ========================================
   TABLET (max-width: 768px)
======================================== */
@media (max-width: 768px) {
    .app-container {
        padding: 2px;
    }

    .app-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .app-header h1 {
        font-size: 1.5rem;
    }

    .mode-toggle {
        width: 100%;
        justify-content: center;
    }

    .number-grid {
        gap: 6px;
    }

    .number-value {
        font-size: 1rem;
    }

    .weight-indicator {
        width: 1rem;
        height: 1rem;
        font-size: 0.6rem;
    }

    .action-buttons {
        flex-direction: column-reverse;
    }

    .action-buttons .btn {
        width: 100%;
    }

    .results-cards {
        grid-template-columns: 1fr;
    }

    .statistics-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .results-table {
        font-size: 0.85rem;
    }

    .results-table th,
    .results-table td {
        padding: 8px 4px;
    }

    .filter-grid {
        gap: 30px;
    }
}

/* ========================================
   MOBILE (max-width: 480px)
======================================== */
@media (max-width: 480px) {
    .app-header h1 {
        font-size: 1.3rem;
        display: none;
    }

    .mode-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
        display: flex;
        flex-direction: column;
    }

    .mode-btn .icon {
        width: 16px;
        height: 16px;
    }

    .card {
        padding: 2px;
        border-radius: 8px;
    }

    .number-grid {
        gap: 4px;
    }

    .number-value {
        font-size: 1.4rem;
    }

    .weight-indicator {
        width: 0.9rem;
        height: 0.9rem;
        font-size: 0.8rem;
        bottom: 2px;
        right: 2px;
    }

    .weight-legend {
        font-size: 0.75rem;
        gap: 8px;
    }

    .color-box {
        width: 16px;
        height: 16px;
    }

    .btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .results-header {
        flex-direction: column;
        align-items: stretch;
    }

    .results-controls {
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-save-generation .btn-save-text {
        display: none;
    }

    .btn-save-generation {
        padding: 8px 10px;
    }

    .statistics-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 8px;
    }

    .stat-value {
        font-size: 1.2rem;
    }

    .result-grid {
        gap: 3px;
    }

    .result-number-cell {
        font-size: 0.8rem;
    }

    .result-analysis {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .analysis-item {
        font-size: 0.75rem;
    }

    /* Tabela: compactar para mobile */
    .results-table table {
        min-width: unset;
    }

    /* Number badges compactos na tabela mobile */
    .cell-numbers {
        max-width: 145px;
        min-width: 125px;
        margin: 0 auto;
    }

    .cell-numbers .number-badge {
        padding: 2px 3px;
        margin: 1px;
        font-size: 0.9rem;
        min-width: 22px;
    }

    /* Ocultar colunas de filtro na tabela mobile */
    .results-table .cell-filter,
    .results-table .th-filter {
        display: none;
    }

    .pagination {
        gap: 4px;
    }

    .pagination-btn {
        min-width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .pagination-info {
        width: 100%;
        text-align: center;
        padding: 8px 0;
    }

    .contest-range {
        grid-template-columns: 1fr;
    }

    .scores-summary {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .score-item {
        padding: 0px;
    }

    .score-label {
        font-size: 0.75rem;
    }

    .score-value {
        font-size: 1rem;
    }

    .weight-selector {
        width: 90%;
        padding: 16px;
    }

    .weight-options {
        gap: 6px;
    }

    .weight-option {
        padding: 10px;
        font-size: 0.85rem;
    }

    .toast-container {
        right: 10px;
        left: 10px;
    }

    .toast {
        min-width: auto;
        width: 100%;
    }

    .score-filter-buttons {
        grid-template-columns: repeat(1, 1fr);
        gap: 2px;
    }

    .results-filters-panel {
        padding: 8px;
    }

    .filter-section {
        padding: 10px;
    }

    .filter-grid {
        gap: 20px;
    }

    .div-btn-todos-pontuados {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 10px;
        box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
        gap: 10px;
        background: #ffffff;
    }

    .scores-summary-content {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        gap: 5px;
        width: 100%;
        flex-wrap: nowrap;
        align-items: center;
    }

    .checker-mode-selector {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    #btnGenerate {
        padding: 10px 16px !important;
        font-size: 1rem !important;
    }

    .filter-management-modal .modal-content,
    .quick-presets-modal .modal-content {
        max-height: 85vh;
    }

    .number-grid-section.card {
        max-width: 420px;
        margin: 0px;
        margin-bottom: 30px;
        box-shadow: rgb(120 0 166 / 55%) 0px 25px 20px -20px;
        padding: 15px;
    }

    .loto-custom-page-wrapper {
        min-height: 100svh;
    }

    .modal-content.modal-compact {
        max-height: 80svh;
    }

    .requirements-box {
        display: none;
    }

    .warning-box {
        display: none;
    }
}

/* ========================================
   SMALL MOBILE (max-width: 400px)
   Otimizacoes para tabela compacta e geral
======================================== */
@media (max-width: 400px) {

    /* === TABELA COMPACTA === */
    .results-table {
        font-size: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .results-table table {
        width: 100%;
    }

    .results-table th {
        font-size: 0.85rem;
        padding: 6px 2px;
        white-space: nowrap;
    }

    .results-table th.sortable {
        padding-right: 12px;
    }

    .results-table th.sortable::after {
        right: 2px;
        font-size: 0.6rem;
    }

    .results-table td {
        padding: 4px 2px;
        font-size: 0.75rem;
        vertical-align: middle;
    }

    /* Checkbox compacto */
    .cell-checkbox {
        width: 15px;
        padding: 3px 1px !important;
    }

    .cell-checkbox input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }

    .th-checkbox {
        width: 24px;
        padding: 3px 1px !important;
    }

    /* Numero do palpite compacto */
    .cell-number {
        font-size: 0.7rem;
        width: 20px;
        padding: 3px 1px !important;
        text-align: center;
    }

    /* Numeros: grade compacta que se ajusta */
    .cell-numbers {
        flex-wrap: wrap;
        gap: 1px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    /* Pontuacoes compactas */
    .cell-score {
        font-size: 0.65rem;
        padding: 3px 1px !important;
        text-align: center;
        white-space: nowrap;
    }

    .cell-score-highlight {
        font-size: 0.7rem;
        padding: 3px 1px !important;
    }

    .cell-score-total {
        font-size: 0.7rem;
        padding: 3px 1px !important;
    }

    /* Score headers */
    .results-table th.score-header {
        font-size: 0.6rem;
        padding: 4px 1px;
    }

    /* Acoes: empilhar verticalmente */
    .cell-actions {
        flex-direction: column !important;
        gap: 2px !important;
        padding: 3px 1px !important;
        width: 28px;
    }

    .cell-actions .btn-icon {
        font-size: 0.65rem;
        padding: 3px;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* === TOOLBAR: icone-only em telas pequenas === */
    .conferidor-toolbar {
        padding: 6px;
        gap: 4px;
        flex-direction: row !important;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .conferidor-toolbar .btn {
        font-size: 0.85rem;
        padding: 8px 12px;
        gap: 2px;
        width: auto !important;
    }

    /* Esconder texto, manter apenas icone */
    .conferidor-toolbar .btn .btn-label {
        display: none;
    }

    .conferidor-toolbar .btn .selection-count {
        font-size: 0.7rem;
    }

    /* Botao configurar colunas: icone-only */
    .btn-table-settings .btn-label {
        display: none;
    }

    .btn-table-settings {
        padding: 6px 10px !important;
        min-width: unset;
    }

    /* Table controls compactos */
    .table-controls {
        flex-direction: row !important;
        align-items: center;
        gap: 6px;
        padding: 6px !important;
    }

    .table-controls .table-info {
        display: none;
    }

    .table-count {
        font-size: 0.75rem;
    }

    /* === PAGINACAO === */
    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
    }

    .pagination-btn {
        min-width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .items-per-page-selector {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .items-per-page-select {
        font-size: 0.8rem;
        padding: 4px;
    }

    .pagination-summary {
        font-size: 0.75rem;
    }

    /* === CARDS === */
    .conferidor-card-actions {
        padding: 8px !important;
    }

    .checkbox-label {
        font-size: 12px;
    }

    .result-card-header {
        padding: 8px;
    }

    .result-number {
        font-size: 0.85rem;
    }

    /* === BARRA DE GRUPO ABERTO === */
    .active-group-bar {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        font-size: 0.85rem;
    }

    /* === RESULTADOS: controles === */
    .results-controls {
        gap: 4px;
    }

    /* Exportar: icone-only */
    .btn-export .btn-label {
        display: none;
    }

    .btn-export {
        padding: 8px 10px !important;
    }

    .view-toggle {
        gap: 2px;
    }

    .display-toggles {
        gap: 4px;
    }

    .toggle-option span {
        font-size: 0.7rem;
    }
    
    .btn-label-control {
        display: none;
    }
}

/* ========================================
   EXTRA SMALL (max-width: 320px)
======================================== */
@media (max-width: 320px) {
    .number-value {
        font-size: 0.9rem;
    }

    .weight-indicator {
        width: 0.7rem;
        height: 0.7rem;
        font-size: 0.7rem;
        bottom: 2px;
        right: 2px;
    }

    .result-analysis {
        grid-template-columns: repeat(3, 1fr);
    }

    .scores-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-grid {
        gap: 20px;
    }

    .cell-actions {
        width: 26px;
    }

    .cell-actions .btn-icon {
        width: 20px;
        height: 20px;
        font-size: 0.6rem;
        padding: 2px;
    }

    .results-table th {
        font-size: 0.75rem;
        padding: 6px 1px;
    }

    .results-table td {
        padding: 4px 1px;
        font-size: 0.7rem;
    }
}