/**
 * Breakpoints SCSS compartilhados (RESP-007 / Fase 5.3).
 * Ponto único de verdade para media queries nos layouts.
 * Alinhado a src/constants/breakpoints.ts (useIsMobile, useMediaQuery, etc.).
 *
 * Uso:
 *   @use '@/styles/breakpoints' as *;
 *   @include max-mobile { ... }
 *
 * Valores:
 * - 992px ($bp-sidebar-desktop): sidebar principal como coluna (não drawer).
 * - 991.98px ($bp-sidebar-desktop-max / $bp-layout-sidebar): drawer + layout filtros 1 coluna.
 * - 768px ($bp-mobile): conteúdo em coluna única; referência "mobile" em layouts.
 * - 430px ($bp-small-mobile): mobile pequeno (320–430px).
 * - 320px ($bp-min-viewport): viewport mínimo de teste (RESP-020).
 * - 576px ($bp-mobile-sm-max): header compacto Ant Design (575.98px).
 * - 769–1024px: tablet; ≥ 1025px: desktop (breakpoints.ts).
 */

$bp-min-viewport: 320px;
$bp-small-mobile: 430px;
$bp-mobile: 768px;
$bp-mobile-sm-max: 575.98px;
$bp-tablet-min: 769px;
$bp-tablet-max: 1024px;
$bp-desktop-min: 1025px;
$bp-sidebar-desktop: 992px;
$bp-sidebar-desktop-max: 991.98px;
/** Unificado com sidebar principal (RESP-008): layout com filtros empilha em 992px. */
$bp-layout-sidebar: 991.98px;
/** Ant Design Grid `xl` — dashboards e métricas em linha. */
$bp-ant-xl: 1200px;

@mixin max-width($width) {
    @media (max-width: $width) {
        @content;
    }
}

@mixin min-width($width) {
    @media (min-width: $width) {
        @content;
    }
}

@mixin max-min-viewport {
    @media (max-width: $bp-min-viewport) {
        @content;
    }
}

@mixin max-small-mobile {
    @media (max-width: $bp-small-mobile) {
        @content;
    }
}

@mixin max-mobile {
    @media (max-width: $bp-mobile) {
        @content;
    }
}

@mixin max-mobile-sm {
    @media (max-width: $bp-mobile-sm-max) {
        @content;
    }
}

@mixin max-sidebar-drawer {
    @media (max-width: $bp-sidebar-desktop-max) {
        @content;
    }
}

@mixin max-layout-sidebar {
    @media (max-width: $bp-layout-sidebar) {
        @content;
    }
}

@mixin min-sidebar-desktop {
    @media (min-width: $bp-sidebar-desktop) {
        @content;
    }
}

@mixin tablet-only {
    @media (min-width: $bp-tablet-min) and (max-width: $bp-tablet-max) {
        @content;
    }
}

@mixin min-tablet {
    @media (min-width: $bp-tablet-min) {
        @content;
    }
}

@mixin min-desktop {
    @media (min-width: $bp-desktop-min) {
        @content;
    }
}

@mixin min-ant-xl {
    @media (min-width: $bp-ant-xl) {
        @content;
    }
}

/** Evita que o conteúdo fique atrás da `MobilePageActionBar` fixa no rodapé. */
@mixin mobile-page-action-bar-content-inset {
    padding-bottom: var(--mobile-bottom-bar-clearance, max(72px, calc(60px + env(safe-area-inset-bottom, 0px))));
}

/** Desloca FAB de criação acima da barra fixa mobile. */
@mixin mobile-page-action-bar-fab-inset {
    inset-block-end: var(--mobile-fab-clearance, max(88px, calc(76px + env(safe-area-inset-bottom, 0px)))) !important;
}

/** Clearance só da tab bar do projeto (sem action bar). */
@mixin mobile-tab-bar-content-inset {
    padding-bottom: var(--mobile-tab-bar-clearance, max(56px, calc(48px + env(safe-area-inset-bottom, 0px))));
}