@use '@angular/material' as mat;
@include mat.elevation-classes();
@include mat.app-background();

// ===================================================
// ANGULAR MATERIAL THEME CONFIGURATION
// ===================================================
$idt_app-primary: mat.m2-define-palette(mat.$m2-blue-palette);
$idt_app-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
$idt_app-warn: mat.m2-define-palette(mat.$m2-red-palette);

$idt_app-theme: mat.m2-define-light-theme((
  color: (
    primary: $idt_app-primary,
    accent: $idt_app-accent,
    warn: $idt_app-warn,
  )
));

@include mat.all-component-themes($idt_app-theme);

// ===================================================
// IMPORTS - DESIGN SYSTEM
// ===================================================
@import "_colors";
@import "_typography";
@import "_status";
@import "idt_button";
// @import "idt_tables"; 
// @import "idt_tabs";

// ===================================================
// GLOBAL RESETS
// ===================================================
html, body { 
  height: 100%; 
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// ===================================================
// THEME SYSTEM
// ===================================================

// Legacy theme variables (manter para compatibilidade)
.dark-theme {
	--bg-color: #121212;
	--card-bg: #1e1e1e;
	--text-color: #ffffff;
	--text-secondary: #b0b0b0;
	--input-bg: #2d2d2d;
	--input-border: #404040;
	--input-focus: #4a4a4a;
}
  
.light-theme {
	--bg-color: #e9e2e2;
	--card-bg: #ffffff;
	--text-color: #000000;
	--text-secondary: #666666;
	--input-bg: #ffffff;
	--input-border: #e5e5e5;
	--input-focus: #d1d5db;
}

:root {
  // Sistema principal de cores
  --primary: #f1b40d;
  --background: #f8f9fa;
  --surface: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.8);
  --sidebar-bg: #ffffff;
  --card-bg: #ffffff;
  --divider: rgba(0, 0, 0, 0.12);
  --divider-light: rgba(0, 0, 0, 0.06);
  --hover-bg: #f1b40d74;
  --active-bg: #FFF8E1;
  --surface-variant: #f8f9fa;
  --surface-variant-light: #f1f3f4;
  --surface-variant-subtle: rgba(0, 0, 0, 0.02);
  --surface-disabled: #f5f5f5;
  
  // Sistema de botões
  --btn-background: #353433c6;
  --btn-background-hover: #f1b40d9a;
  --btn-text-color: #ffffff;
  --btn-text-color-hover: #1e1e1e;
}

.dark-theme {
  --background: #212020;
  --surface: #1e1e1e;
  --header-bg: rgba(30, 30, 30, 0.8);
  --sidebar-bg: #1e1e1e;
  --card-bg: #1e1e1e;
  --divider: rgba(255, 255, 255, 0.12);
  --divider-light: rgba(255, 255, 255, 0.08);
  --hover-bg: #f1b40d74;
  --active-bg: rgba(241, 196, 15, 0.2);
  --surface-variant: #2d2d2d;
  --surface-variant-light: #3a3a3a;
  --surface-variant-subtle: rgba(255, 255, 255, 0.02);
  --surface-disabled: #1a1a1a;
  --btn-background: #353433c6;
  --btn-background-hover: #f1b40d9a;
  --btn-text-color: #ffffff;
  --btn-text-color-hover: #1e1e1e;
}

html, body {
  background-color: var(--background);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

// ===================================================
// COMPONENT STYLES
// ===================================================

// Font Awesome Icons
.fas {
  font-weight: 300;
  color: #666666;
}

// Button Styles
button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);

  &:hover {
    background: var(--hover-bg);
  }

  &.active {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
    
    &:hover {
      background: var(--primary-dark);
    }
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  i {
    font-size: 0.95rem;
  }
}

.btn-primary {
  &:hover {
    background: var(--btn-background-hover);
    color: var(--btn-text-color-hover);
    border: 1px solid var(--divider);
  }
}

.btn-secondary {
  background-color: var(--btn-background); 
  border: 1px solid var(--divider);
  color: var(--btn-text-color);
  
  &:hover {
    background: var(--btn-background);
  }
}

.submit-button {
  width: 100%;
  background-color: var(--btn-background);
  color: var(--btn-text-color);   
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: var(--btn-background-hover);
    color: var(--btn-text-color-hover);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  i {
    font-size: 1rem;
  }
}

// ===================================================
// 🎯 GLOBAL INPUT STYLES - Aplicam-se globalmente
// ===================================================

// Estilos básicos para todos os inputs, selects e textareas
input[type="text"],
input[type="email"], 
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
  padding: 0.75rem;
  border: 1px solid var(--divider);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.4;
  transition: all 0.2s ease;
  
  &:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.2);
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--surface-disabled);
  }
  
  &::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
  }
}

