/* ============================================
   Locações MEQ - Estilos
   ============================================ */

:root {
  --meq-azul: #0d6efd;
  --meq-sidebar: #1e293b;
  --meq-sidebar-hover: #334155;
}

body { font-size: .95rem; }

/* --- Logo --- */
.logo-circulo {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--meq-azul); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}

/* --- Layout com sidebar --- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--meq-sidebar); color: #cbd5e1;
  display: flex; flex-direction: column;
}
.sidebar .marca {
  padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff; font-weight: 600; display: flex; align-items: center; gap: .5rem;
}
.sidebar .nav-link {
  color: #cbd5e1; border-radius: .375rem; padding: .5rem .75rem;
  display: flex; align-items: center; gap: .625rem;
}
.sidebar .nav-link:hover { background: var(--meq-sidebar-hover); color: #fff; }
.sidebar .nav-link.ativo { background: var(--meq-azul); color: #fff; }
.sidebar .nav-link i { width: 1.1rem; text-align: center; }

.conteudo { flex: 1; min-width: 0; background: #f8f9fa; }

/* Desktop: o menu fica preso na tela e NÃO acompanha a rolagem da página.
   Quem rola é só o <nav> interno, e só quando o menu não cabe na altura. */
@media (min-width: 992px) {
  .sidebar {
    position: sticky; top: 0;
    align-self: flex-start;      /* sem isso o flex estica e o sticky não gruda */
    height: 100vh;
    height: 100dvh;              /* barra do navegador no mobile/tablet */
  }
}

/* A sidebar nunca rola por inteiro: quem rola é só o <nav> do meio.
   A logo (topo) e o status do banco (rodapé) ficam sempre visíveis. */
.sidebar { overflow: hidden; }
.sidebar > .marca,
.sidebar > .p-2.border-top { flex-shrink: 0; }

/* Rolagem própria do menu (desktop e mobile), independente da página.
   - min-height:0 é obrigatório: sem isso o item flex não encolhe e o menu
     estoura a altura da sidebar em vez de rolar.
   - flex-wrap:nowrap desliga o wrap do .nav do Bootstrap, que é o que fazia
     o menu "quebrar" numa segunda coluna para o lado quando não cabia.
   - overscroll-behavior:contain impede que o scroll vaze pra página ao
     chegar no fim do menu. */
.sidebar > nav {
  flex: 1 1 auto;
  min-height: 0;
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* sem barrinha visível (Firefox / IE) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* sem barrinha visível (Chrome / Safari / Edge) */
.sidebar > nav::-webkit-scrollbar { width: 0; height: 0; }

/* itens do menu não encolhem nem são cortados na vertical */
.sidebar > nav > * { flex-shrink: 0; }

/* --- Mobile: sidebar vira offcanvas --- */
@media (max-width: 991.98px) {
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045;
             transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.aberta { transform: translateX(0); }
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1040; display: none; }
  .overlay.ativa { display: block; }
}

