/* ════════════════════════════════════════════════════════════════════════════
   LFT CRM — style_v12.css
   ════════════════════════════════════════════════════════════════════════════
   PACOTE DE CSS v12 — complementa style.css e style_patch.css

   COBRE:
     1) Responsividade para iPad/tablets (768px–1024px)
     2) Barras de evento da agenda mais altas (estilo Google Agenda)
     3) Barra de pesquisa global maior
     4) Scroll touch-friendly em pipelines/tabelas longas
     5) Agenda — cores customizadas + dia da semana
     6) Modal: alerta "alterações não salvas"
   ══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   1) BARRA DE PESQUISA GLOBAL — MAIOR
═══════════════════════════════════════════════════════════════════════════ */
.search-bar {
  max-width: 480px !important;          /* era 320px */
  flex: 1 1 360px;
}
.search-bar input {
  padding: 10px 14px 10px 38px !important;
  font-size: 13px;
  border-radius: 10px;
  transition: all 0.18s;
}
.search-bar input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}
.search-bar svg { width: 17px !important; height: 17px !important; }

/* WhatsApp search também maior */
.wa-search input {
  padding: 9px 12px 9px 36px !important;
  font-size: 13px !important;
  border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════════════════════
   2) AGENDA — barras de evento mais altas (estilo Google)
═══════════════════════════════════════════════════════════════════════════ */
.cal-event {
  padding: 6px 10px !important;        /* era 2px 6px — agora mais "respirável" */
  font-size: 12px !important;          /* era 10px */
  font-weight: 600 !important;
  margin-bottom: 4px !important;       /* era 2px */
  border-radius: 6px !important;
  line-height: 1.4 !important;
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  transition: all 0.12s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

/* Visualização semana — cards de dia maiores */
.cal-day {
  min-height: 140px !important;        /* era 100px */
  padding: 8px !important;
}

/* Mês — números do dia maiores */
.cal-day-num {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

/* Cabeçalho da semana — destaque do dia */
.cal-day-header {
  padding: 12px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

/* Hoje — gradiente sutil */
.cal-day.today {
  background: linear-gradient(135deg, rgba(26,86,219,0.12), rgba(26,86,219,0.04)) !important;
  border: 2px solid rgba(26,86,219,0.3) !important;
}

/* Tornar a navegação do calendário mais espaçosa */
.cal-nav {
  padding: 12px 16px;
  background: var(--bg3);
  border-radius: 10px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
}

/* Lista (cal view list) — também mais bonita */
#cal-container .sched-card {
  padding: 14px !important;
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: var(--bg2);
  border-radius: 10px;
  border-left: 4px solid var(--primary);
  transition: all 0.15s;
}
#cal-container .sched-card:hover {
  background: var(--bg3);
  transform: translateX(2px);
}

/* ════════════════════════════════════════════════════════════════════════════
   3) RESPONSIVIDADE — IPAD/TABLET (768px–1024px)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Sidebar mais compacta em tablets */
  .sidebar {
    width: 70px !important;
  }
  .sidebar .nav-item span:not(.nav-badge) {
    display: none !important;
  }
  .main, main {
    margin-left: 70px !important;
  }

  /* Header de páginas: empilhar título e ações */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .page-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100%;
  }

  /* Tabelas — scroll horizontal touch-friendly */
  .table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .table-wrap table {
    min-width: 760px;                  /* garante scroll horizontal em telas pequenas */
  }

  /* Pipeline kanban — scroll horizontal touch-friendly */
  #kanban-board {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity;
    padding-bottom: 12px !important;
  }
  .kanban-col {
    min-width: 280px !important;
    max-width: 280px !important;
    scroll-snap-align: start;
  }

  /* WhatsApp em tablet — sidebar menor */
  .wa-sidebar {
    width: 280px !important;
    min-width: 280px !important;
  }

  /* Formulários — campos maiores para toque */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 14px !important;
    padding: 10px 12px !important;
    min-height: 42px !important;
  }
  .btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  .btn-sm { min-height: 34px !important; }

  /* Agenda em tablet — eventos compactos mas legíveis */
  .cal-event {
    font-size: 11px !important;
    padding: 5px 8px !important;
    min-height: 22px !important;
  }
  .cal-day { min-height: 120px !important; }
}

/* ─── PHONE (até 767px) ─── */
@media (max-width: 767px) {
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    width: 60px !important;
  }
  .main, main { margin-left: 60px !important; }

  /* Esconder coluna E-mail em listagens em mobile */
  table th:nth-child(4), table td:nth-child(4) {
    /* opcional, descomente se quiser ocultar e-mail no mobile */
    /* display: none; */
  }

  .modal { max-width: 95vw !important; }
  .form-row { flex-direction: column !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   4) BADGES / TAGS / PILLS — uniformização
═══════════════════════════════════════════════════════════════════════════ */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
}

/* Badge "Sinistro Ativo" no painel de clientes */
.v12-sinistro-badge {
  animation: v12pulse 2s ease-in-out infinite;
}
@keyframes v12pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.97); }
}

/* ════════════════════════════════════════════════════════════════════════════
   5) MODAL — destaque do alerta de auto-save
═══════════════════════════════════════════════════════════════════════════ */
.modal {
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.modal-body {
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-lg { max-width: 720px !important; }

/* ════════════════════════════════════════════════════════════════════════════
   6) TABS WHATSAPP — mais bonitos (incluindo Não Lidos / Favoritos do v12)
═══════════════════════════════════════════════════════════════════════════ */
.wa-tabs {
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 8px 14px !important;
}
.wa-tab {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 16px !important;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg3);
  color: var(--text2);
}
.wa-tab.active {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 600;
}
.wa-tab[data-wa-tab="favorites"] {
  font-size: 14px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   7) AVATARES / botões — mais touch-friendly
═══════════════════════════════════════════════════════════════════════════ */
.btn-icon {
  min-width: 32px;
  min-height: 32px;
  padding: 6px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   8) NAV ITEM SINISTROS (v12)
═══════════════════════════════════════════════════════════════════════════ */
#nav-item-sinistros {
  position: relative;
}
#nav-sinistro-badge {
  background: var(--warning);
  color: #fff;
}
#nav-sinistro-badge.hidden { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   9) MODO DEUS — banner top
═══════════════════════════════════════════════════════════════════════════ */
#godmode-banner button:hover {
  background: rgba(255,255,255,0.4) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   10) SCROLLBAR — finos, modernos, touch-friendly
═══════════════════════════════════════════════════════════════════════════ */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--bg4);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text3); }
*::-webkit-scrollbar-track { background: transparent; }

/* iPad/tablet — scrollbars um pouco maiores */
@media (max-width: 1024px) {
  *::-webkit-scrollbar { width: 14px; height: 14px; }
  *::-webkit-scrollbar-thumb { border-width: 3px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   11) PRINT — esconder controles
═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .sidebar, .page-actions, .wa-sidebar, #godmode-banner { display: none !important; }
  .main, main { margin-left: 0 !important; }
}