/* Estilos customizados para o Sistema PDV */

/* Animações suaves - REMOVIDO para evitar conflitos com modais */

/* Estilo para botões de ação rápida */
.action-btn {
    @apply transform hover:scale-105 active:scale-95;
}

/* Estilo para cards de estatísticas */
.stat-card {
    @apply transform hover:scale-105 transition-all duration-200;
}

/* Estilo para tabelas responsivas */
.table-responsive {
    @apply overflow-x-auto;
}

/* Estilo para modais */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

/* Estilo para toast notifications */
.toast {
    @apply fixed top-4 right-4 px-6 py-3 rounded-md shadow-lg z-50 transform transition-all duration-300;
}

.toast.show {
    @apply translate-x-0 opacity-100;
}

.toast.hide {
    @apply translate-x-full opacity-0;
}

/* Estilo para QR Code */
.qr-code {
    @apply border border-gray-300 rounded-md p-2 bg-white;
}

/* Estilo para carrinho vazio */
.empty-cart {
    @apply text-center text-gray-500 py-8;
}

/* Estilo para produtos no carrinho */
.cart-item {
    @apply border-b border-gray-200 py-3 hover:bg-gray-50;
}

/* Estilo para botões de ação no carrinho */
.cart-actions {
    @apply flex space-x-2;
}

/* Estilo para totais */
.totals-section {
    @apply bg-gray-50 border-t p-4;
}

/* Estilo para atalhos de teclado */
.keyboard-shortcut {
    @apply text-xs text-gray-500;
}

/* Estilo para status de estoque */
.stock-low {
    @apply text-red-600 font-semibold;
}

.stock-out {
    @apply text-red-800 font-bold;
}

.stock-ok {
    @apply text-green-600;
}

