/* HotelClaw V3 — ajustes finos sobre o design system (Tailwind cuida do resto) */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 400; }

/* itens do menu lateral */
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 8px;
  color: var(--tw-color-on-surface-variant, #4a4455);
  font-weight: 500; transition: all .2s ease;
}
.nav-item:hover { background: #ede5f3; }
.nav-item.active { background: #6d28d9; color: #dac5ff; font-weight: 700; }

/* timeline do mapa de reservas */
.timeline-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.timeline-scroll::-webkit-scrollbar-thumb { background: #ccc3d7; border-radius: 999px; }
.timeline-scroll::-webkit-scrollbar-track { background: #f3ebf9; }

/* bloco de reserva ("Claw Block") — top/height definidos inline por faixa */
.claw-block {
  position: absolute; z-index: 5;
  border-radius: 4px; display: flex; align-items: center;
  padding: 0 8px; overflow: hidden; cursor: pointer;
  transition: box-shadow .15s ease, filter .15s ease;
  border-left: 4px solid;
}
.claw-block:hover { z-index: 30; filter: brightness(1.05); box-shadow: 0 4px 12px rgb(0 0 0 / .18); }
.claw-confirmed { background: rgb(109 40 217 / .85); color: #fef7ff; border-color: #5300b7; }
.claw-checkedin { background: rgb(0 81 213 / .88); color: #fef7ff; border-color: #00174b; }
.claw-out { background: rgb(107 48 0 / .75); color: #fef7ff; border-color: #6b3000; text-decoration: line-through; }
.claw-pending { background: rgb(143 66 0 / .55); color: #fef7ff; border-color: #8f4200; }
.claw-cancelled { background: rgb(123 116 134 / .35); color: #4a4455; border-color: #7b7486; text-decoration: line-through; opacity: .8; }

/* ícones de governança no mapa */
.hk-clean { color: #198754; } .hk-dirty { color: #dc3545; }
.hk-cleaning { color: #d97706; } .hk-maint { color: #6c757d; }

/* linha "hoje" no mapa */
.today-col { box-shadow: inset 2px 0 0 #5300b7; background: rgb(83 0 183 / .04); }

/* menu flutuante (desktop) — no mobile vira bottom-sheet via media */
.ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 14px; font-weight: 500;
  color: #1d1a24; cursor: pointer;
}
.ctx-item:hover { background: #f3ebf9; }
.ctx-item.danger { color: #ba1a1a; }
.ctx-sep { height: 1px; background: #e8e0ee; margin: 4px 0; }

/* modal genérico — folha cheia no mobile */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgb(29 26 36 / .45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  background: #fef7ff; border-radius: 16px; padding: 24px;
  width: min(440px, 92vw); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 8px 30px rgb(0 0 0 / .18); border: 1px solid #ccc3d7;
}
.field-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: #4a4455; }
.field-input {
  width: 100%; padding: 10px 12px; border: 1px solid #ccc3d7; border-radius: 8px;
  font-size: 14px; background: #fff;
}
.field-input:focus { outline: none; border-color: #5300b7; box-shadow: 0 0 0 1px #5300b7; }
.btn-primary {
  background: #6d28d9; color: #fff; font-weight: 700; padding: 10px 18px;
  border-radius: 8px; display: inline-flex; gap: 8px; align-items: center; justify-content: center;
}
.btn-primary:hover { background: #5300b7; }
.btn-ghost {
  border: 1px solid #ccc3d7; color: #4a4455; font-weight: 700; padding: 10px 18px;
  border-radius: 8px; display: inline-flex; gap: 8px; align-items: center;
}
.btn-ghost:hover { background: #f3ebf9; }

/* chips de status */
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.chip-ok { background:#d1e7dd; color:#0f5132; } .chip-warn { background:#f8d7da; color:#842029; }
.chip-info { background:#dbe1ff; color:#00174b; } .chip-neutral { background:#e8e0ee; color:#4a4455; }

/* ============================ MOBILE-FIRST (≤768px) ============================ */
@media (max-width: 768px) {
  /* sidebar vira drawer deslizante */
  .app-drawer {
    transform: translateX(-100%); transition: transform .25s ease;
    width: min(300px, 84vw); box-shadow: 8px 0 30px rgb(0 0 0 / .25);
  }
  .app-drawer.open { transform: translateX(0); }
  .ml-sidebar { margin-left: 0 !important; width: 100% !important; }
  main.mt-header { margin-top: 56px !important; width: 100% !important; padding: 14px !important; padding-bottom: 92px !important; }
  #app > header { display: none !important; }

  /* barra superior mobile compacta (renderizada pelo core.js) */
  .mobile-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 35; height: 56px;
    background: #fef7ffe6; backdrop-filter: blur(8px);
    border-bottom: 1px solid #ccc3d7;
    display: flex; align-items: center; gap: 8px; padding: 0 12px;
  }

  /* bottom nav */
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px 10px; min-height: 56px; font-size: 11px; font-weight: 700;
    color: #4a4455; background: none; border: 0; position: relative;
  }
  .bn-item.active { color: #5300b7; }
  .bn-item.active::before {
    content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px;
    background: #6d28d9; border-radius: 0 0 4px 4px;
  }
  .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); }

  /* modal = folha cheia */
  .modal-backdrop { align-items: flex-end; }
  .modal-card {
    width: 100%; max-height: 92dvh; height: 92dvh;
    border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0));
  }

  /* menu flutuante da reserva = bottom-sheet */
  #ctxMenu {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; border-radius: 20px 20px 0 0 0; max-height: 70dvh; overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  .ctx-item { padding: 14px 18px; }

  /* kanban da governança: colunas rolam na horizontal com snap */
  .gov-kanban {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .gov-kanban > div { scroll-snap-align: start; min-width: 85vw; }

  /* tabelas → mantêm scroll horizontal suave */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-cards { display: flex; flex-direction: column; gap: 10px; }

  /* PDV: categorias horizontais no topo */
  .pos-cats { flex-direction: row !important; overflow-x: auto; width: 100% !important;
    border-right: 0 !important; border-bottom: 1px solid #ccc3d7; padding: 8px !important; }
  .pos-cats button { min-width: 84px; flex-direction: column !important; }
  .pos-cart { width: 100% !important; border-left: 0 !important; border-top: 1px solid #ccc3d7; }
  .pos-flex { flex-direction: column !important; height: auto !important; }

  /* chat mobile: coluna única */
  .chat-flex { flex-direction: column !important; height: calc(100dvh - 160px) !important; }
  .chat-list { width: 100% !important; max-height: 34dvh; }

  /* mapa: células e label compactos */
  .map-wrap .claw-block { font-size: 11px; }
}

/* desktop mantém colunas multi-linha do PDV */
@media (min-width: 769px) {
  .mobile-topbar { display: none !important; }
}