/* =============================================================================
   Caminho: /assets/css/mobile.css
   ARCOLL SYSTEM — Responsividade & Mobile v2.0.0
   Contém: breakpoints globais, ajustes mobile, mobile banking (payments),
           touch optimizations, safe areas iOS.
   Importar APÓS main.css e arcoll.css.
   PHP 7.4 | Arcoll SaaS
============================================================================= */

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE GLOBAL — Tabelas
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .table-responsive { border-radius: var(--radius-lg); overflow: hidden; }
  .table th, .table td { font-size: 11.5px; padding: 8px 10px; }
  .table .col-hide-mobile { display: none; }
  .btn { padding: 7px 12px; font-size: 12px; }
  .btn-sm { padding: 5px 10px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════
   KPI CARDS MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .erp-kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-card     { padding: 12px 14px; }
  .kpi-icon     { width: 36px; height: 36px; font-size: 15px; }
  .kpi-value    { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════
   GRIDS MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .erp-grid-2,
  .erp-grid-3,
  .erp-grid-21 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .erp-grid-4  { grid-template-columns: 1fr 1fr; }
  .erp-kpi-grid { grid-template-columns: 1fr 1fr; }
  .erp-stat-row { grid-template-columns: 1fr 1fr; }
  .grid-kpi    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .erp-grid-4,
  .erp-kpi-grid,
  .grid-kpi { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   FORM ROWS MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .form-row.cols-2,
  .form-row.cols-3,
  .form-row.cols-4,
  .erp-form-row.cols-2,
  .erp-form-row.cols-3 { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
  .page-header-actions { width: 100%; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   PAGE HEADER MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .page-title { font-size: 15px; }
  .erp-page-title { font-size: 15px; }
  .erp-page-title-ico { width: 30px; height: 30px; font-size: 12px; }
  .card-body { padding: 14px; }
  .card-header { padding: 11px 14px; }
}

/* ══════════════════════════════════════════════════════════
   DRAWER FULLSCREEN MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .erp-detail-drawer {
    width: 100% !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    top: auto;
    height: 90vh;
  }
}

/* ══════════════════════════════════════════════════════════
   SUBNAV MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .tnv-subnav:not(.has-items) { height: 0; overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-fixo { left: 0 !important; padding: 0 10px; }
  .ff-datetime, .ff-divider, .ff-version { display: none; }
}

/* ══════════════════════════════════════════════════════════
   TABS HORIZONTAL SCROLL MOBILE
══════════════════════════════════════════════════════════ */
.erp-tabs, .tabs-header {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.erp-tabs::-webkit-scrollbar,
.tabs-header::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════════════════
   BOTÕES DE AÇÃO MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .page-header-actions,
  .erp-page-header-right,
  .erp-table-actions,
  .card-header .btn-group { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE BANKING — Páginas de pagamento público
   (Portal do cliente, links de cobrança)
══════════════════════════════════════════════════════════ */
:root {
  --mob-radius:      16px;
  --mob-radius-sm:   10px;
  --mob-shadow:      0 4px 24px rgba(0,0,0,.4);
  --mob-transition:  all .2s cubic-bezier(.4,0,.2,1);
  --mob-safe-bottom: env(safe-area-inset-bottom, 16px);
  --mob-safe-top:    env(safe-area-inset-top, 0px);
}

/* Touch action nos botões de pagamento */
.btn-pagar,
.btn-confirmar,
.btn-expandir,
.sheet-close,
.suporte-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Scroll suave nativo */
.app-body,
.sheet-box {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.sheet-box { overscroll-behavior: contain; }

/* Safe area iOS */
.app-footer { padding-bottom: calc(16px + var(--mob-safe-bottom)); }

/* Haptic feedback visual */
.btn-pagar:active,
.btn-confirmar:active { transform: scale(.97); }

/* Animações mobile banking */
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 14px var(--cor-primaria, #4a91de)40; }
  50%       { box-shadow: 0 6px 24px var(--cor-primaria, #4a91de)60; }
}
.emp-hero          { animation: slideUp .4s .1s both; }
.progress-section  { animation: slideUp .4s .15s both; }
.parcelas-section  { animation: slideUp .4s .2s both; }
.suporte-card      { animation: slideUp .4s .25s both; }

/* Parcela próxima com pulso */
.parc-item.is-proxima .btn-pagar { animation: pulseGlow 2s infinite; }

/* Status de parcela */
.parc-item.is-atrasado .parc-num-circle { animation: pulseErr .8s ease infinite alternate; }
@keyframes pulseErr {
  from { box-shadow: 0 0 0 2px rgba(239,68,68,.2); }
  to   { box-shadow: 0 0 0 6px rgba(239,68,68,.06); }
}

/* Highlight de âncora */
.parc-item.highlight-anchor { animation: highlightAnchor .4s ease; }
@keyframes highlightAnchor { 0% { background: rgba(74,145,222,.18); } 100% { background: transparent; } }

/* Responsivo mobile banking < 360px */
@media (max-width: 360px) {
  .emp-hero-amount-value { font-size: 26px; }
  .emp-hero-num          { font-size: 18px; }
  .emp-hero-chip         { font-size: 10px; padding: 4px 8px; }
  .parc-valor            { font-size: 13px; }
  .btn-pagar             { font-size: 11px; padding: 6px 10px; }
}

/* ══════════════════════════════════════════════════════════
   TABELA MOBILE — estilo card (< 480px)
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .table-mobile-card thead { display: none; }
  .table-mobile-card tbody tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; }
  .table-mobile-card tbody td { display: block; padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: right; }
  .table-mobile-card tbody td::before { content: attr(data-label); float: left; font-weight: 700; color: var(--text-muted); font-size: 11px; text-transform: uppercase; }
  .table-mobile-card tbody tr:last-child { margin-bottom: 0; }

  /* Fin table mobile */
  .fin-table thead { display: none; }
  .fin-table tbody td { display: block; padding: 6px 14px; border-bottom: none; }
  .fin-table tbody td::before { content: attr(data-label); font-size: 10px; color: var(--text-muted); display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .4px; }
  .fin-table tbody tr { border-bottom: 1px solid var(--border); display: block; padding: 8px 0; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVIDADE FINAL
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .erp-toolbar { flex-direction: column; align-items: stretch; }
  .erp-toolbar-left, .erp-toolbar-right { width: 100%; }
  .erp-search-box { max-width: 100%; min-width: 0; width: 100%; }
  .card-body { padding: 14px; }
}