// Estilos específicos para select
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  
  &:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  // Options styling
  option {
    background: var(--surface);
    color: var(--text-primary);
    padding: 0.5rem;
    
    &:hover {
      background: var(--hover-bg);
    }
    
    &:checked,
    &[selected] {
      background: var(--primary);
      color: var(--text-inverse);
    }
  }
}

// Textarea específico
textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-primary);
}

// Dark theme para inputs
.dark-theme {
  input[type="text"],
  input[type="email"], 
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--divider);
    
    &:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.2);
    }
    
    &::placeholder {
      color: var(--text-secondary);
    }
  }
  
  select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC82E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/svg%3e");
    
    option {
      background: var(--surface);
      color: var(--text-primary);
      
      &:hover {
        background: var(--hover-bg);
      }
      
      &:checked,
      &[selected] {
        background: var(--primary);
        color: var(--text-inverse);
      }
    }
  }
}

// Form Styles
.form-group {
  margin-bottom: 1rem;
  
  label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  
  input, textarea, select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--divider);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-primary);
    
    &:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.2);
    }
  }
}

// Card Styles
.card {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--divider);
  
  .card-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--divider);
    
    h3 {
      margin: 0;
      color: var(--text-primary);
    }
  }
}

// Table Styles
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--divider);
  }
  
  th {
    background: var(--surface-variant);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  
  tr:hover {
    background: var(--surface-variant-subtle);
  }
}

// Utility Classes
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }

// Responsive helpers
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

// Dark theme adjustments for Material components
.dark-theme {
  .mat-mdc-form-field {
    --mdc-filled-text-field-container-color: var(--surface);
    --mdc-filled-text-field-label-text-color: var(--text-secondary);
    --mdc-filled-text-field-input-text-color: var(--text-primary);
  }
  
  .mat-mdc-select-panel {
    background: var(--surface) !important;
  }
  
  .mat-mdc-option {
    color: var(--text-primary) !important;
    
    &:hover {
      background: var(--hover-bg) !important;
    }
  }
}

// ===================================================
// APLICAÇÃO EM SI 
// ===================================================

app-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-area {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

// Animações suaves
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

// Focus states acessíveis
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

// Scrollbars personalizadas
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-variant);
}

::-webkit-scrollbar-thumb {
  background: var(--divider);
  border-radius: 4px;
  
  &:hover {
    background: var(--text-secondary);
  }
}

// ===================================================
// 🎯 GLOBAL BADGE SYSTEM - Design System Padrão
// ===================================================

// Status Badges - Sistema universal para toda aplicação
.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  
  // Status States
  &.status-active {
    background-color: #e8f5e8;
    color: #2e7d32;
  }
  
  &.status-inactive {
    background-color: #fafafa;
    color: #616161;
  }
  
  &.status-pending {
    background-color: #fff3e0;
    color: #f57c00;
  }
  
  &.status-blocked {
    background-color: #ffebee;
    color: #d32f2f;
  }
  
  // Additional Status Types
  &.status-success {
    background-color: #e8f5e8;
    color: #2e7d32;
  }
  
  &.status-warning {
    background-color: #fff3e0;
    color: #f57c00;
  }
  
  &.status-error {
    background-color: #ffebee;
    color: #d32f2f;
  }
  
  &.status-info {
    background-color: #e3f2fd;
    color: #1976d2;
  }
}

// Type Badges - Sistema universal para categorização
.type-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  
  // Business Types
  &.type-client {
    background-color: #e3f2fd;
    color: #1976d2;
  }
  
  &.type-supplier {
    background-color: #f3e5f5;
    color: #7b1fa2;
  }
  
  &.type-partner {
    background-color: #e8f5e8;
    color: #388e3c;
  }
  
  &.type-internal {
    background-color: #fff3e0;
    color: #f57c00;
  }
  
  // Vehicle/Driver Types
  &.type-truck {
    background-color: #f3e5f5;
    color: #7b1fa2;
  }
  
  &.type-van {
    background-color: #e3f2fd;
    color: #1976d2;
  }
  
  &.type-motorcycle {
    background-color: #fff3e0;
    color: #f57c00;
  }
  
  // Priority Types
  &.type-urgent {
    background-color: #ffebee;
    color: #d32f2f;
  }
  
  &.type-high {
    background-color: #fff3e0;
    color: #f57c00;
  }
  
  &.type-normal {
    background-color: #e3f2fd;
    color: #1976d2;
  }
  
  &.type-low {
    background-color: #fafafa;
    color: #616161;
  }
}

