/* Componentes Marque Quadras — spec em docs/design/README.md (arquivo 01). */

/* ---------- Tipografia ---------- */
.mq-hero-title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
@media (min-width: 992px) { .mq-hero-title { font-size: 48px; } }
.mq-screen-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.mq-nav-title { font-size: 17px; font-weight: 700; margin: 0; }
.mq-card-title { font-size: 17px; font-weight: 700; margin: 0; }
.mq-section-title { font-size: 16px; font-weight: 600; margin: 0; }
.mq-step-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.mq-meta { font-size: 13px; font-weight: 500; color: var(--bs-secondary-color); }
.mq-kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.mq-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.mq-price { color: var(--bs-primary-text-emphasis); font-weight: 700; }

/* ---------- Layout ---------- */
.mq-page { padding: 0 16px; }
.mq-stack { display: flex; flex-direction: column; gap: 20px; }
.mq-scroll-x { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.mq-scroll-x::-webkit-scrollbar { display: none; }
.mq-scroll-x > * { flex: 0 0 auto; }
.mq-admin { background: var(--mq-admin-bg); min-height: 100dvh; }
.mq-icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }

/* ---------- Header do tenant ---------- */
.mq-tenant-header { height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 1020; }
@media (min-width: 992px) { .mq-tenant-header { height: 64px; padding: 0 70px; } }
.mq-tenant-logo { max-height: 40px; max-width: 160px; object-fit: contain; display: block; }
.mq-tenant-logo-fallback { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 10px; background: var(--bs-secondary); color: var(--mq-on-secondary); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.mq-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 0; }
.mq-avatar-sm { width: 40px; height: 40px; font-size: 14px; }

/* ---------- Chip de esporte ---------- */
.mq-chip { height: 44px; padding: 0 16px; border-radius: var(--bs-border-radius-pill); border: 1px solid var(--bs-border-color); background: var(--mq-card-bg); color: var(--bs-body-color); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.mq-chip:hover { background: var(--bs-tertiary-bg); }
.mq-chip.active { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--mq-on-primary); }
.mq-chip:disabled, .mq-chip.disabled { border-style: dashed; color: var(--bs-secondary-color); background: transparent; cursor: not-allowed; }
.mq-chip-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.mq-chip-neutral.active { background: var(--bs-body-color); border-color: var(--bs-body-color); color: var(--bs-body-bg); }

/* Chip de data 64×64 */
.mq-date-chip { width: 64px; height: 64px; border-radius: var(--bs-border-radius); border: 1px solid var(--bs-border-color); background: var(--mq-card-bg); color: var(--bs-body-color); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.mq-date-chip .dow { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--bs-secondary-color); }
.mq-date-chip .day { font-size: 18px; font-weight: 800; line-height: 1; }
.mq-date-chip.active { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--mq-on-primary); }
.mq-date-chip.active .dow { color: var(--mq-on-primary); opacity: .9; }

