/* ==========================================================================
   SISTEMA ELA — CUSTOM STYLES (AdminLTE v4 Base)
   Arquivo: assets/css/app-custom.css
   Complemento enxuto ao AdminLTE v4 & Bootstrap 5.3 puro.
   Contém exclusivamente regras de negócio de palco, cronômetro e utilitários.
   ========================================================================== */

/* ── 1. TIPOGRAFIA DO SISTEMA ── */
:root {
  --font-sans: 'Sora', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

body {
  font-family: var(--font-sans);
  letter-spacing: -0.012em;
}

/* ── 2. PAINEL MESTRE & CRONÔMETRO DE PALCO ── */
.master-timer-display {
  font-family: var(--font-mono);
  font-size: 4.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .master-timer-display {
    font-size: 7.2rem;
    letter-spacing: -4px;
  }
}

.master-timer-display.over {
  color: #ef4444 !important;
  animation: masterTimerBlink 0.75s infinite;
}

@keyframes masterTimerBlink {

  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0.28;
  }
}

/* Deck de controle do cronômetro — herda a mesma cor de fundo do timer */
.hero-card {
  height: auto !important;
}

.hero-card .hero-top-header {
  padding-top: 0.5rem !important;
  padding-bottom: 0.2rem !important;
  border-bottom: none !important;
}

.hero-card .timer-clock-body {
  flex: 0 0 auto !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.4rem !important;
}

.hero-card .control-deck {
  flex: 0 0 auto !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  background-color: #00000040 !important;
}