// Category Badges - Sistema para CNH e outros
.category-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-right: 4px;
  
  // CNH Categories
  &.category-a {
    background-color: #fff3e0;
    color: #f57c00;
  }
  
  &.category-b {
    background-color: #e3f2fd;
    color: #1976d2;
  }
  
  &.category-c {
    background-color: #e8f5e8;
    color: #2e7d32;
  }
  
  &.category-d {
    background-color: #f3e5f5;
    color: #7b1fa2;
  }
  
  &.category-e {
    background-color: #ffebee;
    color: #d32f2f;
  }
  
  &.category-empty {
    background-color: #ffebee;
    color: #d32f2f;
  }
}

// Route Badges - Sistema para tipos de rota
.route-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  
  &.route-first-mile {
    background-color: #e8f5e8;
    color: #2e7d32;
  }
  
  &.route-line-haul {
    background-color: #e3f2fd;
    color: #1976d2;
  }
  
  &.route-last-mile {
    background-color: #fff3e0;
    color: #f57c00;
  }
  
  &.route-custom {
    background-color: #f3e5f5;
    color: #7b1fa2;
  }
}

// Dark Theme Support para todos os badges
@media (prefers-color-scheme: dark) {
  .status-badge {
    &.status-active {
      background-color: rgba(46, 125, 50, 0.3);
      color: #a5d6a7;
    }
    
    &.status-inactive {
      background-color: rgba(97, 97, 97, 0.3);
      color: #bdbdbd;
    }
    
    &.status-pending {
      background-color: rgba(245, 124, 0, 0.3);
      color: #ffb74d;
    }
    
    &.status-blocked {
      background-color: rgba(211, 47, 47, 0.3);
      color: #e57373;
    }
    
    &.status-success {
      background-color: rgba(46, 125, 50, 0.3);
      color: #a5d6a7;
    }
    
    &.status-warning {
      background-color: rgba(245, 124, 0, 0.3);
      color: #ffb74d;
    }
    
    &.status-error {
      background-color: rgba(211, 47, 47, 0.3);
      color: #e57373;
    }
    
    &.status-info {
      background-color: rgba(25, 118, 210, 0.3);
      color: #90caf9;
    }
  }
  
  .type-badge {
    &.type-client {
      background-color: rgba(25, 118, 210, 0.3);
      color: #90caf9;
    }
    
    &.type-supplier {
      background-color: rgba(123, 31, 162, 0.3);
      color: #ce93d8;
    }
    
    &.type-partner {
      background-color: rgba(56, 142, 60, 0.3);
      color: #a5d6a7;
    }
    
    &.type-internal {
      background-color: rgba(245, 124, 0, 0.3);
      color: #ffb74d;
    }
    
    &.type-truck {
      background-color: rgba(123, 31, 162, 0.3);
      color: #ce93d8;
    }
    
    &.type-van {
      background-color: rgba(25, 118, 210, 0.3);
      color: #90caf9;
    }
    
    &.type-motorcycle {
      background-color: rgba(245, 124, 0, 0.3);
      color: #ffb74d;
    }
    
    &.type-urgent {
      background-color: rgba(211, 47, 47, 0.3);
      color: #e57373;
    }
    
    &.type-high {
      background-color: rgba(245, 124, 0, 0.3);
      color: #ffb74d;
    }
    
    &.type-normal {
      background-color: rgba(25, 118, 210, 0.3);
      color: #90caf9;
    }
    
    &.type-low {
      background-color: rgba(97, 97, 97, 0.3);
      color: #bdbdbd;
    }
  }
  
  .category-badge {
    &.category-a {
      background-color: rgba(245, 124, 0, 0.3);
      color: #ffb74d;
    }
    
    &.category-b {
      background-color: rgba(25, 118, 210, 0.3);
      color: #90caf9;
    }
    
    &.category-c {
      background-color: rgba(46, 125, 50, 0.3);
      color: #a5d6a7;
    }
    
    &.category-d {
      background-color: rgba(123, 31, 162, 0.3);
      color: #ce93d8;
    }
    
    &.category-e {
      background-color: rgba(211, 47, 47, 0.3);
      color: #e57373;
    }
    
    &.category-empty {
      background-color: rgba(211, 47, 47, 0.3);
      color: #e57373;
    }
  }
  
  .route-badge {
    &.route-first-mile {
      background-color: rgba(56, 142, 60, 0.3);
      color: #a5d6a7;
    }
    
    &.route-line-haul {
      background-color: rgba(25, 118, 210, 0.3);
      color: #90caf9;
    }
    
    &.route-last-mile {
      background-color: rgba(245, 124, 0, 0.3);
      color: #ffb74d;
    }
    
    &.route-custom {
      background-color: rgba(123, 31, 162, 0.3);
      color: #ce93d8;
    }
  }
}

