/* ============================================================
   XINGUZINHO_UX_NAVEGACAO_V1
   Busca com ações + drawer de contexto + links diretos.
   ============================================================ */

.xux-search-modal {
  width:min(860px,100%);
}

.xux-search-help {
  margin:7px 22px 0;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--tema-texto-secundario,#64748b);
  font-size:9px;
}

.xux-search-help span {
  display:flex;
  align-items:center;
  gap:4px;
}

.xux-search-help kbd {
  min-width:20px;
  padding:2px 5px;
  border:1px solid var(--tema-borda,#cbd5e1);
  border-radius:5px;
  background:var(--tema-card,#fff);
  color:var(--tema-texto,#0f172a);
  font-size:9px;
  text-align:center;
}

.xux-search-item {
  margin:4px 0;
  padding:4px;
  border:1px solid transparent;
  border-radius:13px;
  transition:
    border-color .12s ease,
    background .12s ease,
    transform .12s ease;
}

.xux-search-item:hover,
.xux-search-item.selected {
  border-color:#93c5fd;
  background:rgba(59,130,246,.06);
}

.xux-search-main {
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--tema-texto,#0f172a);
  text-align:left;
  cursor:pointer;
}

.xux-search-actions {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  padding:0 8px 7px 55px;
}

.xux-search-actions button {
  min-height:28px;
  padding:5px 8px;
  border:1px solid var(--tema-borda,#dbe3ec);
  border-radius:8px;
  background:var(--tema-card,#fff);
  color:var(--tema-texto-secundario,#475569);
  font-size:9px;
  font-weight:700;
  cursor:pointer;
}

.xux-search-actions button:hover {
  border-color:#93c5fd;
  color:#1d4ed8;
}

.xux-search-actions .xux-btn-primary {
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

.xux-context-overlay {
  position:fixed;
  inset:0;
  z-index:1000005;
  display:flex;
  justify-content:flex-end;
  background:rgba(15,23,42,.38);
  backdrop-filter:blur(2px);
}

.xux-context-panel {
  width:min(430px,92vw);
  height:100%;
  overflow:auto;
  padding:
    20px
    18px
    calc(
      24px +
      env(safe-area-inset-bottom)
    );
  border-left:1px solid var(--tema-borda,#e2e8f0);
  background:var(--tema-card,#fff);
  color:var(--tema-texto,#0f172a);
  box-shadow:-18px 0 50px rgba(15,23,42,.2);
  animation:xuxDrawerIn .18s ease-out;
}

.xux-context-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.xux-context-head small {
  display:block;
  margin-bottom:5px;
  color:var(--tema-texto-secundario,#64748b);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.xux-context-head h2 {
  margin:0;
  font-size:19px;
  line-height:1.25;
}

.xux-context-head>button {
  width:36px;
  height:36px;
  flex:none;
  padding:0;
  border:1px solid var(--tema-borda,#e2e8f0);
  border-radius:10px;
  background:var(--tema-card-2,#f8fafc);
  color:var(--tema-texto,#0f172a);
  font-size:22px;
  cursor:pointer;
}

.xux-context-sub {
  margin-top:12px;
  padding:10px 11px;
  border-radius:10px;
  background:var(--tema-card-2,#f8fafc);
  color:var(--tema-texto-secundario,#64748b);
  font-size:11px;
  line-height:1.45;
}

.xux-context-fields {
  display:grid;
  gap:7px;
  margin-top:15px;
}

.xux-context-field {
  display:grid;
  grid-template-columns:105px minmax(0,1fr) 32px;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:8px 9px;
  border:1px solid var(--tema-borda,#e2e8f0);
  border-radius:10px;
}

.xux-context-field>span {
  color:var(--tema-texto-secundario,#64748b);
  font-size:9px;
  font-weight:700;
}

.xux-context-field>strong {
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--tema-texto,#0f172a);
  font-size:11px;
}

.xux-context-field>button {
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  border:0;
  border-radius:7px;
  background:var(--tema-card-2,#f8fafc);
  cursor:pointer;
}

.xux-context-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:18px;
}

.xux-context-actions button {
  min-height:40px;
  border-radius:10px;
}

.xux-context-actions .primary {
  grid-column:1/-1;
}

.xux-context-empty {
  padding:18px;
  border:1px dashed var(--tema-borda,#cbd5e1);
  border-radius:10px;
  color:var(--tema-texto-secundario,#64748b);
  font-size:10px;
  text-align:center;
}

@keyframes xuxDrawerIn {
  from {
    opacity:.6;
    transform:translateX(24px);
  }

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

html[data-theme="dark"] .xux-search-item:hover,
html[data-theme="dark"] .xux-search-item.selected {
  background:rgba(59,130,246,.10);
  border-color:rgba(96,165,250,.42);
}

@media(max-width:700px) {

  .xux-search-help {
    margin-left:16px;
    margin-right:16px;
  }

  .xux-search-actions {
    padding-left:8px;
  }

  .xux-search-actions button {
    flex:1 1 auto;
  }

  .xux-context-overlay {
    align-items:flex-end;
    justify-content:stretch;
  }

  .xux-context-panel {
    width:100%;
    height:auto;
    max-height:84dvh;
    padding:
      16px
      14px
      calc(
        18px +
        env(safe-area-inset-bottom)
      );
    border-left:0;
    border-top:1px solid var(--tema-borda,#e2e8f0);
    border-radius:20px 20px 0 0;
    box-shadow:0 -18px 50px rgba(15,23,42,.24);
    animation:xuxSheetIn .18s ease-out;
  }

  .xux-context-actions {
    grid-template-columns:1fr;
  }

  .xux-context-actions .primary {
    grid-column:auto;
  }

  .xux-context-field {
    grid-template-columns:88px minmax(0,1fr) 32px;
  }

  @keyframes xuxSheetIn {
    from {
      opacity:.6;
      transform:translateY(24px);
    }

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