/* Aviso de pausa acumulada no cronômetro — automático, só ocupa espaço quando houver texto */
.live-pause-notice {
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.live-pause-notice:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

.live-pause-notice:not(:empty) {
  display: block !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.15rem !important;
}

/* Indicador LED de Show Ao Vivo Pulsante (Vermelho ON AIR com espaçamento) */
.live-pulse-dot {
  width: 9px;
  height: 9px;
  background-color: #ef4444;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.95);
  vertical-align: middle;
  margin-left: 8px;
  margin-right: 2px;
}

/* Animação vibratória para o sininho quando chega nova notificação */
@keyframes bellShake {
  0% { transform: rotate(0); }
  15% { transform: rotate(18deg); }
  30% { transform: rotate(-18deg); }
  45% { transform: rotate(12deg); }
  60% { transform: rotate(-12deg); }
  75% { transform: rotate(6deg); }
  85% { transform: rotate(-6deg); }
  100% { transform: rotate(0); }
}
.bell-shake {
  animation: bellShake 0.8s ease-in-out;
  display: inline-block;
  transform-origin: top center;
}

.live-pulse-dot::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid #ef4444;
  animation: liveDotPulse 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes liveDotPulse {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.timeline-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.pulse-badge {
  animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.7);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
}

/* ── 3. INTERAÇÃO DRAG & DROP (GRADE / SORTABLE) ── */
.cursor-grab {
  cursor: grab !important;
  cursor: -webkit-grab !important;
}

.cursor-grab:active {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

/* Prevenção de seleção de texto e menu de contexto nativo em telas touch (celulares e tablets de qualquer polegada) */
.master-schedule-row:not(.locked-band),
.schedule-card-row:not(.locked-band) {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.master-schedule-row.locked-band,
.schedule-card-row.locked-band {
  cursor: default;
}

/* Alça de arrasto ampla, ergonômica e com touch-action dedicado para não soltar nem falhar */
.drag-handle {
  cursor: grab !important;
  cursor: -webkit-grab !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.drag-handle:hover {
  background-color: rgba(13, 110, 253, 0.15) !important;
  border-color: rgba(13, 110, 253, 0.35) !important;
}

.drag-handle:active {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
  transform: scale(0.96);
}

/* Linha selecionada / segurada pelo toque ou clique (a linha inteira se acende com borda iluminada) */
.master-schedule-row.sortable-chosen-row,
.schedule-card-row.sortable-chosen-row {
  position: relative;
  z-index: 1050 !important;
  outline: 2px solid var(--bs-primary, #0d6efd) !important;
  outline-offset: -1px;
  background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.16)) !important;
  box-shadow: 0 0 22px rgba(13, 110, 253, 0.55), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  animation: pulseRowBorder 1.2s infinite alternate ease-in-out;
}

@keyframes pulseRowBorder {
  0% {
    box-shadow: 0 0 12px rgba(13, 110, 253, 0.4), 0 4px 12px rgba(0, 0, 0, 0.18);
  }
  100% {
    box-shadow: 0 0 24px rgba(13, 110, 253, 0.8), 0 10px 28px rgba(0, 0, 0, 0.35);
  }
}

/* Linha em movimento ativo (sendo arrastada) */
.master-schedule-row.sortable-drag-row,
.schedule-card-row.sortable-drag-row {
  opacity: 0.96;
  cursor: grabbing !important;
  transform: scale(1.008);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35) !important;
  z-index: 1060 !important;
}

/* Linha fantasma (espaço de destino onde o card cairá) */
.sortable-ghost-row {
  opacity: 0.45 !important;
  outline: 2px dashed var(--bs-warning, #ffc107) !important;
  outline-offset: -2px;
  background-color: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.2)) !important;
}

/* ── 4. REFINAMENTOS DE RESPONSIVIDADE & CONTAINMENT ── */
html,
body {
  max-width: 100vw;
  overflow-x: clip;
}

.app-wrapper {
  min-height: 100vh;
  max-width: 100vw;
}

/* Badges numéricos do menu lateral no modo expandido normal (Desktop e Mobile) */
.sidebar-menu .sidebar-badge {
  font-size: 0.70rem;
  font-weight: 700;
  padding: 0.2em 0.5em;
  margin-left: 0.35rem;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.sidebar-menu .sidebar-badge.d-none {
  display: none !important;
}

/* Menu lateral fixo acompanhando toda a extensão vertical da tela (100vh) no Desktop */
@media (min-width: 992px) {
  .app-wrapper {
    grid-template-columns: var(--lte-sidebar-width, 210px) 1fr !important;
    transition: grid-template-columns 0.3s ease-in-out;
  }

  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--lte-sidebar-width, 210px) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1038 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out, margin-left 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }

  /* Quando o menu é recolhido no desktop: recolhe para dock mini (só ícones) e esconde a logomarca */
  body.sidebar-collapse .app-wrapper {
    grid-template-columns: 4.6rem 1fr !important;
  }

  body.sidebar-collapse .app-sidebar {
    width: 4.6rem !important;
    min-width: 4.6rem !important;
    max-width: 4.6rem !important;
    margin-left: 0 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  /* Logomarca desaparece no menu recolhido */
  body.sidebar-collapse .sidebar-brand {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Oculta textos e badges secundários no modo recolhido, mantendo apenas os ícones e badges */
  body.sidebar-collapse .sidebar-menu .nav-link p,
  body.sidebar-collapse .sidebar-menu .nav-header,
  body.sidebar-collapse .sidebar-menu .badge:not(.sidebar-badge) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* No menu recolhido: engrenagem (Sistema/Help) desaparece e os itens do submenu ficam normais como antes */
  body.sidebar-collapse .system-menu-item > .system-menu-toggle {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  body.sidebar-collapse .system-menu-item > .nav-treeview {
    display: block !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  /* Centraliza harmoniosamente os ícones na barra lateral estreita */
  body.sidebar-collapse .sidebar-menu .nav-link {
    width: 100% !important;
    padding: 0.35rem 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: 8px !important;
    position: relative !important;
  }

  body.sidebar-collapse .sidebar-menu .nav-icon {
    margin: 0 !important;
    font-size: 1.35rem !important;
  }

  /* Badges flutuantes no modo recolhido: numerozinho posicionado no topo-direito do ícone */
  body.sidebar-collapse .sidebar-menu .sidebar-badge {
    position: absolute !important;
    top: 2px !important;
    left: calc(50% + 4px) !important;
    transform: none !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0.22em 0.42em !important;
    min-width: 15px !important;
    height: 15px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 1.5px #181b1f !important;
    z-index: 5 !important;
    margin: 0 !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.sidebar-collapse .sidebar-menu .sidebar-badge.d-none {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Ajusta a altura da lista de menus quando a logomarca desaparece */
  body.sidebar-collapse .app-sidebar .sidebar-wrapper {
    height: 100vh !important;
    padding-top: 0.5rem !important;
  }

  .app-sidebar .sidebar-wrapper {
    flex: 1 1 auto !important;
    height: calc(100vh - 3.5rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Em telas pequenas, botões com classe w-100-mobile ocupam largura total */
@media (max-width: 767.98px) {
  .w-100-mobile {
    width: 100% !important;
  }

  /* ── CRONÔMETRO RESPONSIVO NO CELULAR (GANHO DE ESPAÇO & PADRONIZAÇÃO) ── */
  .hero-card .hero-top-header {
    padding-top: 0.4rem !important;
    padding-bottom: 0.15rem !important;
  }

  .hero-card .timer-clock-body {
    padding-top: 0.25rem !important;
    padding-bottom: 0.35rem !important;
  }

  .hero-card .master-timer-display {
    font-size: 3.8rem !important;
    letter-spacing: -2px !important;
    line-height: 1 !important;
  }

  .hero-card .control-deck {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Três botões principais em uma linha só no celular (INICIAR, RETOMAR, INTERVALO) */
  .main-action-deck {
    margin-bottom: 0.4rem !important;
  }

  .main-action-deck .col-4 {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .main-action-deck .btn {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    min-height: 52px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    border-radius: 8px !important;
    line-height: 1.1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .main-action-deck .btn i {
    font-size: 1.25rem !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
  }

  .main-action-deck .btn span {
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    display: block !important;
    letter-spacing: -0.2px !important;
  }

  /* Quatro botões de ajuste fino em uma linha só no celular (-5, -1, +1, +5) */
  .fine-tune-deck {
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .fine-tune-deck form {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .fine-tune-deck .btn {
    width: 100% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 32px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
  }

  .fine-tune-deck .btn i {
    font-size: 0.75rem !important;
    margin: 0 !important;
  }

  /* Botões finalizar e reiniciar proporcionais e reduzidos no celular */
  .op-secondary-actions {
    margin-bottom: 0.25rem !important;
  }

  .op-secondary-actions .btn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 12px !important;
    font-size: 0.72rem !important;
  }
}

/* ── BOTÕES DE AÇÃO SECUNDÁRIA (FINALIZAR & REINICIAR) ── */
.op-secondary-actions {
  margin-bottom: 0.25rem !important;
}

.op-secondary-actions .btn {
  min-height: 32px;
  height: 32px;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-width: 1px !important;
  border-style: solid !important;
}

.op-secondary-actions .btn i {
  font-size: 0.85rem;
}

#btnFinishShow {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  background-color: transparent !important;
}

#btnFinishShow:hover:not(:disabled) {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}

#btnRestartOp {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #f1f5f9 !important;
  background-color: transparent !important;
}

#btnRestartOp:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}

[data-bs-theme="light"] #btnRestartOp {
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: #212529 !important;
  background-color: transparent !important;
}

[data-bs-theme="light"] #btnRestartOp:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
  color: #000000 !important;
}

/* ── 5. QUADRO DE ATRAÇÃO DO CRONÔMETRO (RODAPÉ MASTER) ── */
#liveBandCardBox {
  transition: background-color 0.4s ease, color 0.4s ease;
}

#liveBandCardBox.is-waiting {
  background-color: #000000 !important;
}

#liveBandCardBox.is-live {
  background-color: #198754 !important;
  /* Mesmo verde do botão Iniciar (btn-success) */
}

#liveBandCardBox.is-live #liveBandName,
#liveBandCardBox.is-live strong {
  color: #ffffff !important;
}

#liveBandCardBox.is-live .text-secondary,
#liveBandCardBox.is-live #liveBandStartLbl {
  color: rgba(255, 255, 255, 0.85) !important;
}

#liveBandCardBox.is-paused {
  background-color: #ffc107 !important;
  /* Mesmo amarelo do botão Pausar/Retomar (btn-warning) */
}

#liveBandCardBox.is-paused #liveBandName,
#liveBandCardBox.is-paused strong,
#liveBandCardBox.is-paused .text-body-emphasis {
  color: #000000 !important;
}

#liveBandCardBox.is-paused .text-secondary,
#liveBandCardBox.is-paused #liveBandStartLbl {
  color: rgba(0, 0, 0, 0.78) !important;
}

#liveBandCardBox.is-turn {
  background-color: #2e0854 !important;
  /* Violeta do intervalo */
}

#liveBandCardBox.is-turn #liveBandName,
#liveBandCardBox.is-turn strong {
  color: #ffffff !important;
}

#liveBandCardBox.is-turn .text-secondary,
#liveBandCardBox.is-turn #liveBandStartLbl {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ── 6. BOTÃO DE AVANÇAR NO INTERVALO (VIOLETA #6b21a8) ── */
.btn-outline-purple {
  --bs-btn-color: #c084fc;
  --bs-btn-border-color: #6b21a8;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #6b21a8;
  --bs-btn-hover-border-color: #6b21a8;
  --bs-btn-focus-shadow-rgb: 107, 33, 168;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #581c87;
  --bs-btn-active-border-color: #6b21a8;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6b21a8;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6b21a8;
  color: #c084fc;
  border-color: #6b21a8;
  background-color: #212529;
}

