/* =========================================================
   Componente: Bottom Sheet e Command Palette (overlays)
   ========================================================= */

.overlay-cf {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 20, 0.5);
  backdrop-filter: blur(2px);
  z-index: 1400;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.overlay-cf.show { opacity: 1; }

/* ---------- Bottom Sheet ---------- */
.sheet-cf {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1401;
  background: var(--bg-surface);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-spring);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sheet-cf.show { transform: translateY(0); }
.sheet-cf__handle {
  width: 40px; height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-color);
  margin: var(--space-3) auto var(--space-2);
  flex-shrink: 0;
  cursor: grab;
}
.sheet-cf__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-5) var(--space-3);
}
.sheet-cf__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); margin: 0; }
.sheet-cf__body { padding: 0 var(--space-5) var(--space-6); overflow-y: auto; }

/* Em telas largas o sheet vira um dialog centralizado (desktop-friendly) */
@media (min-width: 768px) {
  .sheet-cf:not(.sheet-force-bottom) {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(520px, 92vw);
    border-radius: var(--radius-lg);
    max-height: 85vh;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .sheet-cf:not(.sheet-force-bottom).show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  .sheet-cf:not(.sheet-force-bottom) .sheet-cf__handle { display: none; }
}

/* ---------- Command Palette ---------- */
.cmdk-cf {
  position: fixed;
  top: 14vh; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(620px, 94vw);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1401;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cmdk-cf.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cmdk-cf__search {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
}
.cmdk-cf__search i { color: var(--text-muted); }
.cmdk-cf__search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: var(--text-md); color: var(--text-primary);
  font-family: var(--font-sans);
}
.cmdk-cf__search kbd {
  font-size: var(--text-xs); color: var(--text-muted);
  background: var(--bg-muted); border: 1px solid var(--border-color);
  border-radius: var(--radius-xs); padding: 2px 6px;
}
.cmdk-cf__list { max-height: 52vh; overflow-y: auto; padding: var(--space-2); }
.cmdk-cf__group-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-3) var(--space-2);
}
.cmdk-cf__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
}
.cmdk-cf__item .ic {
  width: 30px; height: 30px; border-radius: var(--radius-xs);
  display: grid; place-items: center;
  background: var(--bg-muted); color: var(--text-secondary);
  flex-shrink: 0;
}
.cmdk-cf__item.active, .cmdk-cf__item:hover {
  background: var(--indigo-50);
  color: var(--indigo-700);
}
[data-theme='dark'] .cmdk-cf__item.active,
[data-theme='dark'] .cmdk-cf__item:hover {
  background: rgba(79, 70, 229, 0.18);
  color: var(--text-primary);
}
.cmdk-cf__empty { padding: var(--space-8); text-align: center; color: var(--text-muted); }

/* Gatilho da command palette no header (substitui a antiga busca) */
.cmdk-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  max-width: 440px;
  padding: 0.55rem 0.85rem;
  background: var(--bg-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cmdk-trigger:hover { border-color: var(--indigo-300); background: var(--bg-surface); }
.cmdk-trigger__text { flex: 1; text-align: left; }
.cmdk-trigger kbd {
  font-size: 11px; font-family: var(--font-sans);
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-xs); padding: 1px 6px; color: var(--text-muted);
}
@media (max-width: 991px) {
  .cmdk-trigger__text, .cmdk-trigger kbd { display: none; }
  .cmdk-trigger { flex: 0 0 auto; max-width: none; padding: 0.55rem; }
}