/* ============================================
   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);
    }

    /* 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;
    }

    /* Títulos */
    .rz-text-h4 {
        font-size: 1.5rem !important;
    }

    .rz-text-h5 {
        font-size: 1.3rem !important;
    }

    .rz-text-h6 {
        font-size: 1.1rem !important;
    }
}

/* ============================================
   TELAS PEQUENAS (até 1024px)
   ============================================ */
@media (max-width: 1024px) {
    body {
        font-size: var(--font-size-sm);
    }

    /* 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: 18px !important;
    }

    /* Tabs */
    .rz-tabview-nav li {
        padding: 6px 10px !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.2rem !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;
}