.btn-outline-purple:hover,
#btnStopTimer.btn-outline-purple:not(:disabled):hover {
  color: #ffffff !important;
  background-color: #6b21a8 !important;
  border-color: #6b21a8 !important;
}

.btn-outline-purple:focus,
.btn-outline-purple.focus,
#btnStopTimer.btn-outline-purple:not(:disabled):focus,
#btnStopTimer.btn-outline-purple:not(:disabled).focus {
  color: #ffffff !important;
  background-color: #6b21a8 !important;
  border-color: #6b21a8 !important;
  box-shadow: 0 0 0 0.25rem rgba(107, 33, 168, 0.5) !important;
}

.btn-outline-purple:active,
.btn-outline-purple.active,
.btn-outline-purple:active:focus,
#btnStopTimer.btn-outline-purple:not(:disabled):active,
#btnStopTimer.btn-outline-purple:not(:disabled).active {
  color: #ffffff !important;
  background-color: #581c87 !important;
  border-color: #6b21a8 !important;
}

.btn-outline-purple:disabled,
.btn-outline-purple.disabled,
#btnStopTimer.btn-outline-purple:disabled {
  color: rgba(192, 132, 252, 0.5) !important;
  border-color: rgba(107, 33, 168, 0.4) !important;
  background-color: #00000073 !important;
  opacity: 0.65;
}

/* Botão Sólido Roxo / Violeta (#6b21a8) */
.btn-purple {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #6b21a8;
  --bs-btn-border-color: #6b21a8;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #581c87;
  --bs-btn-hover-border-color: #581c87;
  --bs-btn-focus-shadow-rgb: 107, 33, 168;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #4c1d95;
  --bs-btn-active-border-color: #4c1d95;
  color: #ffffff !important;
  background-color: #6b21a8 !important;
  border-color: #6b21a8 !important;
}

.btn-purple:hover {
  color: #ffffff !important;
  background-color: #581c87 !important;
  border-color: #581c87 !important;
}

.btn-purple:focus,
.btn-purple.focus {
  color: #ffffff !important;
  background-color: #581c87 !important;
  border-color: #581c87 !important;
  box-shadow: 0 0 0 0.25rem rgba(107, 33, 168, 0.5) !important;
}

.btn-purple:active,
.btn-purple.active {
  color: #ffffff !important;
  background-color: #4c1d95 !important;
  border-color: #4c1d95 !important;
}

/* ── 6. GRADE COMPLETA (TABELA DO PAINEL MASTER) ── */
.master-schedule-card .card-title {
  float: none !important;
  display: block !important;
}

/* Cabeçalho da Grade em 3 Linhas Exclusivas (Linha 1: Título | Linha 2: Descrição | Linha 3: Botões à Direita) */
.master-schedule-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 1.1rem 1.25rem 0.85rem 1.25rem !important;
}

.master-schedule-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  width: 100% !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: block !important;
}

