/**
 * Responsive Styles - Sistema de Inventário
 * Melhorias de responsividade para todos os dispositivos
 */

/* ============================================
   BREAKPOINTS
   ============================================
   sm: 640px
   md: 768px
   lg: 1024px
   xl: 1280px
   2xl: 1536px
   ============================================ */

/* ============================================
   SIDEBAR MOBILE
   ============================================ */

/* Sidebar como overlay em mobile */
@media (max-width: 767px) {
    #sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 9998 !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        display: flex !important;
    }
    
    #sidebar[data-visible="true"] {
        transform: translateX(0) !important;
    }
    
    #sidebar[data-hidden="true"] {
        transform: translateX(-100%) !important;
    }
    
    /* Container da sidebar em mobile */
    #sidebar > div {
        width: 100%;
        height: 100%;
    }
    
    /* Overlay escuro quando sidebar está aberta */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9997;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }
    
    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Botão hambúrguer sempre visível em mobile - z-index muito alto */
    #sidebar-show-button {
        display: flex !important;
        position: fixed !important;
        top: 0.75rem !important;
        left: 0.75rem !important;
        z-index: 10000 !important; /* Muito alto para ficar acima de tudo */
        width: 44px !important;
        height: 44px !important;
        background: white !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        pointer-events: auto !important;
    }
    
    .dark #sidebar-show-button {
        background: #1e293b !important;
        border-color: #334155 !important;
    }
}

/* ============================================
   HEADER MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Header mais compacto */
    header {
        padding: 0.75rem 1rem !important;
        height: auto !important;
        min-height: 56px;
    }
    
    /* Título do header menor */
    header h2 {
        font-size: 1.125rem !important;
        margin-left: 0.5rem !important;
    }
    
    /* Botões do header menores */
    #header-actions {
        gap: 0.5rem !important;
    }
    
    #header-actions a,
    #header-actions button {
        padding: 0.5rem !important;
        min-width: 40px;
        min-height: 40px;
    }
    
    /* Busca global oculta em mobile (ou versão compacta) */
    #global-search-container {
        display: none !important;
    }
    
    /* Notificações ajustadas */
    #notifications-container {
        position: relative;
    }
    
    /* Dropdown de notificações em tela cheia em mobile */
    #notifications-dropdown {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 56px) !important;
        border-radius: 0 !important;
    }
}