/* ---------- Badges ---------- */
.mq-badge { height: 28px; padding: 0 10px; border-radius: var(--bs-border-radius-pill); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mq-badge-lg { height: 32px; padding: 0 12px; font-size: 13px; }
.mq-badge-sm { height: 24px; padding: 0 10px; font-size: 12px; font-weight: 600; }
.mq-badge-free, .mq-badge-confirmed { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.mq-badge-busy, .mq-badge-neutral { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.mq-badge-blocked { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.mq-badge-pending { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.mq-badge-cancelled { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); text-decoration: line-through; }
.mq-badge-primary { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.mq-badge-overlay { position: absolute; top: 10px; left: 10px; height: 24px; background: var(--mq-card-bg); color: var(--bs-body-color); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Indicador ao vivo ---------- */
@keyframes mq-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
.mq-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-success); display: inline-block; flex: 0 0 auto; animation: mq-pulse 1.6s ease-out infinite; }
.mq-live-dot-lg { width: 10px; height: 10px; }
.mq-live-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--bs-border-radius); background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); font-size: 14px; font-weight: 600; text-decoration: none; min-height: 48px; }
.mq-live-banner:hover { color: var(--bs-success-text-emphasis); filter: brightness(.98); }
.mq-live-banner .text { flex: 1; }

/* ---------- Card de quadra ---------- */
.mq-court-card { overflow: hidden; }
.mq-court-photo { height: 150px; position: relative; background: repeating-linear-gradient(135deg, var(--bs-tertiary-bg) 0 10px, var(--bs-border-color) 10px 11px); }
@media (min-width: 992px) { .mq-court-photo { height: 190px; } }
.mq-court-photo img { width: 100%; height: 100%; object-fit: cover; }
.mq-court-card .card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Botão de horário ---------- */
.mq-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mq-slot { position: relative; height: 60px; border-radius: var(--bs-border-radius-sm); border: 1px solid var(--bs-success-border-subtle); background: var(--bs-success-bg-subtle); color: var(--bs-body-color); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 0; }
.mq-slot .time { font-size: 15px; font-weight: 700; line-height: 1.1; }
.mq-slot .price { font-size: 12px; font-weight: 600; color: var(--bs-success-text-emphasis); }
.mq-slot.prime { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning); }
.mq-slot.prime .price { color: var(--bs-warning-text-emphasis); }
.mq-slot.prime::after { content: "\F586"; font-family: bootstrap-icons; font-size: 9px; position: absolute; top: 4px; right: 6px; color: var(--bs-warning-text-emphasis); } /* bi-star-fill */
.mq-slot.selected { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--mq-on-primary); outline: 3px solid var(--bs-primary-bg-subtle); }
.mq-slot.selected .price { color: var(--mq-on-primary); }
.mq-slot.selected::after { color: var(--mq-on-primary); }
.mq-slot:disabled { background: var(--bs-tertiary-bg); border-color: var(--bs-tertiary-bg); cursor: not-allowed; color: var(--bs-secondary-color); }
.mq-slot:disabled .time { text-decoration: line-through; font-weight: 600; }
.mq-slot:disabled .price { font-size: 11px; color: var(--bs-secondary-color); }
.mq-slot-sm { height: 48px; }

/* Segmentado / duração */
.mq-segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.mq-segment > button { height: 48px; border-radius: var(--bs-border-radius-sm); border: 1px solid var(--bs-border-color); background: var(--mq-card-bg); color: var(--bs-body-color); font-weight: 600; }
.mq-segment > button.active { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--mq-on-primary); font-weight: 700; }
.mq-segment-neutral > button.active { background: var(--bs-body-color); border-color: var(--bs-body-color); color: var(--bs-body-bg); }

/* Card selecionável (quadra no Reservar, papel na Equipe) */
.mq-select-card { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--mq-card-bg); padding: 14px 16px; text-align: left; width: 100%; color: var(--bs-body-color); }
.mq-select-card.active { border: 2px solid var(--bs-primary); background: var(--bs-primary-bg-subtle); padding: 13px 15px; }

/* ---------- Barra inferior fixa ---------- */
.mq-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--mq-card-bg); border-top: 1px solid var(--bs-border-color); box-shadow: var(--mq-shadow-bottom-bar); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; }
.mq-bottom-bar .summary { flex: 1; min-width: 0; }
.mq-bottom-bar .summary-text { font-size: 13px; font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-bottom-bar .total { font-size: 18px; font-weight: 800; }
.mq-bottom-bar .btn { height: 48px; padding: 0 20px; }
/* Espaço para a barra fixa. Mais específico que .mq-container (padding: 0 16px), que vem depois e zerava isto. */
.mq-has-bottom-bar, .mq-container.mq-has-bottom-bar { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

/* ---------- Bottom sheet (offcanvas-bottom) ---------- */
.offcanvas.mq-sheet { height: auto; max-height: 92dvh; border-radius: 12px 12px 0 0; padding: 10px 16px 40px; border: 0; }
.mq-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--bs-border-color); margin: 0 auto 12px; }
.offcanvas-backdrop.show { opacity: .5; }
.offcanvas-end.mq-drawer { --bs-offcanvas-width: 420px; box-shadow: var(--mq-shadow-offcanvas); }

