:root { --tap-min: 44px; }

.vertical-align-middle {
    vertical-align: middle;
}

/* Overlay de loading - fica fora do fluxo e cobre a viewport inteira */
#loadingOverlay {
  position: fixed !important; /* garante que não seja sobrescrito */
  inset: 0;                   /* top/right/bottom/left: 0 */
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.5);
  display: none;              /* escondido por padrão */
  align-items: center;
  justify-content: center;
  z-index: 2000 !important;   /* acima de tudo (acima de modals: 1055) */
  pointer-events: none;       /* só aceita cliques quando visível */
}

#loadingOverlay.is-visible {
  display: flex;
  pointer-events: all;
}

/* evita scroll de fundo enquanto o overlay está ativo */
.loading-lock {
  overflow: hidden !important;
}


.svc-card.btn { min-width: 120px; }
.svc-card.active {
  outline: 2px solid rgba(13,110,253,.7);
  background: #e7f1ff;
}

@media (max-width: 576px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    padding-left: 12px; padding-right: 12px;
  }
  .stack-sm > * { width: 100% !important; }
  .card-sm-tight .card-body { padding: 0.75rem; }
}

.table-responsive { overflow: inherit; }

@media (max-width: 480px) {
  .table-mobile thead { display: none; }
  .table-mobile tr { display: block; margin-bottom: 12px; border: 1px solid rgba(0,0,0,.1); border-radius: .5rem; overflow: hidden; }
  .table-mobile td { display: flex; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid rgba(0,0,0,.05); }
  .table-mobile td:last-child { border-bottom: 0; }
  .table-mobile td::before { content: attr(data-label); font-weight: 600; margin-right: .75rem; }
}

@media (max-width: 576px) {
  #timesChips .btn { min-width: 84px; padding: .5rem .5rem; }
  #monthCal .btn { padding: .5rem 0; }
}

.att-card { min-width: 88px; }
.att-card.active { outline: 2px solid var(--bs-primary); }

@keyframes a-shake { 20%,60%{transform:translateX(-3px)} 40%,80%{transform:translateX(3px)} }
.shake { animation: a-shake .25s; }

/* cards de atendente (rolagem horizontal) */
#na-attendants { -webkit-overflow-scrolling: touch; }
.att-card { min-width: 88px; }
.att-card.active { outline: 2px solid var(--bs-primary); }

/* chips de horários */
#na-times { max-height: 40vh; overflow-y: auto; }
#na-times .btn { min-width: 84px; margin-bottom: .25rem; }

/* Empilhamento de modais (modal filha acima da pai) */
.modal-backdrop + .modal-backdrop { z-index: 1060; }
.modal.show + .modal { z-index: 1065; }

@media (max-width: 576px) {
  #na-month {
    min-width: auto !important;
  }
  .overflow-auto.border.rounded.p-2 {
    max-height: 45vh; /* metade da tela aprox. */
  }
}

/* um toque visual quando o carrinho aparece */
#na-svc-summary.flash { animation: svcFlash .45s ease-in-out; }
@keyframes svcFlash {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  30% { box-shadow: 0 0 0.75rem rgba(0,0,0,.12); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}


/* --- Navegação do mês: botões maiores (prev/next) --- */
#na-month .month-nav-btn, .mc-wrap .month-nav-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  font-size: 20px;         /* deixa a setinha mais visível */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
}

/* --- Grade: botões dos dias mais “juntos” --- */
#na-month .mc-grid { gap: .35rem; }
#na-month .mc-grid .btn {
  padding: .4rem .25rem;
}

/* --- Modo compacto no mobile --- */
@media (max-width: 576px) {
  /* sobrescreve o inline "min-width:420px" do container */
  #na-month { min-width: 320px !important; }

  /* ativado via classe .mc-compact (ver JS abaixo) */
  #na-month.mc-compact { font-size: 0.9rem; }
  #na-month.mc-compact .mc-grid { gap: .3rem; }
  #na-month.mc-compact .mc-grid .btn {
    padding: .35rem .25rem;
  }
}

#na-month button[data-date].mc-day-active{
  background-color: #0d6efd;
  border-color: #0d6efd;
  border-radius:.5rem;
  color: #fff;
}


/* Fullscreen em mobile (<=576px) com header e footer fixos e body rolável */
@media (max-width: 575.98px) {
  /* a classe de fullscreen está no .modal-dialog */
  .modal .modal-dialog.modal-fullscreen-sm-down {
    margin: 0;              /* encosta nas bordas */
    max-width: none;
    width: 100%;
    /* usar a pilha de vh moderna pra evitar “faixa” escura no iOS */
    height: 100vh;
    height: 100svh;
    height: 100dvh;
  }

  .modal .modal-dialog.modal-fullscreen-sm-down .modal-content {
    display: flex;
    flex-direction: column;
    /* cobre a viewport inteira, evitando “vazios” escuros */
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    background: #fff;
    border-radius: 0; /* sem cantos arredondados pra não “vazar” backdrop */
    border: 0;
  }

  .modal .modal-dialog.modal-fullscreen-sm-down .modal-header,
  .modal .modal-dialog.modal-fullscreen-sm-down .modal-footer {
    flex: 0 0 auto;   /* tamanhos naturais */
    background: #fff; /* fundo branco contínuo */
  }

  .modal .modal-dialog.modal-fullscreen-sm-down .modal-body {
    flex: 1 1 auto;           /* ocupa todo o miolo */
    overflow-y: auto;         /* scroll no conteúdo */
    -webkit-overflow-scrolling: touch; /* inércia no iOS */
    background: #fff;         /* garante branco por trás do scroll */
  }
}