@import url('gestao_apple_luxury.css');

/* ==========================================================================
   NEXUS GESTÃO 360° — UNIVERSAL MOBILE APP STYLESHEET (100% PARITY & TOUCH)
   ========================================================================== */

/* Universal Custom Luxury Scrollbar - 100% Theme Matched */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #c5a059 #08080a !important;
  -webkit-tap-highlight-color: transparent !important;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}
::-webkit-scrollbar-track {
  background: #08080a !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f1e3ad 0%, #c5a059 50%, #997836 100%) !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #f1e3ad !important;
}

/* Base Mobile Overrides for Viewports <= 768px */
@media (max-width: 768px) {
  html, body {
    padding: 10px 10px 64px 10px !important;
    font-size: 13.5px !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Universal Container / Header */
  .header-flex, .page-header, .top-header-wrap {
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }

  .header-title-wrap h1, .page-title, h1 {
    font-size: 1.15rem !important;
    letter-spacing: -0.3px !important;
  }

  .header-title-wrap p, .page-subtitle {
    font-size: 0.72rem !important;
  }

  .header-actions, .top-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .btn, button, .action-btn {
    min-height: 38px !important;
    font-size: 0.75rem !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }

  /* Universal KPI Grids */
  .kpi-grid, .stats-grid, .metric-grid, .summary-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .kpi-card, .stat-card, .metric-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .kpi-value, .stat-value, .metric-value {
    font-size: 1.25rem !important;
    margin-bottom: 2px !important;
  }

  .kpi-label, .stat-label {
    font-size: 0.65rem !important;
  }

  .kpi-subtext, .stat-subtext {
    font-size: 0.64rem !important;
  }

  /* Universal Filter Bars & Search */
  .filter-bar, .controls-bar, .search-bar-wrap {
    padding: 10px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    border-radius: 10px !important;
  }

  .filter-pills, .filter-group {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .filter-pill, .filter-btn {
    white-space: nowrap !important;
    padding: 6px 11px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
  }

  .search-wrap, .search-box {
    min-width: 0 !important;
    width: 100% !important;
  }

  .search-wrap input, .search-box input {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    padding: 8px 12px !important;
    width: 100% !important;
  }

  /* Universal Grids & Cards */
  .groups-grid, .cards-grid, .leads-grid, .items-grid, .tasks-grid, .closer-grid, .stat-grid, .matrix-grid, .products-grid, .pipeline-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .group-card, .data-card, .lead-card, .task-card, .closer-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 14px 14px !important;
    border-radius: 12px !important;
    gap: 10px !important;
    overflow: hidden !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .task-actions, .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .task-actions .btn, .actions .btn {
    flex: 1 1 auto !important;
    min-width: 110px !important;
    font-size: 0.75rem !important;
    padding: 8px 10px !important;
  }

  .task-actions .btn-edit-icon {
    flex: 0 0 38px !important;
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .task-header {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .task-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 11px !important;
    width: 100% !important;
  }

  .stats-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .stat-card {
    min-width: 0 !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .client-section-card {
    padding: 12px 14px !important;
    margin-top: 14px !important;
    margin-bottom: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .edit-modal, .new-task-modal {
    max-width: 95vw !important;
    width: 95vw !important;
    padding: 16px 14px !important;
    max-height: 92vh !important;
    border-radius: 14px !important;
  }

  /* Universal Kanban Boards */
  .kanban-board, .kanban-container {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .kanban-col, .kanban-column {
    min-width: 82vw !important;
    max-width: 82vw !important;
    scroll-snap-align: center !important;
    flex-shrink: 0 !important;
  }

  /* Universal Tables */
  .table-responsive, .table-container, .data-table-wrap {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
  }

  table {
    min-width: 550px !important;
  }

  th, td {
    padding: 8px 10px !important;
    font-size: 0.72rem !important;
  }

  /* Universal Fullscreen Mobile Modals & Bottom Sheets */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-container {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 94vh !important;
    height: 94vh !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    border-bottom: none !important;
  }

  .modal-header {
    padding: 14px 16px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .modal-title {
    font-size: 1.02rem !important;
  }

  .modal-body {
    padding: 12px 14px !important;
    gap: 12px !important;
  }

  .modal-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2) !important;
  }

  .modal-tab-btn {
    padding: 6px 12px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Universal Form Controls */
  input, select, textarea, .form-input, .form-textarea, .form-select {
    font-size: 16px !important; /* Prevenção de auto zoom no iOS Safari */
    border-radius: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Universal Rows e Grids (Dashboard e Sistema) */
  .row, .row-3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  @media (max-width: 400px) {
    .grid {
      grid-template-columns: 1fr !important;
    }
  }

  .kpi {
    min-height: auto !important;
    padding: 10px 12px !important;
  }

  .kpi-value {
    font-size: 1.25rem !important;
  }

  .kpi-label {
    font-size: 0.62rem !important;
  }

  .kpi-pill {
    font-size: 0.68rem !important;
    padding: 5px 8px !important;
    margin-top: 6px !important;
  }

  /* Filtros Temporais com Rolagem Suave no Mobile */
  .time-filters {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 4px !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tf-btn {
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
  }

  /* Painel de Cabeçalho e Copiloto */
  .header-panel {
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .copilot-box {
    padding: 10px 12px !important;
  }

  .client-pills-bar {
    width: 100% !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Modais de Edição e Tarefas */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .form-group.full {
    grid-column: 1 / -1 !important;
  }

  .modal-footer {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .modal-footer button, .modal-footer .btn, .modal-footer .btn-save, .modal-footer .btn-delete {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Toque Otimizado para iPhone e Android */
  button, .btn, .action-btn, .client-pill, .tf-btn, .filter-btn, .nav-tab-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ==========================================================================
   UNIVERSAL APPLE CINEMA-GRADE ELEVATION (APPLIED TO ALL 26 MODULES)
   ========================================================================== */

/* Cards com Chanfro de Luz Apple (Specular Rim) */
.card, .kpi, .stat-card, .dashboard-card, .metric-card, .copilot-box, .pipeline-card, .table-card {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(16, 17, 24, 0.78) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover, .kpi:hover, .stat-card:hover, .dashboard-card:hover, .metric-card:hover {
  border-color: rgba(197, 160, 89, 0.45) !important;
  border-top-color: rgba(245, 230, 179, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.65), 0 0 20px rgba(197, 160, 89, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.12) !important;
}

/* Botões com Física de Mola Apple */
.btn, button.btn-primary, .action-btn, .submit-btn, .add-btn, .save-btn {
  border-radius: 9999px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

.btn:hover, button.btn-primary:hover, .action-btn:hover, .submit-btn:hover {
  transform: scale(1.02) !important;
}

.btn:active, button.btn-primary:active, .action-btn:active, .submit-btn:active {
  transform: scale(0.97) !important;
}

/* Tabelas com Visual Limpo e Zebra Translúcida */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

th {
  background: rgba(10, 11, 16, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #c5a059 !important;
  padding: 12px 14px !important;
}

td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 12px 14px !important;
  font-size: 0.82rem !important;
}

tr:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Inputs e Selects Apple */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  background: rgba(10, 11, 16, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #c5a059 !important;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.18), inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  outline: none !important;
}