/* ---------- Contador de hold ---------- */
.mq-hold { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--bs-border-radius); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: 14px; font-weight: 600; }
.mq-hold .label { flex: 1; }
.mq-hold .clock { font-size: 20px; font-weight: 800; }
.mq-hold.warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.mq-hold.expired { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* ---------- KPI ---------- */
.mq-kpi { padding: 14px 16px; }
.mq-kpi .label { font-size: 12px; font-weight: 500; color: var(--bs-secondary-color); }
.mq-kpi .delta { font-size: 12px; font-weight: 600; color: var(--bs-success-text-emphasis); }
.mq-kpi .progress { height: 8px; }

/* ---------- Bloco da agenda ---------- */
.mq-agenda-block { border-radius: var(--bs-border-radius-sm); border-left: 4px solid var(--bs-primary); background: var(--bs-primary-bg-subtle); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; color: var(--bs-body-color); }
.mq-agenda-block .range { font-size: 12px; font-weight: 700; }
.mq-agenda-block .who { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-agenda-block .what { font-size: 11px; color: var(--bs-secondary-color); }
.mq-agenda-block.pending { background: var(--bs-warning-bg-subtle); border-left-color: var(--bs-warning); }
.mq-agenda-block.pending .what { color: var(--bs-warning-text-emphasis); }
.mq-agenda-block.blocked { background: repeating-linear-gradient(135deg, var(--bs-tertiary-bg) 0 6px, var(--bs-border-color) 6px 7px); border-left-color: var(--bs-secondary-color); }
.mq-agenda-block.class { background: var(--bs-tertiary-bg); border-left-color: var(--bs-secondary); }
.mq-agenda-free { border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-sm); background: transparent; color: var(--bs-secondary-color); display: flex; align-items: center; justify-content: center; min-height: 44px; }

/* ---------- Status card (Agora) ---------- */
.mq-status-card { border-left: 4px solid var(--bs-border-color); }
.mq-status-card.free { border-left-color: var(--bs-success); }
.mq-status-card.busy { border-left-color: var(--bs-secondary-color); }
.mq-status-card.blocked { border-left-color: var(--bs-danger); }

/* ---------- Empty state ---------- */
.mq-empty { border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 28px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mq-empty .icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.mq-empty .title { font-size: 14px; font-weight: 700; }
.mq-empty .text { font-size: 13px; color: var(--bs-secondary-color); }
.mq-empty .btn { height: 40px; min-height: 40px; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border: 0; }

/* ---------- Skeleton ---------- */
@keyframes mq-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.mq-skeleton { border-radius: var(--bs-border-radius-sm); background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-border-color) 50%, var(--bs-tertiary-bg) 75%); background-size: 200% 100%; animation: mq-shimmer 1.6s linear infinite; }

/* ---------- Toast ---------- */
.mq-toast-container { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1090; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.mq-toast { pointer-events: auto; width: 100%; max-width: 420px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--bs-border-radius); background: var(--mq-card-bg); border: 1px solid var(--bs-border-color); box-shadow: var(--mq-shadow-toast); font-size: 14px; font-weight: 500; }
.mq-toast > .bi:first-child { font-size: 18px; }
.mq-toast .msg { flex: 1; }

/* ---------- FAB ---------- */
.mq-fab { position: fixed; right: 16px; bottom: calc(100px + env(safe-area-inset-bottom)); height: 52px; padding: 0 20px; border-radius: var(--bs-border-radius-pill); box-shadow: var(--mq-shadow-fab); z-index: 1025; }