.master-schedule-desc {
  font-size: 0.82rem !important;
  color: var(--bs-secondary-color, #94a3b8) !important;
  width: 100% !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
  display: block !important;
}

.master-schedule-tools {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 2px !important;
}

.master-schedule-tools .btn {
  white-space: nowrap !important;
  word-break: keep-all !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 5px 16px !important;
  height: 32px !important;
  border-radius: 9999px !important;
  line-height: 1.35 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Botão Circular Padrão de Adicionar (Verde com Cruz Branca) em Todo o Sistema */
.btn-circle-add {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  background-color: #198754 !important;
  border: 1px solid #198754 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

.btn-circle-add:hover {
  transform: scale(1.08) !important;
  background-color: #157347 !important;
  border-color: #146c43 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(25, 135, 84, 0.45) !important;
}

.btn-circle-add:active {
  transform: scale(0.95) !important;
}

.btn-circle-add i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

/* Botão Circular Padrão de Importar (Amarelo) */
.btn-circle-import {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  background-color: #ffc107 !important;
  border: 1px solid #ffc107 !important;
  color: #000000 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

.btn-circle-import:hover {
  transform: scale(1.08) !important;
  background-color: #ffca2c !important;
  border-color: #ffc720 !important;
  color: #000000 !important;
  box-shadow: 0 3px 8px rgba(255, 193, 7, 0.45) !important;
}

.btn-circle-import:active {
  transform: scale(0.95) !important;
}

/* Botões Circulares de Ação da Grade (Clonar, Exportar, Excluir) — Padronizados 32x32 sem borda */
.btn-circle-clone {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  background-color: #0dcaf0 !important;
  border: 0 !important;
  color: #000000 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}
.btn-circle-clone:hover {
  transform: scale(1.08) !important;
  background-color: #31d2f2 !important;
  color: #000000 !important;
  box-shadow: 0 3px 8px rgba(13, 202, 240, 0.45) !important;
}
.btn-circle-clone:active {
  transform: scale(0.95) !important;
}
.btn-circle-clone i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: #000000 !important;
}

.btn-circle-export {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  background-color: #0d6efd !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}
.btn-circle-export:hover {
  transform: scale(1.08) !important;
  background-color: #0b5ed7 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(13, 110, 253, 0.45) !important;
}
.btn-circle-export:active {
  transform: scale(0.95) !important;
}
.btn-circle-export::after {
  display: none !important;
}
.btn-circle-export i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

.btn-circle-delete {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  background-color: #dc3545 !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}
.btn-circle-delete:hover {
  transform: scale(1.08) !important;
  background-color: #bb2d3b !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(220, 53, 69, 0.45) !important;
}
.btn-circle-delete:active {
  transform: scale(0.95) !important;
}
.btn-circle-delete i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

/* Botões do Mosaico (Compartilhar e Tela Cheia) — Padronizados 32x32 circulares sem borda */
.btn-circle-share {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  background-color: #0d6efd !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}
.btn-circle-share:hover {
  transform: scale(1.08) !important;
  background-color: #0b5ed7 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(13, 110, 253, 0.45) !important;
}
.btn-circle-share:active {
  transform: scale(0.95) !important;
}
.btn-circle-share i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

.btn-circle-fullscreen {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  background-color: #475569 !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}
.btn-circle-fullscreen:hover {
  transform: scale(1.08) !important;
  background-color: #334155 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(71, 85, 105, 0.45) !important;
}
.btn-circle-fullscreen:active {
  transform: scale(0.95) !important;
}
.btn-circle-fullscreen i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

/* Botão Compacto de Ocultos do Mosaico (Ícone + Número) — Sem borda, altura 32px */
.btn-mosaic-hidden {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  background-color: #475569 !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
  font-size: 0.85rem !important;
}
.btn-mosaic-hidden:hover {
  transform: scale(1.08) !important;
  background-color: #334155 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(71, 85, 105, 0.45) !important;
}
.btn-mosaic-hidden:active {
  transform: scale(0.95) !important;
}
.btn-mosaic-hidden i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

/* Badge/Pílula Compacta de Em Andamento do Mosaico (Raio + Número) — Sem borda, altura 32px */
.btn-mosaic-inprogress {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  background-color: #ffc107 !important;
  border: 0 !important;
  color: #000000 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.btn-mosaic-inprogress:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 3px 8px rgba(255, 193, 7, 0.45) !important;
}
.btn-mosaic-inprogress i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  color: #000000 !important;
}

/* Botão de Abrir Grade nos Palcos (Branco destacado e nítido) */
.btn-outline-stage-schedule {
  color: #f8fafc !important;
  border-color: rgba(248, 250, 252, 0.45) !important;
  background-color: transparent !important;
}
.btn-outline-stage-schedule:hover {
  color: #0f172a !important;
  background-color: #f8fafc !important;
  border-color: #f8fafc !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35) !important;
}
.btn-outline-stage-schedule:active,
.btn-outline-stage-schedule:focus {
  color: #0f172a !important;
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

.btn-circle-import i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  color: #000000 !important;
}

/* Diminui levemente o tamanho da fonte apenas na grade */
.master-schedule-card .table {
  font-size: 0.85rem !important;
}

.master-schedule-card .table thead th {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  /* Cabeçalho suave, ligeiramente menos brilhante que o branco puro */
  letter-spacing: 0.3px;
}

.master-schedule-card .table tbody td {
  font-size: 0.85rem !important;
  color: #94a3b8;
  /* Cor secundária suave para valores sem destaque */
}

.master-schedule-card .table tbody td .fs-6,
.master-schedule-card .table tbody td.fs-6 {
  font-size: 0.875rem !important;
}

/* Escurece um pouco a fonte branca das atrações e horários (de #ffffff para um tom off-white suave) */
.master-schedule-card .table tbody td.text-body-emphasis,
.master-schedule-card .table tbody td .text-body-emphasis,
.master-schedule-card .table tbody td b:not(.cyan):not(.text-primary):not(.text-info):not(.text-warning):not(.text-danger):not(.text-success),
.master-schedule-card .table tbody td strong:not(.cyan):not(.text-primary):not(.text-info):not(.text-warning):not(.text-danger):not(.text-success) {
  color: #d5dbe2 !important;
}

.schedule-subcol {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── 7.1. CARDS DE RESUMO DO PAINEL MESTRE (INFO BOXES) ── */
.master-card-value {
  font-size: 1.25rem;
}

/* ── 7.2. BOTÕES DE AÇÃO DA GRADE (SEM BORDAS & ÍCONES AMPLIADOS) ── */
.band-action-cell .btn-group,
.schedule-actions-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.band-action-cell .btn,
.band-action-cell .btn-group > .btn,
.band-action-cell .btn-group > .btn:not(:first-child),
.band-action-cell .btn-group > .btn:not(:last-child),
.schedule-actions-cell .btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
  margin-left: 0 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
  line-height: 1 !important;
}

.band-action-cell .btn:hover,
.schedule-actions-cell .btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  transform: scale(1.18);
  opacity: 1 !important;
}

.band-action-cell .btn i,
.schedule-actions-cell .btn i {
  font-size: 1.15rem !important; /* Ícones ampliados e confortáveis */
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Cores vibrantes preservadas nos ícones sem borda */
.band-action-cell .btn-outline-info,
.schedule-actions-cell .btn-outline-info {
  color: #0dcaf0 !important;
}
.band-action-cell .btn-outline-primary,
.schedule-actions-cell .btn-outline-primary {
  color: #6ea8fe !important;
}
.band-action-cell .btn-outline-secondary,
.schedule-actions-cell .btn-outline-secondary {
  color: #adb5bd !important;
}
.band-action-cell .btn-outline-danger,
.schedule-actions-cell .btn-outline-danger {
  color: #ea868f !important;
}

/* Ícones de ação no cabeçalho do card no celular */
.band-main-cell .btn-xs.rounded-circle {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}

.band-main-cell .btn-xs.rounded-circle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: scale(1.15);
}

.band-main-cell .btn-xs.rounded-circle i {
  font-size: 0.95rem !important;
}

.band-main-cell .btn-outline-info {
  color: #0dcaf0 !important;
}
.band-main-cell .btn-outline-primary {
  color: #6ea8fe !important;
}
.band-main-cell .btn-outline-secondary {
  color: #adb5bd !important;
}
.band-main-cell .btn-outline-danger {
  color: #ea868f !important;
}

/* ── 8. RESPONSIVIDADE E DESIGN DOS CARDS DA GRADE NO CELULAR ── */
@media (max-width: 767.98px) {

  /* 4 Cards de Resumo no Topo (Situação, Deslocamento, Atração, Virada) */
  .master-summary-box {
    padding: 8px 10px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .master-summary-box i {
    font-size: 1.3rem !important;
  }

  .master-summary-box .master-summary-label {
    font-size: 9.5px !important;
    letter-spacing: 0.2px !important;
    margin-bottom: 2px !important;
  }

  .master-card-value {
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
  }

  .master-card-value small {
    font-size: 0.72rem !important;
  }

  /* Cabeçalho do Card da Grade em 3 linhas organizadas & Tabela Borda a Borda (0px da tela no celular) */
  .master-schedule-card,
  .master-schedule-card.rounded-4,
  #scheduleView .schedule-table-card,
  .schedule-table-card {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    max-width: calc(100% + 2rem) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }

  #scheduleView .schedule-table-card .card-body,
  #scheduleView .schedule-table-card .table-responsive,
  .schedule-table-card .card-body,
  .schedule-table-card .table-responsive {
    overflow-x: hidden !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .master-schedule-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 1rem 12px 1rem !important;
  }

  .master-schedule-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    line-height: 1.2 !important;
  }

  .master-schedule-desc {
    font-size: 0.76rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
  }

  .master-schedule-tools {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 14px !important;
    margin-bottom: 2px !important;
  }

  .btn-manage-schedule {
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px 14px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    line-height: 1 !important;
  }

  /* Tabela de Atrações em Cards Modernos - 0px das bordas da tela no celular */
  .master-preview-grid,
  .master-preview-grid tbody {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 14px 0 !important;
  }

  .master-preview-grid thead {
    display: none !important;
  }

  .master-preview-grid tr {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    background-color: #1a1e24 !important;
    border: 1px solid #2a303c !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
  }

  .master-preview-grid tr.row-live {
    border-color: #198754 !important;
    border-left: 4px solid #198754 !important;
    border-right: none !important;
    background: linear-gradient(180deg, rgba(25, 135, 84, 0.12) 0%, #1a1e24 100%) !important;
    box-shadow: 0 0 12px rgba(25, 135, 84, 0.25) !important;
  }

  /* Linha 1 do card da atração: Nome + Status/Ações */
  .master-preview-grid tr td:first-child {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 0 0 8px 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 6px !important;
  }

  /* Linha 2 do card: 3 caixas de métricas simétricas e elegantes */
  .master-preview-grid tr td:nth-child(2),
  .master-preview-grid tr td:nth-child(3),
  .master-preview-grid tr td:nth-child(4) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    margin: 0 2px !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    text-align: center !important;
  }

  .master-preview-grid tr td:nth-child(2) .schedule-subcol,
  .master-preview-grid tr td:nth-child(3) .schedule-subcol,
  .master-preview-grid tr td:nth-child(4) .schedule-subcol {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .master-preview-grid tr td:nth-child(2) .text-secondary,
  .master-preview-grid tr td:nth-child(3) .text-secondary,
  .master-preview-grid tr td:nth-child(4) .text-secondary {
    font-size: 0.68rem !important;
    letter-spacing: -0.2px !important;
  }

  /* Coluna 5 (ações desktop) oculta no celular para não criar espaço vazio */
  .master-preview-grid tr td:nth-child(5) {
    display: none !important;
  }

  /* ── GRADE COMPLETA (VIEWS/SCHEDULE.PHP) EM FORMATO DE QUADROS (CARDS) NO CELULAR ── */
  .schedule-cards-grid,
  .schedule-cards-grid tbody {
    display: block !important;
    width: 100% !important;
    padding: 6px 0 14px 0 !important;
    box-sizing: border-box !important;
  }

  .schedule-cards-grid thead {
    display: none !important;
  }

  .schedule-cards-grid tr.schedule-card-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    background-color: #1a1e24 !important;
    border: 1px solid #2a303c !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .schedule-cards-grid tr.schedule-card-row.row-live {
    border-color: #198754 !important;
    border-left: 4px solid #198754 !important;
    border-right: none !important;
    background: linear-gradient(180deg, rgba(25, 135, 84, 0.14) 0%, #1a1e24 100%) !important;
    box-shadow: 0 0 12px rgba(25, 135, 84, 0.25) !important;
  }

  .schedule-cards-grid tr.schedule-card-row.row-done {
    opacity: 0.75;
  }

  /* Caso a grade esteja sem atrações no celular */
  .schedule-cards-grid tr:not(.schedule-card-row),
  .schedule-cards-grid tr:not(.schedule-card-row) td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Linha 1 do Quadro: Nome da Atração, Handle de Arraste e Status */
  .schedule-cards-grid tr td.schedule-main-cell {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 0 0 8px 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 8px !important;
  }

  .schedule-cards-grid tr td.schedule-main-cell .schedule-band-name {
    font-size: 0.92rem !important;
  }

  /* Linha 2 do Quadro: 3 Caixinhas Métricas Simétricas */
  .schedule-cards-grid tr td.schedule-metric-cell {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 6px 3px !important;
    border: none !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
    text-align: center !important;
  }

  .schedule-cards-grid tr td.schedule-metric-cell .metric-label {
    font-size: 8.5px !important;
    color: #8c98a5 !important;
    font-weight: 700 !important;
    display: block !important;
    letter-spacing: 0.2px !important;
    margin-bottom: 1px !important;
  }

  .schedule-cards-grid tr td.schedule-metric-cell .schedule-subcol {
    gap: 3px !important;
    font-size: 0.78rem !important;
  }

  .schedule-cards-grid tr td.schedule-metric-cell strong {
    font-size: 0.82rem !important;
  }

  /* Linha 3 do Quadro: Barra de Ações no Rodapé */
  .schedule-cards-grid tr td.schedule-actions-cell {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 8px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 8px !important;
  }

  .schedule-actions-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .schedule-actions-toolbar .btn {
    padding: 3px 10px !important;
    font-size: 0.78rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── BASE & DESKTOP: GRADE COMPLETA (VIEWS/SCHEDULE.PHP) ── */
.schedule-cards-grid th {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}

.schedule-cards-grid td {
  font-size: 0.9rem;
}

.schedule-cards-grid .schedule-band-name {
  font-size: 0.95rem;
}

/* ── ESTILOS DESKTOP DO CABEÇALHO DA GRADE ── */
.btn-manage-schedule {
  min-height: 30px;
  height: 30px;
  padding: 3px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 9999px;
  white-space: nowrap;
}

/* ── 9. UNIFICAÇÃO DE FUNDO DO TOPO, SIDEBAR E LOGO (#181818) & HEADER FIXO ── */
:root {
  --ela-top-sidebar-bg: #181818;
}

.app-header,
.app-sidebar,
.app-sidebar .sidebar-brand,
.app-sidebar .sidebar-wrapper {
  background-color: var(--ela-top-sidebar-bg, #181818) !important;
}

/* Remoção total de linhas divisórias sob a logo, no topo e na sidebar para aspecto 100% homogêneo */
.app-sidebar .sidebar-brand {
  border-bottom: none !important;
  border-top: none !important;
  border: none !important;
}

.app-sidebar {
  border-right: none !important;
  box-shadow: none !important;
}

.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

@media (max-width: 991.98px) {
  #clockDisplay {
    display: none !important;
  }
}

/* ── 10. TABELA DE CHECAGEM TÉCNICA (MODO GRID TABULAR RESPONSIVO) ── */
.soundcheck-table th,
.soundcheck-table td {
  padding: 0.5rem 0.4rem;
  vertical-align: middle;
}

/* Coluna da Atração: Flexível, ocupando todo o espaço restante disponível */
.soundcheck-band-col {
  width: auto;
  min-width: 180px;
}

.soundcheck-band-cell {
  width: 100%;
}

.soundcheck-band-name {
  font-weight: 500;
  font-size: 0.88rem;
  display: inline;
  line-height: 1.3;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Bloco do Show: no Desktop cabe tudo em uma linha só */
.soundcheck-show-box {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
}

.soundcheck-show-label {
  color: #94a3b8;
  font-weight: 500;
}

.soundcheck-show-dur {
  font-weight: 600;
}

.soundcheck-show-times {
  font-weight: 600;
  color: #cbd5e1 !important;
}

/* Coluna Line Check */
.soundcheck-exempt-col {
  width: 1%;
  min-width: 76px;
  white-space: nowrap;
  text-align: center;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

/* Coluna Trava de Passagem (Cadeado) */
.soundcheck-lock-col {
  width: 1%;
  min-width: 55px;
  white-space: nowrap;
  text-align: center;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

.sc-toggle-lock {
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.sc-toggle-lock:hover {
  transform: scale(1.15);
}

/* Prioriza a largura máxima para o texto título dos 4 campos de horário sem quebrar */
.soundcheck-time-col {
  width: 1%;
  min-width: 82px;
  white-space: nowrap;
  text-align: center;
  font-family: var(--bs-font-monospace);
  font-size: 0.84rem;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

.soundcheck-actions-col {
  width: 1%;
  min-width: 105px;
  white-space: nowrap;
  text-align: center;
  padding-left: 2px !important;
  padding-right: 14px !important;
}

@media (max-width: 1249.98px) {
  /* Em telas menores que 1250px (incluindo 1222px até 992px): empilha a banda e o show para evitar transbordamento horizontal */
  .soundcheck-band-cell {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
}

.btn-toggle-detail .bi-chevron-down {
  transition: transform 0.2s ease-in-out;
}

.btn-toggle-detail[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

@media (max-width: 767.98px) {

  .soundcheck-table th,
  .soundcheck-table td {
    padding: 0.5rem 0.3rem;
    font-size: 0.82rem;
  }

  .soundcheck-band-col {
    min-width: 110px;
  }

  .soundcheck-time-col {
    width: 62px;
    min-width: 58px;
    font-size: 0.8rem;
    padding: 0.4rem 0.2rem !important;
  }

  .soundcheck-actions-col {
    width: 76px;
    min-width: 70px;
    padding: 0.4rem 0.2rem !important;
  }
}

/* ── TEMA DARK EXPLÍCITO PARA A GRADE DE CHECAGEM TÉCNICA ── */
.soundcheck-table-card {
  background-color: var(--panel, #17202d) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.soundcheck-table {
  background-color: var(--panel, #17202d) !important;
  color: #e2e8f0 !important;
  --bs-table-bg: transparent !important;
  --bs-table-color: #e2e8f0 !important;
  --bs-table-border-color: rgba(255, 255, 255, 0.07) !important;
}

.soundcheck-table thead th,
.soundcheck-table thead th.soundcheck-band-col,
.soundcheck-table thead th.soundcheck-exempt-col,
.soundcheck-table thead th.soundcheck-time-col,
.soundcheck-table thead th.soundcheck-actions-col {
  background-color: #212529 !important;
  color: #94a3b8 !important;
  border-bottom: 2px solid #373b3e !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.5px !important;
}

.soundcheck-row {
  background-color: var(--bs-card-bg, #212529) !important;
  color: #f1f5f9 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background-color 0.15s ease;
}

.soundcheck-row:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.soundcheck-row.is-pending-row {
  opacity: 0.85;
}

/* Campos de Horário Editáveis Inline na Linha Principal */
.soundcheck-inline-input {
  width: 58px;
  min-width: 56px;
  max-width: 60px;
  height: 28px;
  background-color: #1a1d20;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  color: #f8fafc;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  padding: 2px 2px;
  margin: 0 auto;
  display: block;
  transition: all 0.2s ease;
}

.soundcheck-inline-input:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background-color: #23272b;
}

.soundcheck-inline-input:focus {
  background-color: #121416;
  border-color: #0d6efd;
  outline: none;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
  color: #fff;
}

.soundcheck-inline-input.is-primary {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.4);
  background-color: rgba(96, 165, 250, 0.08);
}

.soundcheck-inline-input.saving {
  opacity: 0.6;
  border-color: #facc15 !important;
  background-color: rgba(250, 204, 21, 0.15) !important;
}

.soundcheck-inline-input.saved {
  border-color: #4ade80 !important;
  background-color: rgba(74, 222, 128, 0.2) !important;
  color: #4ade80 !important;
}

/* Atração sem passagem de som (Isenta / Dispensa de Soundcheck) */
.soundcheck-row.is-no-soundcheck-row {
  opacity: 0.72;
  background-color: rgba(255, 193, 7, 0.03) !important;
  border-left: 3px solid rgba(255, 193, 7, 0.5) !important;
}

.soundcheck-row.is-no-soundcheck-row:hover {
  opacity: 0.95;
}

.soundcheck-inline-input:disabled,
.soundcheck-inline-input.sc-input-disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: #64748b !important;
}

/* Gaveta Expansível Sub-row 100% Dark Theme Tradicional */
.soundcheck-detail-drawer {
  background-color: #181b1e !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.soundcheck-detail-box {
  background-color: #212529 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

.soundcheck-drawer-input {
  background-color: #181b1e !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
  font-size: 0.82rem;
}

.soundcheck-drawer-input:focus {
  border-color: #0d6efd !important;
  background-color: #121416 !important;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25) !important;
  color: #fff !important;
}

/* Divisor para inserção de intervalo (hover no desktop e controle tátil no mobile) */
.sc-interval-insert-row td {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: 0;
  position: relative;
  background: transparent !important;
}
.sc-insert-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12px;
  margin: -6px 0;
  z-index: 10;
  transition: all 0.2s ease;
}
.sc-divider-line {
  flex-grow: 1;
  height: 1px;
  background: transparent;
  transition: all 0.2s ease;
}
.sc-btn-insert-interval {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: #0d6efd;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 14px;
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.45);
  white-space: nowrap;
  cursor: pointer;
}
.sc-btn-insert-interval:hover {
  background: #0b5ed7;
  transform: scale(1.05);
  box-shadow: 0 4px 18px rgba(13, 110, 253, 0.65);
}

/* Hover no Desktop */
@media (hover: hover) and (pointer: fine) {
  .sc-interval-insert-row:hover .sc-divider-line,
  .soundcheck-row:hover + .soundcheck-detail-row + .sc-interval-insert-row .sc-divider-line,
  .soundcheck-detail-row:hover + .sc-interval-insert-row .sc-divider-line {
    background: rgba(13, 110, 253, 0.5);
    height: 2px;
  }
  .sc-interval-insert-row:hover .sc-btn-insert-interval,
  .soundcheck-row:hover + .soundcheck-detail-row + .sc-interval-insert-row .sc-btn-insert-interval,
  .soundcheck-detail-row:hover + .sc-interval-insert-row .sc-btn-insert-interval {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
}

/* Telas Touch / Mobile */
@media (hover: none), (max-width: 768px) {
  .sc-insert-divider {
    height: 24px;
    margin: 2px 0;
  }
  .sc-divider-line {
    background: rgba(255, 255, 255, 0.08);
  }
  .sc-btn-insert-interval {
    opacity: 0.85;
    pointer-events: auto;
    transform: scale(0.92);
    background: rgba(33, 37, 41, 0.9);
    border: 1px solid rgba(13, 110, 253, 0.6);
    color: #6ea8fe !important;
  }
  .sc-btn-insert-interval:active {
    background: #0d6efd;
    color: #fff !important;
    opacity: 1;
  }
}

/* Card e linha de Intervalo Ativo na Grade */
.soundcheck-interval-row td {
  border-top: 1px dashed rgba(255, 193, 7, 0.35) !important;
  border-bottom: 1px dashed rgba(255, 193, 7, 0.35) !important;
  padding: 8px 12px !important;
  background-color: rgba(255, 193, 7, 0.04) !important;
}
.interval-badge-card {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: 8px;
  padding: 8px 14px;
}

.soundcheck-drawer-input.saved {
  border-color: #4ade80 !important;
  background-color: rgba(74, 222, 128, 0.15) !important;
}

/* Toast de Auto-Salvo Flutuante Discreto */
.soundcheck-autosave-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1080;
  background: rgba(33, 37, 41, 0.95);
  border: 1px solid #22c55e;
  color: #4ade80;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all 0.25s ease-in-out;
}

.soundcheck-autosave-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── 15. GERADOR AUTOMÁTICO DE PASSAGEM DE SOM (CASCATA REVERSA) ── */
#soundcheckView .soundcheck-generator-card {
  background-color: var(--bs-card-bg, #212529) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px;
}

.soundcheck-gen-col {
  width: 120px;
}

.soundcheck-gen-col input {
  background-color: #1a1d20 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f8fafc !important;
  font-weight: 700 !important;
}

.soundcheck-gen-col input:focus {
  border-color: #0d6efd !important;
  background-color: #121416 !important;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25) !important;
  color: #fff !important;
}

@media (max-width: 1199.98px) {
  .soundcheck-gen-col {
    width: calc(33.333% - 6px);
  }
}

@media (max-width: 767.98px) {
  .soundcheck-gen-col {
    width: calc(50% - 6px);
  }

  .soundcheck-gen-action {
    width: 100%;
    margin-top: 6px;
  }

  .soundcheck-gen-action button {
    width: 100%;
    justify-content: center;
  }
}

/* ── 16. RESPONSIVIDADE MOBILE DA CHECAGEM TÉCNICA (FORMATO DE CARDS / QUADROS) ── */
.sc-mobile-field-label {
  display: none !important;
}

@media (max-width: 881.98px) {
  /* Tabela de Passagem de Som Borda a Borda (0px da tela no celular) */
  #soundcheckView .soundcheck-table-card,
  .soundcheck-table-card {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    max-width: calc(100% + 2rem) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .soundcheck-table-card .table-responsive {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* No modo responsivo / cards: remove os títulos de cabeçalho da tabela que ficavam tortos e fora de contexto */
  #soundcheckTable>thead {
    display: none !important;
  }

  #soundcheckTable {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-collapse: separate !important;
  }

  #soundcheckTable>tbody {
    display: block !important;
    width: 100% !important;
  }

  .soundcheck-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 10px 14px 8px 14px !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: #1a1e24 !important;
  }

  .soundcheck-row.is-no-soundcheck-row {
    border-left: 3px solid rgba(255, 193, 7, 0.6) !important;
    border-right: none !important;
  }

  .soundcheck-interval-row td {
    padding: 8px 14px !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
  }

  .sc-interval-insert-row td {
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 0 14px !important;
  }

  /* Linha 1 no Responsivo: Nome da Atração + Tempo do Show */
  .soundcheck-row>.soundcheck-band-col {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    padding: 0 0 6px 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-bottom: 2px !important;
    box-sizing: border-box !important;
  }

  .soundcheck-band-header-line {
    font-size: 0.92rem !important;
  }

  /* Linha 2 no Responsivo: Os 4 campos de horário ocupando 25% (1fr) cada */
  .soundcheck-row>.soundcheck-time-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .soundcheck-row>.soundcheck-time-col .sc-mobile-field-label {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    margin-bottom: 3px !important;
  }

  .soundcheck-row>.soundcheck-time-col .soundcheck-inline-input {
    width: 100% !important;
    max-width: 100% !important;
    padding: 3px 2px !important;
    font-size: 0.82rem !important;
    height: 32px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Linha 3 no Responsivo: Line Check (esquerda), Trava (centro) e Barra de Ações (direita) */
  .soundcheck-row>.soundcheck-exempt-col {
    grid-column: 1 / 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 4px 2px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .soundcheck-row>.soundcheck-lock-col {
    grid-column: 3 / 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 2px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .soundcheck-row>.soundcheck-actions-col {
    grid-column: 4 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 4px 0 0 0 !important;
    border: none !important;
    border-top: none !important;
    width: 100% !important;
    margin-top: 4px !important;
    box-sizing: border-box !important;
  }

  .soundcheck-row>.soundcheck-actions-col .btn-group {
    width: auto !important;
    display: inline-flex !important;
    box-sizing: border-box !important;
  }

  .soundcheck-row>.soundcheck-actions-col .btn {
    padding: 4px 9px !important;
    font-size: 0.76rem !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Gaveta expansível de detalhes técnicos */
  .soundcheck-detail-row {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .soundcheck-detail-row>td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  .soundcheck-detail-drawer {
    padding: 10px 14px !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── 17. BOTÕES DE AÇÃO RÁPIDA (ÍCONES DO MOSAICO E PAINEL MESTRE) ── */
.mosaic-card-action-btn {
  line-height: 1;
  text-decoration: none;
  opacity: 0.65;
  padding: 3px 5px !important;
  color: var(--bs-secondary-color, #94a3b8) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.mosaic-card-action-btn:hover {
  opacity: 1;
  color: var(--bs-body-color, #ffffff) !important;
  transform: scale(1.18);
}

/* ── 18. EQUALIZAÇÃO E ALINHAMENTO DO CARD DE EQUIPE TÉCNICA (PAINEL MESTRE) ── */
#teamContactCard .card-header::after {
  display: none !important;
}

#teamContactCard .card-header {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  min-height: auto !important;
}

#teamContactCard.collapsed-card .card-header {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

#teamContactCard .card-tools {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Alinhamento estrito com o rodapé do Hero Timer em telas desktop (>= 1200px) */
@media (min-width: 1200px) {
  #heroRow {
    align-items: stretch;
  }
  .master-hero-right-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  #teamContactCard {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    margin-bottom: 0;
  }
  #teamContactCard .card-header {
    flex-shrink: 0;
  }
  #teamContactCard .team-contact-card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

/* Scrollbar fina, elegante e translúcida no corpo da Equipe Técnica */
.team-contact-card-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.team-contact-card-body::-webkit-scrollbar {
  width: 6px;
}
.team-contact-card-body::-webkit-scrollbar-track {
  background: transparent;
}
.team-contact-card-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.team-contact-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
}

/* ── 19. STICKY HUD FLUTUANTE DO CRONÔMETRO (PAINEL MESTRE) ── */
#masterStickyHud {
  position: fixed;
  top: 60px;
  right: 1.5rem;
  z-index: 1045;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1.25rem;
  margin: 0;
  display: none !important;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
}

@media (max-width: 767.98px) {
  #masterStickyHud {
    top: 54px;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0.4rem 0.75rem;
  }
}

#masterStickyHud.is-visible {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  animation: hudSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hudSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sticky-hud-timer {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── 20. LINKS CLICÁVEIS DE ATRAÇÕES NA GRADE ── */
.band-name-link {
  color: var(--bs-body-emphasis-color, #f8fafc);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.band-name-link:hover {
  color: var(--bs-primary, #3b82f6) !important;
  text-decoration: underline;
}

/* ── 21. GAVETA LATERAL OFFCANVAS DE FICHA TÉCNICA E PASSAGEM DE SOM ── */
.offcanvas-band-details {
  width: 95vw !important;
  max-width: 540px !important;
  background-color: var(--bs-body-bg, #0f172a) !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.55);
}

.offcanvas-band-details .nav-tabs .nav-link {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, #94a3b8);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.65rem 1rem;
}

.offcanvas-band-details .nav-tabs .nav-link.active {
  color: var(--bs-primary, #3b82f6);
  background: transparent;
  border-bottom-color: var(--bs-primary, #3b82f6);
}

.offcanvas-band-details .contact-item-box {
  background: var(--bs-tertiary-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

/* ── 22. BADGE VISUAL DE DATA DA GRADE / PALCO COM DIA DA SEMANA ── */
.stage-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.65rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  background: rgba(13, 110, 253, 0.14);
  color: #0d6efd;
  border: 1px solid rgba(13, 110, 253, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .stage-date-badge {
  background: rgba(13, 110, 253, 0.22);
  color: #6ea8fe;
  border-color: rgba(110, 168, 254, 0.45);
}

.stage-date-badge .dow-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  background: rgba(13, 110, 253, 0.2);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

[data-bs-theme="dark"] .stage-date-badge .dow-tag {
  background: rgba(110, 168, 254, 0.25);
  color: #ffffff;
}

/* ── 23. LINHA DA DATA DO PALCO NO MOSAICO (CLEAN, SEM FUNDO/BORDA, ALINHADA À ESQUERDA) ── */
.mosaic-date-line {
  line-height: 1.2;
  padding: 0;
  margin: 0;
}

.mosaic-date-text {
  font-size: 0.76rem;
  font-weight: 500;
  color: #bfdbfe; /* azul clarinho suave e nítido */
  letter-spacing: 0.02em;
}

[data-bs-theme="light"] .mosaic-date-text {
  color: #1e3a8a;
}

.mosaic-dow-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #2563eb; /* destaque azul vívido */
  color: #ffffff;
  padding: 0.08rem 0.38rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  display: inline-block;
}

/* ── 24. UX / ACESSIBILIDADE DE PLACEHOLDERS (DARK MODE & HOVER/FOCUS) ── */
/* Atenuação da cor do placeholder no tema Dark para evitar confusão de "campo já preenchido" */
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea::placeholder,
[data-bs-theme="dark"] input::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

/* Também adiciona transição suave no tema light */
.form-control::placeholder,
textarea::placeholder,
input::placeholder {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ao passar o mouse por cima do campo (hover): atenua suavemente para sinalizar interação */
[data-bs-theme="dark"] .form-control:hover::placeholder,
[data-bs-theme="dark"] textarea:hover::placeholder,
[data-bs-theme="dark"] input:hover::placeholder {
  opacity: 0.25;
}

.form-control:hover::placeholder,
textarea:hover::placeholder,
input:hover::placeholder {
  opacity: 0.4;
}

/* Ao clicar/focar no campo (desktop) ou tocar na tela (mobile): o placeholder some imediatamente */
.form-control:focus::placeholder,
textarea:focus::placeholder,
input:focus::placeholder,
[data-bs-theme="dark"] .form-control:focus::placeholder,
[data-bs-theme="dark"] textarea:focus::placeholder,
[data-bs-theme="dark"] input:focus::placeholder {
  opacity: 0 !important;
}

/* ── 25. DEMANDAS DE PRODUÇÃO (KANBAN) & BOTÕES COMPACTOS ── */
.btn-xs {
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.25;
  border-radius: 0.375rem;
}

.demand-card {
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  cursor: pointer;
}

.demand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.12) !important;
}

.kanban-column {
  min-height: 420px;
}

/* ── 26. ÚLTIMA ATRAÇÃO DA GRADE — TEMPO DE VIRADA IGNORADO ── */
.turn-ignored-last {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 1px 4px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.turn-ignored-last:hover,
.turn-ignored-last:focus {
  background-color: rgba(220, 53, 69, 0.08);
}

.turn-ignored-last .turn-text,
.turn-ignored-last.band-turn-val,
.turn-ignored-last .turn-adjust-text {
  text-decoration: line-through !important;
  text-decoration-color: #dc3545 !important;
  text-decoration-thickness: 2.5px !important;
  color: #dc3545 !important;
  opacity: 0.85;
}

.turn-ignored-last .turn-info-icon {
  font-size: 0.75rem;
  color: #dc3545;
  margin-left: 4px;
  display: inline-block;
  opacity: 0.9;
}

/* No campo de input do modal (quando for última banda) */
.turn-ignored-input {
  text-decoration: line-through !important;
  text-decoration-color: #dc3545 !important;
  text-decoration-thickness: 2px !important;
  color: #dc3545 !important;
  border-color: rgba(220, 53, 69, 0.6) !important;
  background-color: rgba(220, 53, 69, 0.05) !important;
}