/* ─── OptimaX Hub — Mobile / PWA ────────────────────────────────── */

/* ── Mobile Home Button (header, mobile-only) ──────────────────── */
#btn-mobile-home {
  display: none; /* shown via media query */
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: none;
  background: rgba(13, 43, 78, 0.06);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  color: #0D2B4E;
  transition: background 0.15s;
  margin-right: 4px;
}
#btn-mobile-home:active { background: rgba(13, 43, 78, 0.14); }

/* ── Bottom Navigation Bar (6 tabs) ────────────────────────────── */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  background: #ffffff;
  border-top: 1px solid #e8edf3;
  box-shadow: 0 -4px 24px rgba(13, 43, 78, 0.10);
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 7 tabs — items are narrower, icons/labels scaled down */
.mb-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  padding: 7px 1px 5px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  color: #94a3b8;
  transition: color 0.15s;
  min-height: 52px;
  min-width: 0;
  outline: none;
}

.mb-nav-item.active { color: #0D2B4E; }
.mb-nav-item:active { background: rgba(13, 43, 78, 0.04); }

.mb-nav-item.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 3px;
  background: #0D2B4E;
  border-radius: 0 0 3px 3px;
}

.mb-nav-icon  { font-size: 20px; line-height: 1; display: block; }
.mb-nav-label {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── More Bottom Sheet ─────────────────────────────────────────── */
#mobile-more-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
}

#mobile-more-overlay.visible { display: block; }

.mb-more-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 40, 0.48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.mb-more-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.16);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

#mobile-more-overlay.visible .mb-more-sheet {
  transform: translateY(0);
}

.mb-more-handle {
  display: flex;
  justify-content: center;
  padding: 14px 0 6px;
}

.mb-more-handle::after {
  content: '';
  width: 40px; height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
}

.mb-more-title {
  padding: 8px 20px 12px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
}

.mb-more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid #f8fafc;
  text-align: left;
  cursor: pointer;
  color: #1e293b;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s;
}

.mb-more-item:active { background: #f1f5f9; }
.mb-more-item:last-child { border-bottom: none; }
.mb-more-item-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }

/* ── Mobile Layout ≤ 768px ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Sidebar hidden; bottom nav + home button shown */
  #sidebar           { display: none !important; }
  #mobile-bottom-nav { display: flex !important; }
  #btn-mobile-home   { display: flex !important; }

  /* body has overflow-x:hidden (for desktop sidebar) — release it on mobile
     so that Kanban and Gantt can be scrolled horizontally via touch */
  body { overflow-x: initial !important; }

  /* Main area: full width, pad bottom for nav bar */
  #main {
    margin-left: 0 !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Header: tighter */
  #header { padding: 0 10px !important; gap: 6px !important; }
  .header-title { font-size: 13px !important; }

  /* Hide reload + PDF export buttons on mobile to save space */
  #btn-reload { display: none !important; }
  #header button[onclick="showPdfModal()"] { display: none !important; }

  /* Save button: smaller */
  #btn-save {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* Content area: tighter padding */
  #content { padding: 14px !important; }

  /* ── KPI grids: 2-column ───────────────────────────────────── */
  /* !important overrides inline style="grid-template-columns:..." */
  div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Single-row flex KPI rows → wrap */
  div[style*="display:flex"][style*="gap"] .kpi-card {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  /* ── Cards: more breathing room ────────────────────────────── */
  .card { border-radius: 14px; }

  /* ── Tables: horizontal scroll ─────────────────────────────── */
  .table-wrapper,
  div[style*="overflow-x:auto"],
  div[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
  }

  table { font-size: 12px; }
  th, td { white-space: nowrap; }

  /* ── Kanban ─────────────────────────────────────────────────── */
  .cp-kanban {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    gap: 10px !important;
    /* Undo generic grid-template-columns override */
    grid-template-columns: unset !important;
  }

  .cp-col {
    min-width: 272px !important;
    max-width: 272px !important;
    width: 272px !important;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .k-add-col-btn {
    flex-shrink: 0;
    align-self: flex-start;
    white-space: nowrap;
  }

  /* ── Gestão Projeto tab bar ─────────────────────────────────── */
  .cp-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    display: flex !important;
    flex-wrap: nowrap !important;
    padding-bottom: 1px;
    scrollbar-width: none;
  }
  .cp-tabs::-webkit-scrollbar { display: none; }
  .cp-tab { white-space: nowrap; flex-shrink: 0; }

  /* ── Dashboard: grid-2 stacked, ESCA-X & Fases reordered ─── */
  /* All content grids → single column on mobile */
  .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .form-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* Reorder: Fases do Projeto (child 2) comes before ESCA-X (child 1) */
  #module-dashboard .grid-2 > *:first-child { order: 2; } /* ESCA-X → second  */
  #module-dashboard .grid-2 > *:nth-child(2){ order: 1; } /* Fases  → first   */

  /* ── Diário posts ───────────────────────────────────────────── */
  .cp-post { padding: 14px !important; }

  /* ── Repositório: esconde colunas menos críticas no mobile ─── */
  /* Mantém: ícone, Nome, Data, Ações (remove Enviado por, Tamanho) */
  #module-repositorio table th:nth-child(3),
  #module-repositorio table td:nth-child(3),
  #module-repositorio table th:nth-child(4),
  #module-repositorio table td:nth-child(4) {
    display: none !important;
  }
  #module-repositorio table { min-width: 0 !important; width: 100%; }
  #module-repositorio .card-body { overflow-x: hidden !important; }

  /* ── Faturamento: tabela de horas adaptada ───────────────────── */
  /* Remove colunas de edição pesadas; mantém essência para leitura */
  /* Oculta: R$/h (col3 quando visível), Processo (col5 variável)  */
  /* Usa scroll interno contido — inputs de edição precisam de espaço */
  #module-faturamento-proposta .card-body[style*="overflow-x"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Input de descrição: não forçar min-width larga no mobile */
  #module-faturamento-proposta input[style*="min-width:200px"],
  #module-faturamento-proposta input[style*="min-width:190px"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  #module-faturamento-proposta select[style*="min-width:150px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Gantt: horizontal scroll ───────────────────────────────── */
  .gantt-container,
  #cp-gantt-div {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
  }

  /* Generic inline overflow-x:auto containers */
  .card-body[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  /* ── Forms: prevent iOS zoom on input focus (needs ≥16px) ─── */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* But keep labels/small text small */
  label, .form-label { font-size: 12px !important; }

  /* ── Auth box ───────────────────────────────────────────────── */
  .auth-box {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }

  /* ── Selector overlay ───────────────────────────────────────── */
  #selector-content { padding: 32px 16px 24px !important; }

  /* ── Wizard ─────────────────────────────────────────────────── */
  .wizard-box {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }

  /* ── Profile modal → full-width ─────────────────────────────── */
  #profile-modal > div {
    margin: 0 12px;
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  /* ── Health bar ─────────────────────────────────────────────── */
  .dp-health-bar { padding: 10px 12px; }

  /* ── Buttons: touch-friendly min height ─────────────────────── */
  .btn { min-height: 40px; }

  /* ── Hide wide decorative elements ─────────────────────────── */
  .cp-week-sep { margin: 12px 0; }
}

/* ── Screens ≤ 374px (iPhone SE, small Androids) ──────────────── */
/* 7 items × ~53px = 371px — just fits on 375px. Below that,      */
/* hide labels so only icons show (each item ~46px × 7 = 322px)   */
@media (max-width: 374px) {
  .mb-nav-label { display: none !important; }
  .mb-nav-icon  { font-size: 20px; }
  .mb-nav-item  { min-height: 50px; padding: 6px 0; }
}

/* ── Very small screens (≤ 320px) ─────────────────────────────── */
@media (max-width: 320px) {
  .mb-nav-icon  { font-size: 17px; }
  .mb-nav-item  { min-height: 46px; }

  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}