/* ---------- Navegação admin ---------- */
.mq-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(84px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--mq-card-bg); border-top: 1px solid var(--bs-border-color); display: flex; z-index: 1030; }
.mq-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); text-decoration: none; }
.mq-bottom-nav a .bi { font-size: 22px; }
.mq-bottom-nav a.active { color: var(--bs-primary-text-emphasis); font-weight: 700; }
.mq-sidebar { width: 232px; flex: 0 0 232px; background: var(--mq-card-bg); border-right: 1px solid var(--bs-border-color); height: 100dvh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; }
.mq-sidebar a { height: 44px; border-radius: var(--bs-border-radius-sm); padding: 0 12px; display: flex; align-items: center; gap: 10px; color: var(--bs-body-color); text-decoration: none; font-size: 14px; font-weight: 500; }
.mq-sidebar a:hover { background: var(--bs-tertiary-bg); }
.mq-sidebar a.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 700; }

/* ---------- Layout de páginas públicas ---------- */
.mq-container { padding: 0 16px; }
@media (min-width: 992px) { .mq-container { max-width: 1140px; margin: 0 auto; padding: 0; } }
.mq-tenant-header .mq-header-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 992px) {
  .mq-tenant-header { padding: 0; }
  .mq-tenant-header .mq-header-inner { max-width: 1140px; margin: 0 auto; }
}
.mq-desktop-nav { display: none; gap: 28px; align-items: center; }
@media (min-width: 992px) { .mq-desktop-nav { display: flex; } }
.mq-desktop-nav a { color: var(--bs-body-color); text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.mq-desktop-nav a:hover { color: var(--bs-primary-text-emphasis); }

.mq-hero { display: flex; flex-direction: column; gap: 14px; padding: 20px 0 4px; }
.mq-hero-photo { display: none; }
@media (min-width: 992px) {
  .mq-hero { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; padding: 48px 0 16px; }
  .mq-hero-photo { display: block; aspect-ratio: 16 / 10; border-radius: var(--bs-border-radius); overflow: hidden; background: repeating-linear-gradient(135deg, var(--bs-tertiary-bg) 0 10px, var(--bs-border-color) 10px 11px); }
  .mq-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
  .mq-hero-actions { flex-direction: row !important; }
  .mq-hero-actions > * { flex: 1; }
}
.mq-court-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .mq-court-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .mq-court-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* Navbar com voltar (telas internas) */
.mq-navbar { height: 56px; padding: 0 8px; display: flex; align-items: center; gap: 4px; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 1020; }
.mq-navbar .mq-nav-title { flex: 1; }
.mq-navbar .btn-link { color: var(--bs-body-color); }
.mq-navbar .mq-navbar-end { padding-right: 8px; }

.mq-divider { display: flex; align-items: center; gap: 12px; color: var(--bs-secondary-color); font-size: 13px; }
.mq-divider::before, .mq-divider::after { content: ""; flex: 1; height: 1px; background: var(--bs-border-color); }

/* ---------- Painel admin ---------- */
.mq-admin-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px; }
.mq-admin-main { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 20px; }
/* Desktop: conteúdo centralizado (--mq-admin-width) ou, em telas de grade (Agenda), ocupando toda a largura. */
@media (min-width: 992px) {
  .mq-admin-content { --mq-admin-width: 960px; --mq-admin-gutter: 28px; }
  .mq-admin-content.wide { --mq-admin-width: 100vw; }
  .mq-admin-header { height: 72px; border-bottom: 1px solid var(--bs-border-color); background: var(--mq-card-bg); position: sticky; top: 0; z-index: 1010;
    padding: 0 max(var(--mq-admin-gutter), calc((100% - var(--mq-admin-width)) / 2 + var(--mq-admin-gutter))); }
  .mq-admin-main { padding: 24px var(--mq-admin-gutter); max-width: var(--mq-admin-width); margin: 0 auto; }
  .mq-admin-content.wide .mq-admin-main { max-width: none; }
}
.mq-form-label { font-size: 12px; font-weight: 500; color: var(--bs-secondary-color); margin-bottom: 4px; display: block; }
.mq-field-error { font-size: 12px; font-weight: 600; color: var(--bs-danger-text-emphasis); margin-top: 4px; }
.mq-card-section { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mq-card-section > .title { font-size: 15px; font-weight: 700; }
.mq-dashed-card { border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mq-day-toggle { width: 40px; height: 40px; border-radius: var(--bs-border-radius-sm); border: 1px solid var(--bs-border-color); background: var(--mq-card-bg); color: var(--bs-body-color); font-size: 13px; font-weight: 700; }
.mq-day-toggle.active { background: var(--bs-body-color); border-color: var(--bs-body-color); color: var(--bs-body-bg); }
.mq-cond-chip { height: 24px; padding: 0 8px; border-radius: var(--bs-border-radius-pill); background: var(--bs-tertiary-bg); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.mq-cond-chip.prime { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.mq-list-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 18px; }
.mq-drag-over { outline: 2px dashed var(--bs-primary); outline-offset: 2px; }
.form-switch .form-check-input { width: 40px; height: 24px; }
.mq-time-input { min-height: 40px; height: 40px; flex: 1 1 0; width: 0; min-width: 0; max-width: 120px; padding-left: 8px; padding-right: 8px; }
/* Em telas estreitas o ícone nativo do relógio come os minutos; o seletor continua abrindo ao tocar. */
.mq-time-input::-webkit-calendar-picker-indicator { display: none; }
.mq-time-input { padding-left: 6px; padding-right: 6px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Bottom sheet próprio ---------- */
@keyframes mq-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mq-fade-in { from { opacity: 0; } to { opacity: 1; } }
.mq-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; animation: mq-fade-in .2s ease-out; }
.mq-sheet-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1055; max-height: 92dvh; overflow-y: auto; background: var(--mq-card-bg); border-radius: 12px 12px 0 0; padding: 10px 16px calc(40px + env(safe-area-inset-bottom)); animation: mq-sheet-in .3s ease-out; }
@media (min-width: 576px) { .mq-sheet-panel { max-width: 480px; margin: 0 auto; } }

/* ---------- Reservar ---------- */
.mq-step { display: flex; flex-direction: column; gap: 12px; }
.mq-step-head { display: flex; align-items: center; gap: 8px; }
.mq-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--bs-body-color); color: var(--bs-body-bg); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Drawer (lateral no desktop, sheet no celular) ---------- */
.mq-drawer-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1055; max-height: 92dvh; display: flex; flex-direction: column; background: var(--mq-card-bg); border-radius: 12px 12px 0 0; padding-top: 10px; animation: mq-sheet-in .3s ease-out; }
.mq-drawer-head { padding: 0 16px 12px; }
.mq-drawer-body { padding: 0 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.mq-drawer-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bs-border-color); display: flex; align-items: center; gap: 12px; }
@keyframes mq-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (min-width: 992px) {
  .mq-drawer-panel { left: auto; top: 0; width: 420px; max-height: none; border-radius: 0; box-shadow: var(--mq-shadow-offcanvas); padding-top: 20px; animation: mq-drawer-in .3s ease-out; }
}

