/* MARINHOPORAI — Mobile Responsive CSS
   Aplica regras adaptadas pra telas pequenas (< 769px)
   Não afeta desktop */

@media (max-width: 768px) {

  /* ============ BASE ============ */
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* ============ HEADER (top bar fixo) ============ */
  header, .header, #header, .topbar, #topbar {
    padding: 8px 14px !important;
    height: 54px !important;
  }

  /* Botão hamburguer (criado via JS) */
  .mob-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    margin-right: 8px;
    flex-shrink: 0;
  }
  .mob-menu-btn:active { background: rgba(255,255,255,0.25); }

  /* ============ SIDEBAR (menu lateral) ============ */
  .sidebar, #sidebar, .nav-admin, #nav-admin, .menu-lateral,
  nav.sidebar, aside.sidebar, .side-nav {
    position: fixed !important;
    left: -100% !important;
    top: 54px !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: calc(100vh - 54px) !important;
    z-index: 1500 !important;
    transition: left 0.25s ease;
    box-shadow: 6px 0 24px rgba(0,0,0,0.18);
    overflow-y: auto !important;
    background: #fff;
  }
  body.mob-menu-open .sidebar,
  body.mob-menu-open #sidebar,
  body.mob-menu-open .nav-admin,
  body.mob-menu-open #nav-admin,
  body.mob-menu-open .side-nav {
    left: 0 !important;
  }

  /* Overlay quando menu aberto */
  .mob-menu-overlay {
    display: block !important;
    position: fixed;
    inset: 54px 0 0 0;
    background: rgba(0,0,0,0.4);
    z-index: 1400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  body.mob-menu-open .mob-menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* ============ MAIN CONTENT ============ */
  .main, #main, .content, #content, main, .conteudo, #conteudo {
    margin-left: 0 !important;
    padding: 14px !important;
    padding-top: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Compensar header fixo */
  body {
    padding-top: 54px !important;
  }

  /* ============ PÁGINAS ============ */
  .page {
    padding: 0 !important;
  }
  .page-title, h1 {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  .page-sub {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }

  /* ============ CARDS ============ */
  .card {
    padding: 14px !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }

  /* ============ GRIDS — viram 1 coluna ============ */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Excessão: deixar grids de calendário em 7 colunas (precisa pra ficar dom-seg-ter-quar-quin-sex-sab) */
  .cal-emb-grid, .cal-emb-mini-grid {
    grid-template-columns: repeat(7, 1fr) !important;
  }

  /* Flex que tava lado-a-lado vira empilhado */
  [style*="display:flex"][style*="gap"]:not(.cal-emb-toolbar):not(.toolbar-nodir) {
    flex-wrap: wrap !important;
  }

  /* ============ FORMS (inputs, selects, textareas) ============ */
  .inp, input[type="text"], input[type="number"], input[type="email"],
  input[type="tel"], input[type="date"], input[type="password"], select, textarea {
    font-size: 16px !important; /* evita zoom-in no iOS */
    padding: 12px 14px !important;
    min-height: 46px !important;
    border-radius: 10px !important;
  }
  textarea {
    min-height: 84px !important;
  }
  label {
    font-size: 13px !important;
  }

  /* ============ BOTÕES ============ */
  .btn, button.btn, button[type="submit"], button[type="button"] {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
  }
  .btn-s, button.btn-s {
    min-height: 38px !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }

  /* ============ TABELAS ============ */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
  }
  table th, table td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* ============ MODAIS FULL SCREEN ============ */
  [id^="modal-"], .modal {
    padding: 0 !important;
  }
  [id^="modal-"] > div, .modal > div, .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  /* O scroll fica dentro do modal */
  [id^="modal-"] > div > div:not(:first-child):not(:last-child) {
    max-height: none !important;
  }

  /* ============ PAINÉIS LATERAIS (Histórico, Calendário, etc) ============ */
  #cal-emb-painel, #wa-historico, .side-panel {
    width: 100% !important;
    right: -100% !important;
    top: 54px !important;
    height: calc(100vh - 54px) !important;
  }
  #cal-emb-painel.open, #wa-historico.open, .side-panel.open {
    right: 0 !important;
  }

  /* ============ WHATSAPP UI ============ */
  /* Lista de conversas fica full width */
  .wa-container, #wa-container {
    flex-direction: column !important;
    height: auto !important;
  }
  .wa-list, #wa-list, .wa-sidebar, #wa-sidebar,
  .conv-list, #conv-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
  }
  /* Quando uma conversa está aberta no mobile, esconde a lista */
  body.wa-active .wa-list,
  body.wa-active #wa-list,
  body.wa-active .wa-sidebar,
  body.wa-active #wa-sidebar,
  body.wa-active .conv-list,
  body.wa-active #conv-list {
    display: none !important;
  }
  body:not(.wa-active) .wa-chat,
  body:not(.wa-active) #wa-chat,
  body:not(.wa-active) .chat-area,
  body:not(.wa-active) #chat-area {
    display: none !important;
  }
  body.wa-active .wa-chat,
  body.wa-active #wa-chat,
  body.wa-active .chat-area,
  body.wa-active #chat-area {
    width: 100% !important;
    display: flex !important;
  }

  /* ============ CALENDÁRIO DE EMBARQUES ============ */
  .cal-emb-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cal-emb-toolbar h2 {
    font-size: 18px !important;
  }
  .cal-emb-grid {
    gap: 4px !important;
    padding: 4px !important;
  }
  .cal-emb-dia {
    min-height: 76px !important;
    padding: 6px 7px !important;
    border-radius: 6px !important;
  }
  .cal-emb-numdia {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }
  .cal-emb-pessoas {
    font-size: 10px !important;
    -webkit-line-clamp: 1 !important;
  }
  .cal-emb-pill {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }
  .cal-emb-cabec {
    font-size: 9px !important;
    padding: 4px 2px !important;
  }
  .cal-emb-legenda {
    font-size: 10.5px !important;
    gap: 10px !important;
  }

  /* ============ CHAT INTERNO (bolha) ============ */
  #ci-bubble, .ci-bubble {
    width: 52px !important;
    height: 52px !important;
    bottom: 76px !important;
    right: 14px !important;
  }
  #chat-interno-wrap.expanded,
  .ci-window.expanded {
    width: calc(100vw - 28px) !important;
    height: 70vh !important;
    bottom: 76px !important;
    right: 14px !important;
    left: 14px !important;
  }

  /* ============ NOTIFICAÇÕES ============ */
  .notif-panel, #notif-panel {
    width: calc(100vw - 28px) !important;
    right: 14px !important;
    max-width: 360px !important;
    top: 54px !important;
  }

  /* ============ DROPDOWNS / AUTOCOMPLETE ============ */
  .or-cli-dropdown, #ctr-venda-dropdown, #ctr-cli-dropdown,
  .auto-dropdown {
    max-height: 50vh !important;
  }

  /* ============ TOASTS ============ */
  .toast, #toast {
    bottom: 90px !important;
    left: 14px !important;
    right: 14px !important;
    max-width: calc(100vw - 28px) !important;
  }

  /* ============ MISC ============ */
  /* Esconder coisas que ficam ruins no mobile */
  .desktop-only {
    display: none !important;
  }
}

/* No desktop, esconde elementos mobile-only */
@media (min-width: 769px) {
  .mob-menu-btn {
    display: none !important;
  }
  .mob-menu-overlay {
    display: none !important;
  }
}

/* ============ PWA (modo standalone — app instalado) ============ */
@media all and (display-mode: standalone) {
  body {
    /* No iOS, padding extra pro notch */
    padding-top: calc(54px + env(safe-area-inset-top)) !important;
  }
  header, .header, #header, .topbar, #topbar {
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
    height: calc(54px + env(safe-area-inset-top)) !important;
  }
}