﻿/* ============================================
   REGRAS RESPONSIVAS GERAIS
   Arquivo: wwwroot/css-novo/responsive-base.css
   ============================================ */

/* ============================================
   TELAS ATÉ 1600px
   ============================================ */
@media (max-width: 1600px) {
    .main-layout,
    .page-container {
        padding: var(--spacing-lg) !important;
    }

    .rz-card {
        padding: var(--card-padding) !important;
    }
}

/* ============================================
   NOTEBOOKS (até 1366px)
   ============================================ */
@media (max-width: 1366px) {
    body {
        font-size: var(--font-size-md) !important;
    }

    /* Inputs */
    .rz-textbox,
    .rz-dropdown,
    .rz-numeric,
    .rz-datepicker {
        min-height: var(--input-min-height) !important;
        font-size: var(--font-size-md) !important;
    }

    .rz-textarea {
        font-size: var(--font-size-md) !important;
    }

    /* Botões */
    .rz-button {
        min-height: var(--button-min-height) !important;
        font-size: var(--font-size-md) !important;
        padding: 8px 16px !important;
    }

    /* Títulos */
    .rz-text-h4 {
        font-size: 1.6rem !important;
    }

    .rz-text-h5 {
        font-size: 1.4rem !important;
    }

    .rz-text-h6 {
        font-size: 1.2rem !important;
    }
}

/* ============================================
   TELAS PEQUENAS (até 1024px)
   ============================================ */
@media (max-width: 1024px) {
    body {
        font-size: var(--font-size-sm) !important;
    }

    /* Layouts com colunas */
    .rz-row {
        gap: var(--spacing-sm) !important;
    }

    /* Inputs menores */
    .rz-textbox,
    .rz-dropdown,
    .rz-numeric,
    .rz-datepicker {
        min-height: var(--input-min-height) !important;
        font-size: var(--font-size-sm) !important;
    }

    /* Botões compactos */
    .rz-button {
        min-height: var(--button-min-height) !important;
        font-size: var(--font-size-sm) !important;
        padding: 6px 14px !important;
    }

    /* Cards */
    .rz-card {
        padding: var(--card-padding) !important;
        margin: 8px 0 !important;
    }

    /* Ícones */
    .rz-icon {
        font-size: 20px !important;
    }

    /* Tabs */
    .rz-tabview-nav li {
        padding: 8px 12px !important;
    }

    .rz-tabview-title {
        font-size: var(--font-size-sm) !important;
    }
}

/* ============================================
   TELAS MUITO PEQUENAS (até 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Empilhar colunas (EXCETO em diálogos e grids) */
    .page-container .rz-row,
    .content-wrapper .rz-row {
        flex-direction: column !important;
    }

    .page-container .rz-column,
    .content-wrapper .rz-column {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Botões ocupam largura total */
    .rz-button {
        width: 100% !important;
        min-width: auto !important;
    }

    /* Títulos */
    .rz-text-h4 {
        font-size: 1.3rem !important;
    }

    .rz-text-h5 {
        font-size: 1.1rem !important;
    }

    .rz-text-h6 {
        font-size: 1rem !important;
    }
}

/* ============================================
   AJUSTE PARA CONTEÚDO DENTRO DE POPUPS COM SCALE
   ============================================ */

body.scale-active .rz-dialog .file-list,
body.scale-active .radzen-dialog .file-list {
    width: 100%;
}

body.scale-active .rz-dialog .file-item,
body.scale-active .radzen-dialog .file-item {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

body.scale-active .rz-dialog .file-info,
body.scale-active .radzen-dialog .file-info {
    flex: 2;
    min-width: 250px;
}

body.scale-active .rz-dialog .file-dropdown,
body.scale-active .radzen-dialog .file-dropdown {
    flex: 1;
    min-width: 200px;
}

body.scale-active .rz-dialog .upload-area,
body.scale-active .radzen-dialog .upload-area {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* ============================================
   FONTES MAIORES EM POPUPS
   ============================================ */
.rz-dialog-content,
.mud-dialog-content {
    font-size: var(--font-size-md) !important;
    line-height: 1.6 !important;
}

    .rz-dialog-content .rz-text-body1,
    .rz-dialog-content .rz-text-body2,
    .rz-dialog-content p,
    .rz-dialog-content span:not(.rz-icon) {
        font-size: var(--font-size-md) !important;
    }

    .rz-dialog-content .rz-text-subtitle1,
    .rz-dialog-content .rz-text-subtitle2 {
        font-size: var(--font-size-lg) !important;
    }

    /* Labels dentro de popups */
    .rz-dialog-content label,
    .rz-dialog-content .rz-label {
        font-size: var(--font-size-sm) !important;
        font-weight: 500 !important;
    }

    /* Inputs dentro de popups */
    .rz-dialog-content .rz-textbox,
    .rz-dialog-content .rz-dropdown,
    .rz-dialog-content .rz-numeric,
    .rz-dialog-content .rz-datepicker {
        font-size: var(--font-size-sm) !important;
        min-height: var(--input-min-height) !important;
    }

/* Botões dentro de popups */
.rz-dialog-footer .rz-button {
    font-size: var(--font-size-sm) !important;
    min-height: var(--button-min-height) !important;
    padding: 8px 20px !important;
}

/* ============================================
   AJUSTE DE GRIDS - SEM SCROLL
   ============================================ */

/* Força todos os grids a ocuparem 100% sem scroll */
.rz-grid-container,
.rz-data-grid-container,
.rz-datagrid-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Ações em grid - mantém inline */
.grid-acoes-inline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

/* Texto em grids - quebra se necessário */
.grid-texto {
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}