/* ---------- Agenda ---------- */
.mq-agenda { position: relative; display: grid; column-gap: 8px; }
.mq-agenda-head { position: sticky; top: 0; z-index: 3; background: var(--mq-admin-bg); padding: 6px 0; font-size: 14px; font-weight: 700; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
@media (min-width: 992px) { .mq-agenda-head { top: 72px; } }
.mq-agenda-head small { font-size: 11px; font-weight: 500; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-agenda-hour { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); border-top: 1px solid var(--bs-border-color); padding-top: 2px; }
.mq-agenda-cell { border-top: 1px solid var(--bs-border-color); background: transparent; border-left: 0; border-right: 0; border-bottom: 0; padding: 0; color: transparent; min-width: 0; }
.mq-agenda-cell.half { border-top-style: dashed; border-top-color: color-mix(in oklab, var(--bs-border-color) 60%, transparent); }
.mq-agenda-cell:hover:not(:disabled) { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.mq-agenda-cell:hover:not(:disabled)::after { content: "\F64D"; font-family: bootstrap-icons; } /* bi-plus-lg */
.mq-agenda .mq-agenda-block { z-index: 2; margin: 2px 0; cursor: pointer; padding: 5px 8px; gap: 0; line-height: 1.25; }
.mq-agenda-now { position: absolute; left: 48px; right: 0; height: 2px; background: var(--bs-danger); z-index: 4; pointer-events: none; }
.mq-agenda-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bs-danger); }
.mq-dots { display: flex; gap: 6px; justify-content: center; }
.mq-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--bs-border-color); }
.mq-dots span.active { background: var(--bs-body-color); }