/* ============================================
   MODAIS MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Modal container - ajustes para mobile */
    .modal {
        padding: 0 !important;
        align-items: flex-start !important;
    }
    
    /* Container do modal - remove padding externo */
    .modal > div:first-child {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 100vh !important;
    }
    
    /* Modal panel - tela cheia em mobile */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        align-bottom: flex-start !important;
        transform: none !important;
    }
    
    /* Header do modal */
    .modal-header {
        padding: 1rem !important;
        border-bottom: 1px solid #e5e7eb;
        flex-shrink: 0;
        min-height: 60px;
    }
    
    .modal-header h3 {
        font-size: 1.125rem !important;
        line-height: 1.5rem !important;
    }
    
    /* Body do modal - área scrollável */
    .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 1rem !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0; /* Permite que o flex funcione corretamente */
    }
    
    /* Footer do modal */
    .modal-footer {
        padding: 1rem !important;
        border-top: 1px solid #e5e7eb;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .modal-footer button,
    .modal-footer .btn {
        width: 100% !important;
        flex: 1;
        min-height: 44px;
        font-size: 0.9375rem;
    }
    
    /* Botão de fechar modal mais acessível */
    .modal-close {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex-shrink: 0;
    }
    
    /* Garantir que inputs e selects não ultrapassem a largura */
    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Grid e flex dentro do modal */
    .modal-body .grid,
    #quick-create-content .grid {
        grid-template-columns: 1fr !important;
    }
    
    .modal-body .grid-cols-2,
    .modal-body .grid-cols-3,
    .modal-body .grid-cols-4,
    #quick-create-content .grid-cols-2,
    #quick-create-content .grid-cols-3,
    #quick-create-content .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    .modal-body .flex {
        flex-wrap: wrap;
    }
    
    /* Espaçamento reduzido em mobile */
    .modal-body .space-y-4 > * + * {
        margin-top: 1rem !important;
    }
    
    .modal-body .gap-4 {
        gap: 1rem !important;
    }
    
    /* Evitar overflow horizontal */
    .modal-body * {
        max-width: 100%;
        word-wrap: break-word;
    }
    
    /* Modais customizados (user-modal, etc) */
    #user-modal,
    [id*="modal"] {
        padding: 0 !important;
    }
    
    #user-modal > div,
    [id*="modal"] > div:not(.modal-overlay) {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Formulários dentro de modais */
    .modal-body form,
    #user-modal form {
        padding: 1rem !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
    }
    
    /* Inputs e selects em modais mobile */
    .modal-body input,
    .modal-body select,
    .modal-body textarea,
    #user-modal input,
    #user-modal select,
    #user-modal textarea {
        font-size: 16px !important; /* Evita zoom no iOS */
        padding: 0.75rem !important;
    }
    
    /* Modal de confirmação */
    #confirm-modal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    #confirm-modal .modal-header {
        padding: 1.25rem 1rem !important;
    }
    
    #confirm-modal .modal-footer {
        flex-direction: column !important;
        gap: 0.75rem;
    }
    
    #confirm-modal .modal-footer button,
    #confirm-modal .modal-footer form {
        width: 100% !important;
        margin: 0 !important;
    }
    
    #confirm-modal .modal-footer form button {
        width: 100% !important;
    }
    
    /* Modal quick-create */
    #quick-create-modal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    #quick-create-modal .modal-body {
        padding-bottom: 0 !important;
    }
    
    #quick-create-modal .modal-footer {
        padding-top: 1rem !important;
        margin-top: 1rem !important;
    }
    
    #quick-create-modal form {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    
    #quick-create-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   TABELAS MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Container de tabela com scroll horizontal */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .table-container table {
        min-width: 600px;
    }
    
    /* Cards em vez de tabelas */
    .table-mobile-cards {
        display: block;
    }
    
    .table-mobile-cards thead {
        display: none;
    }
    
    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards td {
        display: block;
        width: 100%;
    }
    
    .table-mobile-cards tr {
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 1rem;
        background: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .dark .table-mobile-cards tr {
        background: #1e293b;
        border-color: #334155;
    }
    
    .table-mobile-cards td {
        border: none;
        padding: 0.5rem 0;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        margin-right: 1rem;
        flex-shrink: 0;
    }
    
    .dark .table-mobile-cards td::before {
        color: #94a3b8;
    }
    
    .table-mobile-cards td:last-child {
        border-bottom: none;
    }
    
    /* Ações em mobile */
    .table-mobile-cards .actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #e5e7eb;
    }
    
    .dark .table-mobile-cards .actions {
        border-top-color: #334155;
    }
    
    .table-mobile-cards .actions button,
    .table-mobile-cards .actions a {
        flex: 1;
        min-height: 44px;
    }
}

/* ============================================
   FORMULÁRIOS MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Campos de formulário em tela cheia */
    form input[type="text"],
    form input[type="email"],
    form input[type="number"],
    form input[type="date"],
    form input[type="password"],
    form select,
    form textarea {
        width: 100% !important;
        font-size: 16px !important; /* Previne zoom no iOS */
        padding: 0.75rem !important;
        min-height: 44px;
    }
    
    /* Labels mais espaçados */
    form label {
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    /* Grupos de campos lado a lado em coluna */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Botões de formulário em tela cheia */
    form button[type="submit"],
    form .btn-primary {
        width: 100%;
        min-height: 44px;
        margin-top: 1rem;
    }
    
    /* Checkboxes e radios maiores */
    form input[type="checkbox"],
    form input[type="radio"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
    }
}

/* ============================================
   CARDS E CONTAINERS MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Cards sem margem lateral em mobile */
    .card,
    .bg-white {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    /* Padding interno reduzido */
    .card-body,
    .p-6 {
        padding: 1rem !important;
    }
    
    /* Grid de cards em coluna única */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}

