/*
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║                     CastraPET - Sistema de Controle                        ║
 * ║                         Media Queries Globais                              ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 * 
 * Breakpoints e ajustes responsivos para todo o sistema.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKPOINTS DE REFERÊNCIA
   ═══════════════════════════════════════════════════════════════════════════
   
   xs: 0px      - Celulares pequenos
   sm: 576px    - Celulares grandes
   md: 768px    - Tablets portrait
   lg: 1024px   - Tablets landscape / Laptops pequenos
   xl: 1280px   - Desktops
   2xl: 1536px  - Monitores grandes
   
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRA LARGE SCREENS (1536px+)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1536px) {
    .container-2xl {
        max-width: 1400px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LARGE SCREENS - DESKTOPS (1280px - 1535px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1535px) {
    :root {
        --content-max-width: 1200px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEDIUM LARGE - LAPTOPS (1024px - 1279px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
    :root {
        --sidebar-width: 260px;
        --spacing-lg: 20px;
        --spacing-xl: 28px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLETS LANDSCAPE (768px - 1023px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    :root {
        --navbar-height: 60px;
    }

    /* Sidebar esconde e vira overlay */
    .sidebar {
        position: fixed;
        left: -280px;
        z-index: var(--z-fixed);
        transition: left var(--transition-normal);
    }

    .sidebar.open {
        left: 0;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--bg-overlay);
        z-index: calc(var(--z-fixed) - 1);
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Ajusta conteúdo principal */
    .main-content {
        margin-left: 0 !important;
    }

    /* Navbar ocupa toda a largura no mobile */
    .navbar {
        left: 0;
    }

    /* Mostra botão de menu hamburger */
    .menu-toggle {
        display: flex !important;
    }

    /* Grid de cards responsivo */
    .grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLETS PORTRAIT (576px - 767px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    :root {
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
    }

    /* Tipografia menor */
    h1,
    .page-title {
        font-size: var(--font-size-xl);
    }

    h2 {
        font-size: var(--font-size-lg);
    }

    /* Cards em coluna única */
    .grid-cards {
        grid-template-columns: 1fr;
    }

    /* Tabelas com scroll horizontal */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 600px;
    }

    /* Formulários em coluna única */
    .form-row {
        flex-direction: column;
    }

    .form-row>.form-group {
        width: 100%;
    }

    /* Botões ocupam largura total */
    .btn-group-responsive {
        flex-direction: column;
        width: 100%;
    }

    .btn-group-responsive .btn {
        width: 100%;
    }

    /* Modais full screen em mobile */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .modal-content {
        border-radius: 0;
        height: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE (Até 575px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    :root {
        --spacing-sm: 6px;
        --spacing-md: 10px;
        --spacing-lg: 14px;
        --navbar-height: 56px;
    }

    html {
        font-size: 14px;
    }

    /* Padding do conteúdo reduzido */
    .main-content {
        padding: var(--spacing-sm);
        padding-top: calc(var(--navbar-height) + var(--spacing-sm));
    }

    /* Page header compacto */
    .page-header {
        margin-bottom: var(--spacing-md);
    }

    /* Cards menores */
    .card {
        padding: var(--spacing-md);
    }

    /* Inputs maiores para toque */
    input,
    select,
    textarea {
        min-height: 48px;
        font-size: 16px;
        /* Previne zoom no iOS */
    }

    /* Botões maiores */
    .btn {
        min-height: 48px;
        padding: 12px 20px;
    }

    /* Esconde texto de breadcrumb, mostra só ícones */
    .breadcrumb-text {
        display: none;
    }

    /* Ações de tabela empilhadas */
    .table-actions {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITÁRIOS RESPONSIVOS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Esconder em breakpoints específicos */
@media (max-width: 1023px) {
    .hide-lg {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hide-md {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .hide-sm {
        display: none !important;
    }
}

/* Mostrar apenas em breakpoints específicos */
@media (min-width: 1024px) {
    .show-lg-only {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .show-md-only {
        display: block !important;
    }
}

@media (min-width: 576px) {
    .show-sm-only {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {

    /* Esconde elementos de navegação */
    .sidebar,
    .navbar,
    .btn,
    .no-print {
        display: none !important;
    }

    /* Remove backgrounds escuros */
    body {
        background: white !important;
        color: black !important;
    }

    /* Conteúdo ocupa toda a largura */
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Cards sem sombra */
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        background: white !important;
    }

    /* Links mostram URL */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Quebra de página */
    .page-break {
        page-break-before: always;
    }
}