// Manual Dark Theme Support
:host-context([data-theme="dark"]) {
  .status-badge {
    &.status-active {
      background-color: rgba(46, 125, 50, 0.3);
      color: #a5d6a7;
    }
    
    &.status-inactive {
      background-color: rgba(97, 97, 97, 0.3);
      color: #bdbdbd;
    }
    
    &.status-pending {
      background-color: rgba(245, 124, 0, 0.3);
      color: #ffb74d;
    }
    
    &.status-blocked {
      background-color: rgba(211, 47, 47, 0.3);
      color: #e57373;
    }
  }
  
  .type-badge {
    &.type-client {
      background-color: rgba(25, 118, 210, 0.3);
      color: #90caf9;
    }
    
    &.type-supplier {
      background-color: rgba(123, 31, 162, 0.3);
      color: #ce93d8;
    }
    
    &.type-partner {
      background-color: rgba(56, 142, 60, 0.3);
      color: #a5d6a7;
    }
    
    &.type-internal {
      background-color: rgba(245, 124, 0, 0.3);
      color: #ffb74d;
    }
  }
}

// ===================================================
// VENDOR OVERRIDES
// ===================================================

/* Material Select Dark Theme - força cores customizadas */
.dark-theme .mat-mdc-select-panel .mat-mdc-option {
  background: var(--surface) !important;
  color: #ffffff !important;
  
  &:hover {
    background: #404040 !important;
    color: #FFC82E !important;
  }
  
  &.mat-mdc-option-active {
    background: #FFC82E !important;
    color: #000000 !important;
  }
}
    

  

  
// ===================================================
// PWA NOTIFICATION STYLES
// ===================================================

/* Estilos globais para notificações PWA */
.pwa-update-snackbar {
  .mdc-snackbar__surface {
    background-color: var(--primary-color, #1976d2) !important;
    color: white !important;
  }
  
  .mat-mdc-snack-bar-action {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}

.pwa-install-snackbar {
  .mdc-snackbar__surface {
    background-color: var(--accent-color, #ff4081) !important;
    color: white !important;
  }
  
  .mat-mdc-snack-bar-action {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}

.pwa-error-snackbar {
  .mdc-snackbar__surface {
    background-color: var(--warn-color, #f44336) !important;
    color: white !important;
  }
  
  .mat-mdc-snack-bar-action {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}

.pwa-success-snackbar {
  .mdc-snackbar__surface {
    background-color: var(--success-color, #4caf50) !important;
    color: white !important;
  }
}

/* Ajustes para PWA instalado */
@media (display-mode: standalone) {
  body {
    /* Remove a barra de status se necessário */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* Estilos específicos para PWA instalada */
  .app-header {
    /* Ajusta header para PWA */
    padding-top: calc(env(safe-area-inset-top) + 1rem);
  }
}
    

  

  
// ===================================================
// MOBILE ZOOM PREVENTION - Experiência Nativa
// ===================================================

/* Previne zoom em todos os elementos */
html, body {
  /* Desabilita zoom por pinch/double-tap */
  touch-action: manipulation;
  
  /* Remove destacar text selection em mobile */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  /* Remove efeito tap highlight */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

/* Permite seleção de texto em inputs e áreas editáveis */
input, textarea, select, 
[contenteditable="true"],
.selectable-text {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Previne zoom específico em inputs (iOS) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-size: 16px !important; /* Previne auto-zoom no iOS */
  
  /* Remove aparência nativa */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Previne zoom em botões */
button, 
.btn,
[role="button"] {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  
  /* Remove delay de 300ms no mobile */
  touch-action: manipulation;
}

/* Links e elementos clicáveis */
a, [role="link"] {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* Material Design - Previne zoom */
.mat-mdc-button,
.mat-mdc-raised-button,
.mat-mdc-outlined-button,
.mat-mdc-unelevated-button,
.mat-mdc-fab,
.mat-mdc-mini-fab,
.mat-mdc-icon-button {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* Data tables - experiência mobile sem zoom */
.data-table-container {
  touch-action: pan-y pan-x; /* Permite scroll horizontal/vertical */
}

/* PWA específico - experiência nativa */
@media (display-mode: standalone) {
  html, body {
    /* Máxima experiência nativa */
    overscroll-behavior: none; /* Previne pull-to-refresh */
    -webkit-overflow-scrolling: touch;
  }
  
  /* Safe areas para notch/dynamic island */
  .app-content {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}