/* ============================================
   BOTÕES E AÇÕES MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Touch targets maiores */
    button,
    .btn,
    a[role="button"],
    .clickable {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Botões de ação em linha */
    .flex.gap-2,
    .flex.gap-4 {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    
    /* Botões de ação em tela cheia quando necessário */
    .action-buttons-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .action-buttons-mobile button,
    .action-buttons-mobile a {
        width: 100%;
    }
}

/* ============================================
   TOAST NOTIFICATIONS MOBILE
   ============================================ */

@media (max-width: 767px) {
    #toast-container {
        top: 1rem !important;
        right: 1rem !important;
        left: 1rem !important;
        width: auto !important;
    }
    
    .toast {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   FILTROS E BUSCA MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Filtros em coluna */
    .filters,
    .filter-container {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .filters select,
    .filters input {
        width: 100%;
    }
    
    /* Barra de busca compacta */
    .search-bar {
        width: 100%;
        margin-bottom: 1rem;
    }
}

/* ============================================
   PAGINAÇÃO MOBILE
   ============================================ */

@media (max-width: 767px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    .pagination a,
    .pagination span {
        min-width: 40px;
        min-height: 40px;
        padding: 0.5rem;
    }
}

/* ============================================
   DASHBOARD MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Cards de estatísticas em coluna */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    /* Gráficos responsivos */
    .chart-container {
        width: 100%;
        height: 250px;
    }
}

/* ============================================
   UTILITÁRIOS MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Esconder elementos não essenciais */
    .hidden-mobile {
        display: none !important;
    }
    
    /* Mostrar apenas em mobile */
    .show-mobile {
        display: block !important;
    }
    
    /* Texto menor em mobile */
    .text-sm-mobile {
        font-size: 0.875rem;
    }
    
    /* Espaçamento reduzido */
    .space-y-mobile {
        gap: 0.75rem;
    }
}

/* ============================================
   TABLETS (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Sidebar colapsada por padrão em tablets */
    #sidebar {
        width: 64px;
    }
    
    /* Conteúdo principal com mais espaço */
    .main-content {
        margin-left: 64px;
    }
    
    /* Grid de 2 colunas em tablets */
    .grid-tablet-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MELHORIAS DE TOUCH
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Remover hover effects em touch devices */
    *:hover {
        transition: none;
    }
    
    /* Aumentar área de toque */
    a, button {
        padding: 0.75rem;
    }
    
    /* Scroll suave */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   ORIENTAÇÃO LANDSCAPE MOBILE
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
    /* Header mais compacto em landscape */
    header {
        height: 48px !important;
        min-height: 48px !important;
    }
    
    /* Modal mais baixo em landscape */
    .modal-content {
        max-height: 95vh !important;
        height: 95vh !important;
    }
    
    .modal-body {
        max-height: calc(95vh - 120px) !important;
    }
}

/* ============================================
   DARK MODE MOBILE
   ============================================ */

@media (max-width: 767px) {
    .dark #sidebar {
        background: #0f172a;
    }
    
    .dark .sidebar-overlay {
        background: rgba(0, 0, 0, 0.7);
    }
    
    .dark #sidebar-show-button {
        background: #1e293b;
        color: #f1f5f9;
    }
    
    .dark .table-mobile-cards tr {
        background: #1e293b;
        border-color: #334155;
    }
}

/* ============================================
   BOTÃO HAMBÚRGUER - SEMPRE FUNCIONAL
   ============================================ */

/* Garantir que o botão esteja sempre visível e clicável */
#sidebar-show-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10000 !important; /* Muito alto para ficar acima de tudo */
    position: fixed !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#sidebar-show-button:hover {
    opacity: 0.9;
}

#sidebar-show-button:active {
    transform: scale(0.95);
}

#sidebar-show-button * {
    pointer-events: none;
}

/* ============================================
   MELHORIAS GERAIS DE RESPONSIVIDADE
   ============================================ */

/* Prevenir overflow horizontal */
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }
    
    * {
        max-width: 100%;
    }
    
    /* Imagens responsivas */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Vídeos responsivos */
    video {
        max-width: 100%;
        height: auto;
    }
    
    /* Iframes responsivos */
    iframe {
        max-width: 100%;
    }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 375px) {
    #sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .modal-content {
        padding: 0 !important;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0.75rem !important;
    }
    
    .modal-header h3 {
        font-size: 1rem !important;
    }
    
    button, .btn {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }
    
    header h2 {
        font-size: 1rem !important;
    }
}