/* Extraído de css/_components.css (carrega logo depois dele — mesma posição na cascata). */
/* =============================================================
   FLOWLY-SEARCH — Global Cmd+K search overlay
   ============================================================= */
.flowly-search-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
  animation: searchOverlayIn 240ms var(--flowly-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
@keyframes searchOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.flowly-search-modal {
  width: 100%; max-width: 600px;
  background: var(--flowly-bg-overlay, rgba(20, 22, 28, 0.92));
  border: 1px solid var(--flowly-border-strong, rgba(255, 255, 255, 0.08));
  border-radius: var(--flowly-radius-2xl, 20px);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5),
              0 8px 24px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: searchModalIn 360ms var(--flowly-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
@keyframes searchModalIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.flowly-search-input-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--flowly-border-muted, rgba(255,255,255,0.06));
}
.flowly-search-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--flowly-accent-primary);
  transition: transform 200ms var(--flowly-ease-out, ease);
}
.flowly-search-input-wrap:focus-within .flowly-search-icon {
  transform: scale(1.1);
}
.flowly-search-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: calc(16px * var(--flowly-text-k)); font-weight: 500;
  color: var(--flowly-text-primary);
  font-family: var(--flowly-font-main);
}
.flowly-search-input::placeholder {
  color: var(--flowly-text-tertiary);
  font-weight: 400;
}
.flowly-search-kbd {
  font-size: calc(10px * var(--flowly-text-k)); font-weight: 700;
  padding: 3px 7px; border-radius: calc(5px * var(--flowly-radius-k));
  background: var(--flowly-bg-glass, rgba(255,255,255,0.04));
  border: 1px solid var(--flowly-border-muted, rgba(255,255,255,0.08));
  color: var(--flowly-text-tertiary);
  font-family: var(--flowly-font-mono);
  letter-spacing: 0.05em;
}

.flowly-search-results {
  max-height: 360px; overflow-y: auto;
  padding: 4px 0;
}
.flowly-search-result {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 160ms var(--flowly-ease-out, ease), border-color 160ms var(--flowly-ease-out, ease);
  position: relative;
}
.flowly-search-result:last-child { border-bottom: none; }
.flowly-search-result:hover {
  background: var(--flowly-bg-glass-hover, rgba(255, 255, 255, 0.04));
}
.flowly-search-result.is-selected {
  background: linear-gradient(90deg, rgb(var(--flowly-accent-primary-rgb) / 0.12) 0%, rgb(var(--flowly-accent-primary-rgb) / 0.04) 100%);
  border-left-color: var(--flowly-accent-primary);
  box-shadow: inset 0 0 0 1px rgb(var(--flowly-accent-primary-rgb) / 0.08);
}
.flowly-search-result.is-done .flowly-search-result-label {
  text-decoration: line-through;
  text-decoration-color: var(--flowly-text-tertiary, rgba(255, 255, 255, 0.3));
  text-decoration-thickness: 1.5px;
  color: var(--flowly-text-tertiary);
}
.flowly-search-result-type {
  font-size: calc(9px * var(--flowly-text-k)); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: calc(99px * var(--flowly-radius-k));
  white-space: nowrap;
  border: 1px solid transparent;
}
.flowly-search-result-type--task    { background: rgb(var(--flowly-accent-primary-rgb) / 0.12); color: var(--flowly-accent-primary); border-color: rgb(var(--flowly-accent-primary-rgb) / 0.25); }
.flowly-search-result-type--project { background: rgb(var(--flowly-accent-info-rgb) / 0.12); color: var(--flowly-accent-info); border-color: rgb(var(--flowly-accent-info-rgb) / 0.25); }
.flowly-search-result-type--habit   { background: rgb(var(--flowly-accent-success-rgb) / 0.12); color: var(--flowly-accent-success); border-color: rgb(var(--flowly-accent-success-rgb) / 0.25); }
.flowly-search-result-label {
  font-size: calc(13px * var(--flowly-text-k)); font-weight: 500; color: var(--flowly-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flowly-search-result-sub {
  font-size: calc(11px * var(--flowly-text-k)); color: var(--flowly-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.flowly-search-result mark {
  background: rgb(var(--flowly-accent-primary-rgb) / 0.25);
  color: var(--flowly-text-primary);
  padding: 0 2px;
  border-radius: calc(2px * var(--flowly-radius-k));
  font-weight: 600;
}
.flowly-search-empty {
  padding: 32px 16px; text-align: center;
  font-size: calc(13px * var(--flowly-text-k)); color: var(--flowly-text-tertiary);
  font-style: italic;
}

.flowly-search-footer {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  padding: 10px 16px;
  border-top: 1px solid var(--flowly-border-muted, rgba(255,255,255,0.06));
  font-size: calc(11px * var(--flowly-text-k)); color: var(--flowly-text-tertiary);
  background: rgba(0, 0, 0, 0.18);
  letter-spacing: 0.02em;
}
.flowly-search-footer kbd {
  font-size: calc(10px * var(--flowly-text-k)); font-weight: 700;
  padding: 2px 6px; border-radius: calc(4px * var(--flowly-radius-k));
  background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--flowly-border, rgba(255, 255, 255, 0.1));
  border-bottom-width: 2px;
  font-family: var(--flowly-font-mono);
  color: var(--flowly-text-secondary);
  margin-right: 4px;
  letter-spacing: 0.05em;
}
@media (prefers-reduced-motion: reduce) {
  .flowly-search-overlay,
  .flowly-search-modal { animation: none; }
}