/* ---------- Hoje ---------- */
.mq-live-court { width: 124px; flex: 0 0 124px; border-top: 3px solid var(--bs-border-color); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.mq-live-court.free { border-top-color: var(--bs-success); }
.mq-live-court.blocked { border-top-color: var(--bs-danger); }
.mq-live-court.busy { border-top-color: var(--bs-secondary-color); }
.mq-timeline { display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; }
.mq-timeline .time { font-size: 13px; font-weight: 700; position: relative; }
.mq-timeline .time::after { content: ""; position: absolute; left: 22px; top: 22px; bottom: -6px; width: 2px; background: var(--bs-border-color); }
.mq-timeline .mq-agenda-block { border-left-width: 3px; border-radius: 10px; margin-bottom: 10px; }

/* Utilitário ausente no Bootstrap: permite que filhos flex com text-truncate encolham. */
.min-w-0 { min-width: 0 !important; }

/* ---------- Modo TV (1920×1080 como referência; --u = 1px do design) ---------- */
.mq-tv { --u: min(calc(100vw / 1920), calc(100dvh / 1080)); position: fixed; inset: 0; background: var(--bs-body-bg); color: var(--bs-body-color); display: grid; grid-template-rows: calc(140 * var(--u)) 1fr calc(120 * var(--u)); overflow: hidden; cursor: default; user-select: none; }
.mq-tv-header { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(64 * var(--u)); border-bottom: 1px solid var(--bs-border-color); }
.mq-tv-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: calc(28 * var(--u)); padding: calc(36 * var(--u)) calc(64 * var(--u)); min-height: 0; }
.mq-tv-card { border-radius: calc(24 * var(--u)); border: calc(3 * var(--u)) solid var(--bs-border-color); background: var(--mq-card-bg); padding: calc(36 * var(--u)) calc(40 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 0; transition: background-color .4s, border-color .4s; }
.mq-tv-card.free { background: var(--bs-success-bg-subtle); border-color: var(--bs-success); }
.mq-tv-card.blocked { border-color: var(--bs-danger-bg-subtle); }
.mq-tv-footer { background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(64 * var(--u)); }
.mq-tv-legend { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); display: inline-block; }