/* Estilo para métodos de pagamento */
.payment-method {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.payment-dinheiro {
    @apply bg-green-100 text-green-800;
}

.payment-cartao {
    @apply bg-blue-100 text-blue-800;
}

.payment-pix {
    @apply bg-purple-100 text-purple-800;
}

/* Estilo para loading */
.loading {
    @apply animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600;
}

/* Estilo para sidebar */
.sidebar-nav {
    @apply space-y-2;
}

.sidebar-nav a {
    @apply flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors;
}

.sidebar-nav a.active {
    @apply bg-blue-100 text-blue-700;
}

/* Estilo para filtros */
.filter-section {
    @apply bg-gray-50 border-b p-6;
}

/* Estilo para tabelas */
.table-header {
    @apply bg-gray-50;
}

.table-header th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-body {
    @apply bg-white divide-y divide-gray-200;
}

/* Estilo para botões de ação */
.btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.btn-success {
    @apply bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500;
}

.btn-danger {
    @apply bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500;
}

.btn-warning {
    @apply bg-yellow-600 text-white px-4 py-2 rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500;
}

.btn-secondary {
    @apply bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500;
}

/* Estilo para inputs */
.input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.input-field:invalid {
    @apply border-red-300 focus:ring-red-500;
}

/* Estilo para labels */
.label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* Estilo para cards */
.card {
    @apply bg-white rounded-lg shadow-sm border;
}

.card-header {
    @apply p-6 border-b;
}

.card-body {
    @apply p-6;
}

/* Estilo para grid responsivo */
.grid-responsive {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

/* Estilo para espaçamento */
.space-y-6 > * + * {
    @apply mt-6;
}

.space-y-4 > * + * {
    @apply mt-4;
}

.space-y-2 > * + * {
    @apply mt-2;
}

/* Estilo para flexbox */
.flex-center {
    @apply flex items-center justify-center;
}

.flex-between {
    @apply flex items-center justify-between;
}

/* Estilo para texto */
.text-muted {
    @apply text-gray-500;
}

.text-success {
    @apply text-green-600;
}

.text-danger {
    @apply text-red-600;
}

.text-warning {
    @apply text-yellow-600;
}

/* Estilo para badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

/* Estilo para scrollbar customizada */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Responsividade Mobile-First */

/* Mobile (< 640px) */
@media (max-width: 639px) {
    .mobile-full {
        width: 100% !important;
        max-width: none !important;
    }
    
    .mobile-stack {
        flex-direction: column !important;
    }
    
    .mobile-text-sm {
        font-size: 0.875rem !important;
    }
    
    .mobile-p-2 {
        padding: 0.5rem !important;
    }
    
    .mobile-gap-2 {
        gap: 0.5rem !important;
    }
    
    /* Menu mobile */
    .mobile-menu-overlay {
        backdrop-filter: blur(4px);
    }
    
    /* Touch targets - Mínimo 48x48px */
    button, .btn, a.button-like {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Previne zoom no iOS */
    }
    
    input, select, textarea {
        min-height: 48px !important;
        font-size: 16px !important; /* Previne zoom no iOS */
        padding: 12px !important;
    }
    
    /* Espaçamento entre touch targets */
    .touch-spacing > * + * {
        margin-top: 12px !important;
    }
    
    /* Cards com padding generoso */
    .mobile-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
    }
    
    /* Tabelas escondidas em mobile */
    .table-responsive {
        display: none !important;
    }
    
    /* Bottom sheet para ações */
    .bottom-actions {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -4px 6px rgba(0,0,0,0.1) !important;
        padding: 16px !important;
        z-index: 40 !important;
    }
    
    /* Modais mobile */
    .modal-mobile {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    /* Grid responsivo */
    .grid-mobile-1 {
        grid-template-columns: 1fr !important;
    }
    
    /* Espaçamento mobile */
    .space-mobile-2 > * + * {
        margin-top: 0.5rem !important;
    }
    
    /* Melhorar legibilidade */
    .text-mobile-lg {
        font-size: 1.125rem !important;
        line-height: 1.5 !important;
    }
    
    /* Padding mobile generoso */
    .p-mobile {
        padding: 1rem !important;
    }
    
    /* Margem mobile */
    .mb-mobile {
        margin-bottom: 1rem !important;
    }
}

/* Tablet (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .tablet-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .tablet-flex-row {
        flex-direction: row !important;
    }
    
    .tablet-text-base {
        font-size: 1rem !important;
    }
    
    .tablet-p-4 {
        padding: 1rem !important;
    }
    
    /* Menu tablet */
    .tablet-menu-collapsed {
        width: 4rem !important;
    }
    
    .tablet-menu-collapsed .menu-text {
        display: none !important;
    }
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
    .desktop-grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .desktop-flex-row {
        flex-direction: row !important;
    }
    
    .desktop-text-lg {
        font-size: 1.125rem !important;
    }
    
    .desktop-p-6 {
        padding: 1.5rem !important;
    }
}

/* Landscape mobile */
@media (max-width: 1023px) and (orientation: landscape) {
    .landscape-mobile .main-content {
        flex-direction: row !important;
    }
    
    .landscape-mobile .sidebar {
        width: 200px !important;
    }
    
    .landscape-mobile .mobile-menu-btn {
        display: none !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .touch-device .hover\:scale-105:hover {
        transform: none !important;
    }
    
    .touch-device .hover\:bg-gray-100:hover {
        background-color: transparent !important;
    }
    
    /* Aumentar área de toque */
    .touch-device button,
    .touch-device a,
    .touch-device [role="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem !important;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .high-dpi {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark mode support (preparação) */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        --bg-primary: #1f2937;
        --bg-secondary: #374151;
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Estilo para impressão */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    body {
        font-size: 12px;
    }
    
    .receipt {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    /* Ocultar elementos mobile em impressão */
    .mobile-menu-btn,
    .mobile-menu-overlay,
    .sidebar {
        display: none !important;
    }
}

/* Estilos específicos para cupom não-fiscal */
.receipt-container {
    width: 80mm;
    max-width: 80mm;
    margin: 0 auto;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.2;
    color: #000;
    background: #fff;
    padding: 5mm;
    box-sizing: border-box;
}

.receipt-header {
    text-align: center;
    margin-bottom: 10px;
    border-bottom: 1px dashed #000;
    padding-bottom: 5px;
}

.receipt-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px;
}

.receipt-via {
    font-size: 10px;
    font-weight: bold;
    background: #000;
    color: #fff;
    padding: 2px 5px;
    display: inline-block;
}

.receipt-info {
    margin-bottom: 8px;
    text-align: center;
}

.receipt-line {
    margin: 1px 0;
    word-wrap: break-word;
}

.receipt-separator {
    border-top: 1px dashed #000;
    margin: 5px 0;
}

.receipt-sale-info {
    margin-bottom: 8px;
}

.receipt-customer {
    margin-bottom: 8px;
}

.receipt-customer .receipt-line:first-child {
    font-weight: bold;
    margin-bottom: 2px;
}

.receipt-items {
    margin-bottom: 8px;
}

.receipt-item {
    margin-bottom: 3px;
}

.item-name {
    font-weight: bold;
    margin-bottom: 1px;
}

.item-details {
    font-size: 11px;
    margin-left: 5px;
}

.receipt-totals {
    margin-bottom: 8px;
}

.total-line {
    font-weight: bold;
    font-size: 14px;
    border-top: 1px solid #000;
    padding-top: 2px;
    margin-top: 3px;
}

.receipt-payment {
    margin-bottom: 8px;
}

.receipt-payment .receipt-line:first-child {
    font-weight: bold;
    margin-bottom: 2px;
}

.receipt-signature {
    margin-bottom: 8px;
}

.signature-line {
    margin: 10px 0;
    height: 20px;
    border-bottom: 1px solid #000;
}

.receipt-footer {
    text-align: center;
    margin-top: 10px;
    border-top: 1px dashed #000;
    padding-top: 5px;
}

/* Ocultar área de impressão na tela */
#printArea {
    display: none;
}

/* Mostrar área de impressão apenas quando imprimindo */
@media print {
    #printArea {
        display: block !important;
    }
    
    body > *:not(#printArea) {
        display: none !important;
    }
    
    .receipt-container {
        width: 80mm;
        max-width: 80mm;
        margin: 0;
        padding: 2mm;
        font-size: 11px;
    }
}