/**
 * Material System 3 - Brasallis Hub Core
 * Standardizing spacing, interaction, and responsiveness.
 * KEEPING ORIGINAL COLORS.
 */

:root {
    /* Brand Colors (ORIGINAL BRASALLIS) */
    --m3-primary: #0070F2;
    --m3-on-primary: #ffffff;
    --m3-primary-container: #e1f0ff;
    
    --m3-secondary: #121212;
    --m3-on-secondary: #ffffff;
    
    --m3-success: #25D366;
    --m3-error: #e11d48;
    
    /* Surfaces */
    --m3-surface: #ffffff;
    --m3-surface-variant: #f1f5f9;
    --m3-background: #f8fafc;
    
    /* Elevation Levels */
    --m3-shadow-1: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
    --m3-shadow-2: 0 3px 6px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.1);
    --m3-shadow-3: 0 10px 20px rgba(0,0,0,0.04), 0 6px 6px rgba(0,0,0,0.05);
    
    /* Spacing & Radius */
    --m3-radius-small: 12px;
    --m3-radius-medium: 24px;
    --m3-radius-large: 32px;
}

/* Material Typography Base */
body {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    background-color: var(--m3-background);
    color: #1c1c1c;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .m3-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Modern Card Pattern */
.m3-card {
    background: var(--m3-surface);
    border-radius: var(--m3-radius-medium);
    padding: 2rem;
    box-shadow: var(--m3-shadow-1);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.m3-card-elevated:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transform: translateY(-6px);
}

/* Bottom Navigation (Mobile Only) */
.m3-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,0,0,0.05);
    display: none;
    justify-content: space-around;
    align-items: center;
    z-index: 3000;
    padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 991px) {
    .m3-bottom-nav {
        display: flex;
    }
    
    /* Hide sidebars when bottom nav is active */
    .sidebar { display: none !important; }
}

.m3-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #64748b;
    gap: 4px;
    flex: 1;
}

.m3-nav-item.active {
    color: var(--m3-primary);
}

.m3-nav-icon {
    font-size: 1.4rem;
    padding: 4px 16px;
    border-radius: 16px;
    transition: background 0.2s;
}

.m3-nav-item.active .m3-nav-icon {
    background: var(--m3-primary-container);
}

.m3-nav-label {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Material FAB (Floating Action Button) */
.m3-fab {
    position: fixed;
    right: 24px;
    bottom: 100px; /* Above bottom nav */
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--m3-primary);
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--m3-shadow-3);
    border: none;
    cursor: pointer;
    z-index: 3100;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
}

.m3-fab:active {
    transform: scale(0.9) translateY(4px);
    box-shadow: var(--m3-shadow-1);
}

/* MD3 Buttons */
.m3-btn {
    height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
}

.m3-btn-primary { background: var(--m3-primary); color: white !important; }
.m3-btn-primary:hover { filter: brightness(1.1); box-shadow: var(--m3-shadow-2); }

.m3-btn-surface { background: var(--m3-surface-variant); color: var(--m3-secondary); }

/* Material Inputs */
.m3-input-group { margin-bottom: 1.5rem; }
.m3-input {
    width: 100%;
    height: 56px;
    background: var(--m3-surface-variant);
    border: none;
    border-bottom: 2px solid #64748b;
    border-radius: 12px 12px 0 0;
    padding: 0 16px;
    font-size: 1rem;
    transition: all 0.2s;
}

.m3-input:focus {
    outline: none;
    background: #e2e8f0;
    border-bottom-color: var(--m3-primary);
}

/* Touch Targets Otimization */
button, .btn, .nav-link, .brasallis-item, .bottom-nav-item {
    min-height: 48px;
}

@media (max-width: 991px) {
    .container, .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Touch-action: Elimina o delay de 300ms em todos os elementos clicáveis (mobile) */
button, .btn, .chip, .product-card, .venda-card, .user-card,
.bottom-nav-item, .bottom-nav-menu-btn, .app-item, .brasallis-item,
.nav-link, .dropdown-item, .submenu-item, [onclick],
a, label[for] {
    touch-action: manipulation;
}