/* ---------- Aparência ---------- */
.mq-appearance { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 992px) {
  .mq-appearance { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; align-items: start; max-width: 1240px; margin: 0 auto; width: 100%; }
  .mq-preview-col { position: sticky; top: 96px; }
}
.mq-dropzone { position: relative; border: 2px dashed var(--bs-border-color); border-radius: var(--bs-border-radius); min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; text-align: center; padding: 16px; }
.mq-dropzone:hover, .mq-dropzone.dragging { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.mq-dropzone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mq-preset { height: 44px; padding: 0 14px 0 8px; border-radius: var(--bs-border-radius-pill); border: 1px solid var(--bs-border-color); background: var(--mq-card-bg); color: var(--bs-body-color); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.mq-preset.active { border: 2px solid var(--bs-body-color); padding: 0 13px 0 7px; }
.mq-preset-dot { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.08); }
.mq-color-field { display: flex; align-items: center; gap: 8px; }
.mq-color-field input[type=color] { width: 44px; height: 44px; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); padding: 4px; background: var(--mq-card-bg); flex: 0 0 auto; cursor: pointer; }
.mq-phone { width: 100%; max-width: 410px; margin: 0 auto; aspect-ratio: 390 / 720; border: 10px solid #111; border-radius: 44px; overflow: hidden; background: #fff; box-shadow: 0 20px 48px rgba(0,0,0,.18); }
@media (max-width: 991.98px) { .mq-phone { border-radius: 20px; border-width: 1px; border-color: var(--bs-border-color); box-shadow: none; } }
.mq-phone iframe { width: 100%; height: 100%; border: 0; display: block; }
.mq-photo-tile { position: relative; aspect-ratio: 1; border-radius: var(--bs-border-radius-sm); overflow: hidden; background: var(--bs-tertiary-bg); }
.mq-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-photo-actions { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 4px; }
.mq-photo-actions .btn { min-height: 32px; width: 32px; padding: 0; background: rgba(17,24,39,.75); color: #fff; border: 0; border-radius: 8px; }
.mq-photo-add { border: 1px dashed var(--bs-border-color); background: transparent; color: var(--bs-secondary-color); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.mq-photo-add:hover { border-color: var(--bs-primary); color: var(--bs-primary-text-emphasis); }

/* ---------- Plataforma (super admin) ---------- */
.mq-platform-sidebar { width: 232px; flex: 0 0 232px; background: #111827; height: 100dvh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; }
.mq-platform-sidebar a:not(:first-child) { height: 44px; border-radius: var(--bs-border-radius-sm); padding: 0 12px; display: flex; align-items: center; gap: 10px; color: #D1D5DB; text-decoration: none; font-size: 14px; font-weight: 500; }
.mq-platform-sidebar a:not(:first-child):hover { background: #1F2937; color: #fff; }
.mq-platform-sidebar a.active { background: #1F2937; color: #fff; font-weight: 700; }
.mq-platform-logo { width: 36px; height: 36px; border-radius: 10px; background: #16A34A; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.mq-table { --bs-table-bg: var(--mq-card-bg); margin: 0; }
.mq-table th { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; border-bottom-width: 1px; padding: 12px 16px; white-space: nowrap; }
.mq-table td { padding: 12px 16px; vertical-align: middle; font-size: 14px; }
.mq-stepper { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.mq-stepper .step { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--bs-secondary-color); background: none; border: 0; padding: 0; }
.mq-stepper .dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bs-border-color); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--mq-card-bg); flex: 0 0 auto; }
.mq-stepper .step.done .dot { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.mq-stepper .step.current { color: var(--bs-body-color); }
.mq-stepper .step.current .dot { background: #111827; border-color: #111827; color: #fff; }
.mq-stepper .line { width: 36px; height: 2px; background: var(--bs-border-color); margin: 0 8px; flex: 0 0 auto; }
.mq-onboarding { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 992px) { .mq-onboarding { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; max-width: 1240px; margin: 0 auto; width: 100%; } .mq-onboarding aside { position: sticky; top: 96px; } }

/* Tabela dentro de card sem overflow:hidden (que cortava menus de ação abertos na última linha): cantos nas células. */
.card > .mq-table { margin-bottom: 0; }
.card > .mq-table thead tr:first-child > :first-child { border-top-left-radius: calc(var(--bs-card-border-radius) - 1px); }
.card > .mq-table thead tr:first-child > :last-child { border-top-right-radius: calc(var(--bs-card-border-radius) - 1px); }
.card > .mq-table tbody tr:last-child > :first-child { border-bottom-left-radius: calc(var(--bs-card-border-radius) - 1px); }
.card > .mq-table tbody tr:last-child > :last-child { border-bottom-right-radius: calc(var(--bs-card-border-radius) - 1px); }