/* --- Tabela --- */
.table-responsive { background: #fff; border-radius: .5rem; }
.table > :not(caption) > * > * { padding: .625rem .75rem; }
.table thead th {
  background: #f1f3f5; font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .02em; color: #495057;
  white-space: nowrap;
}
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover { background: #f8f9fa; }

/* --- Cards de lista no mobile --- */
.card-item { border: 1px solid #dee2e6; border-radius: .5rem; background: #fff; }
.card-item + .card-item { margin-top: .5rem; }

/* Menu de ações (três pontinhos) não é cortado; Popper posiciona em fixed via
   data-bs-boundary=viewport, então o menu escapa do overflow da tabela. */
.btn-acoes::after { display: none; }
.dropdown-menu { z-index: 1055; }

/* --- Estado vazio --- */
.vazio { text-align: center; padding: 3rem 1rem; color: #6c757d; }
.vazio i { font-size: 2.5rem; opacity: .4; display: block; margin-bottom: .5rem; }

/* ============================================
   Sidebar com submenus (igual ao Sidebar.jsx)
   ============================================ */
.sidebar { width: 256px; }

.sidebar .marca { padding: 1.25rem 1rem; }
.sidebar .marca-link { text-decoration: none; display: block; }
.sidebar .marca-link:hover { opacity: .75; }
.sidebar .marca-logo {
  display: block; width: 100%; max-width: 150px; height: auto;
  background: #fff; border-radius: 8px; padding: 9px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.sidebar .marca-credito {
  color: #64748b; font-size: .62rem; text-align: center;
  margin-top: .4rem; letter-spacing: .02em;
}

/* botao do grupo com submenu */
.sidebar .menu-topo {
  width: 100%; background: none; border: 0; text-align: left;
  color: #cbd5e1; border-radius: .375rem; padding: .5rem .75rem;
  display: flex; align-items: center; gap: .625rem;
}
.sidebar .menu-topo:hover { background: var(--meq-sidebar-hover); color: #fff; }
.sidebar .menu-topo.destacado { background: rgba(255,255,255,.06); color: #fff; font-weight: 500; }

/* submenu recolhivel */
.sidebar .submenu {
  margin: .25rem 0 .25rem 1rem; padding-left: .75rem;
  border-left: 1px solid rgba(255,255,255,.15);
  display: flex; flex-direction: column; gap: .15rem;
}
.sidebar .sub-link { font-size: .85rem; padding: .35rem .6rem; }
.sidebar .sub-link.sub-ativo {
  background: rgba(13,110,253,.18); color: #7eb3ff; font-weight: 500;
}
.sidebar .sub-wip { opacity: .45; }

/* 3o nivel (ex.: CEO > Dashboards > Financeiro) */
.sidebar .sub-topo {
  width: 100%; text-align: left; background: none; border: 0;
  display: flex; align-items: center; gap: .5rem;
}
.sidebar .submenu-3 {
  margin: .15rem 0 .25rem .85rem; padding-left: .6rem;
  border-left: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; gap: .1rem;
}
.sidebar .neto-link { font-size: .8rem; padding: .3rem .55rem; opacity: .92; }
.sidebar .badge-wip {
  margin-left: auto; font-size: .6rem; padding: .1rem .3rem;
  border-radius: .25rem; background: rgba(255,255,255,.12); color: #cbd5e1;
}

/* status do banco no rodape */
.sidebar .status-banco { font-size: .7rem; color: #94a3b8; }
.sidebar .bolinha { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #facc15; }
.sidebar .bolinha.on { background: #22c55e; }
.sidebar .bolinha.off { background: #ef4444; }
.sidebar .bolinha.pulsando { animation: pulsa 1.5s ease-in-out infinite; }
@keyframes pulsa { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ============================================
   Topo (sino + usuário)
   ============================================ */
.topo-barra {
  background: #fff; border-bottom: 1px solid #dee2e6;
  padding: .5rem .75rem; display: flex; align-items: center; gap: .5rem;
  position: sticky; top: 0; z-index: 1030;
}
.topo-titulo { font-weight: 600; }
.avatar-ini {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--meq-azul); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 600; flex-shrink: 0;
}

/* --- Impressão dos relatórios --- */
@media print {
  .sidebar, .topo-barra, .overlay, .nao-imprime { display: none !important; }
  .conteudo { background: #fff !important; }
  .card, .table-responsive { box-shadow: none !important; border: 1px solid #dee2e6 !important; break-inside: avoid; }
  a[href]:after { content: ""; }
  body { font-size: 11pt; }
}

/* ============================================
   UX MOBILE — melhorias globais (v26)
   ============================================ */
@media (max-width: 767.98px) {
  /* Áreas de toque: botões e links com alvo mínimo confortável */
  .btn { min-height: 42px; padding-top: .5rem; padding-bottom: .5rem; }
  .btn-sm { min-height: 36px; }
  .btn-lg { min-height: 50px; }
  /* botões-ícone quadrados mantêm proporção */
  .btn.btn-icone, .btn-acao { min-width: 42px; }

  /* Inputs a 16px evitam o zoom automático do iOS ao focar */
  .form-control, .form-select, input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea.form-control { min-height: 80px; }

  /* Conteúdo com respiro nas laterais, sem desperdiçar tela */
  .conteudo .container-fluid { padding-left: .75rem; padding-right: .75rem; }

  /* Cabeçalhos de página menores no celular */
  h1.h4, .h4 { font-size: 1.25rem; }
  h1.h3, .h3 { font-size: 1.4rem; }

  /* Tabelas que não viram card: scroll horizontal suave com toque */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table-responsive table { min-width: 560px; }

  /* Modais ocupam a tela toda (mais fáceis de usar com o polegar) */
  .modal-dialog {
    margin: 0; max-width: 100%; min-height: 100%;
  }
  .modal-content {
    border-radius: 0; min-height: 100vh; border: none;
  }
  /* modal rolável: o conteúdo ocupa a tela e o corpo rola por dentro */
  .modal-dialog-scrollable { height: 100%; }
  .modal-dialog-scrollable .modal-content { min-height: 100vh; max-height: 100vh; }
  .modal-dialog-scrollable .modal-body { overflow-y: auto; }
  /* rodapé do modal fixo embaixo, botões grandes e empilhados */
  .modal-footer {
    position: sticky; bottom: 0; background: #fff;
    border-top: 1px solid #dee2e6; padding: .75rem;
    gap: .5rem;
  }
  .modal-footer .btn { flex: 1 1 auto; }
  .modal-header { position: sticky; top: 0; background: #fff; z-index: 5; }

  /* Cards de lista com mais respiro para o dedo */
  .card-item { padding: .9rem !important; }
  .card-item + .card-item { margin-top: .6rem; }

  /* Botões de ação em bloco no rodapé dos cards */
  .card-item .btn.w-100 { min-height: 44px; }

  /* Grupos de botões que estouram a largura viram roláveis */
  .btn-group.flex-wrap-mobile { flex-wrap: wrap; gap: .3rem; }

  /* Header mobile das páginas: consistente e sticky */
  .cabecalho-mobile {
    position: sticky; top: 0; z-index: 1020;
    background: #fff; border-bottom: 1px solid #dee2e6;
  }

  /* Reduz margens verticais grandes */
  .mb-4 { margin-bottom: 1rem !important; }
  .mt-4 { margin-top: 1rem !important; }
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* Filtros e barras de busca ocupam largura total */
  .filtro-bar .row > [class*="col-"] { margin-bottom: .4rem; }

  /* Dentro de modais no celular: campos de formulário ocupam a linha inteira.
     Datas, valores e selects espremidos em meia-largura são ruins de tocar.
     Vale para os col-6 e col-4; blocos de resumo podem manter 2 colunas via .manter-col. */
  .modal-body .row > [class*="col-6"]:not(.manter-col),
  .modal-body .row > [class*="col-md-3"]:not(.manter-col),
  .modal-body .row > [class*="col-md-4"]:not(.manter-col) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* exceção: blocos de totais/resumo dentro do modal continuam 2 a 2 */
  .modal-body .row.linha-resumo > [class*="col-"],
  .modal-body .row > .col-resumo {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* labels de formulário um pouco maiores no toque */
  .modal-body .form-label { font-weight: 500; margin-bottom: .25rem; }

  /* Dropdowns custom (funcionários) e checkboxes: alvo de toque maior */
  #lFuncList label, #pFuncList label { padding: .5rem .35rem !important; }
  #lFuncList input[type="checkbox"], #pFuncList input[type="checkbox"] {
    width: 20px; height: 20px; min-height: 20px;
  }
  .form-check-input { width: 1.25rem; height: 1.25rem; }
  .form-check { min-height: 1.75rem; padding-left: 1.85rem; }
  .form-check .form-check-input { margin-left: -1.85rem; }

  /* Abas (nav-tabs/pills) rolam de lado em vez de quebrar em várias linhas */
  .nav-tabs, .nav-pills {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link, .nav-pills .nav-link {
    white-space: nowrap; padding: .5rem .8rem;
  }

  /* Kanban de tarefas: no mobile, botões de mover status aparecem
     (arrastar entre colunas empilhadas é ruim no celular) */
  .mover-mobile { display: flex !important; }
  .kb-cab { position: sticky; top: 0; }

  /* Toasts: no celular ocupam a largura, acima do rodapé, fáceis de ver */
  .toast-container.position-fixed.bottom-0.end-0 {
    left: 0; right: 0; bottom: .5rem; padding: .5rem .75rem !important;
  }
  .toast-container .toast { width: 100%; max-width: 100%; }

  /* Dropdown de documentos no rodapé do modal: abre pra cima e não corta */
  .modal-footer .dropdown-menu { max-height: 60vh; overflow-y: auto; }
  .modal-footer .dropdown { flex: 1 1 auto; }
  .modal-footer .dropdown > .btn { width: 100%; }
}

/* Toque: remove o highlight azul feio ao tocar, mantém feedback sutil */
@media (hover: none) {
  .card-item:active, .linha-conta:active, .linha-loc:active, .linha-prod:active {
    background: #eef4ff;
  }
  a, button { -webkit-tap-highlight-color: rgba(13,110,253,.1); }
}

/* ===== Buscador (selects pesquisáveis) ===== */
.bsc-wrap { position: relative; }
.bsc-input { cursor: text; padding-right: 2.2rem; }
.bsc-seta { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  color: #6c757d; pointer-events: auto; cursor: pointer; font-size: .85rem; }
.bsc-wrap.aberto .bsc-seta i { transform: rotate(180deg); }
.bsc-limpar { position: absolute; right: 1.9rem; top: 50%; transform: translateY(-50%);
  color: #adb5bd; cursor: pointer; font-size: .75rem; padding: .1rem; }
.bsc-limpar:hover { color: #dc3545; }
.bsc-input { padding-right: 3.2rem; }
.bsc-painel { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 2px);
  background: #fff; border: 1px solid #d5dbe2; border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; }
.bsc-item { padding: .55rem .8rem; cursor: pointer; font-size: .95rem; }
.bsc-item:hover { background: #eef4ff; }
.bsc-item.sel { background: #0d6efd; color: #fff; }
.bsc-item.disabled { opacity: .5; cursor: not-allowed; }
.bsc-vazio { padding: .6rem .8rem; color: #8a94a6; font-size: .9rem; }
@media (max-width: 575.98px) {
  .bsc-input { font-size: 16px; } /* evita zoom no iOS */
  .bsc-painel { max-height: 50vh; }
}

/* ---- menções @ ---- */
.mencao-box { background:#fff; border:1px solid #dee2e6; border-radius:.5rem; box-shadow:0 4px 16px rgba(0,0,0,.12); z-index:3000; overflow:hidden; max-height:220px; overflow-y:auto; }
.mencao-item { padding:.5rem .75rem; cursor:pointer; font-size:.9rem; display:flex; align-items:center; gap:.4rem; }
.mencao-item:hover, .mencao-item.ativo { background:#e7f1ff; }
.mencao-item .bi-at { color:#0d6efd; }
.mencao-tag { background:#e7f1ff; color:#0a58ca; border-radius:.25rem; padding:0 .2rem; font-weight:600; }