/* Caminho no projeto: public/assets/css/app.css */

/*
 * Estilos compartilhados por TODAS as telas (linkado via <link rel="stylesheet">
 * no <head> de cada uma). Qualquer ajuste aqui vale pro site inteiro de uma vez —
 * não precisa editar cada tela individualmente.
 */

/* Lista do <select> (option) segue o padrão claro do sistema por padrão, mesmo
   com o resto do site em tema escuro — cor de fundo explícita aqui é mais
   confiável entre navegadores (principalmente no mobile) do que só
   "color-scheme: dark" (definido no <html>, mantido como reforço). */
select, option {
  background-color: #1e293b;
  color: #f1f5f9;
}

/* ------------------------------------------------------------------
   Campo de seleção pesquisável (v0.25.6) — ver assets/js/combobox.js.
   O <select> original fica por baixo do campo, invisível.
   ------------------------------------------------------------------ */
.combobox {
  position: relative;
}

.combobox-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.combobox-input.has-dot {
  padding-left: 1.75rem;
}

.combobox-input.is-up { color: #34d399; }   /* emerald-400 */
.combobox-input.is-down { color: #f87171; } /* red-400 */

.combobox-dot {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-radius: 9999px;
  pointer-events: none;
}

.combobox-dot.hidden,
.combobox-list.hidden {
  display: none;
}

/* A lista usa position: fixed (posicionada pelo JS, logo abaixo do campo) e
   largura pelo CONTEÚDO — pelo menos a largura do campo, até ~48rem — pra
   mostrar o nome completo das interfaces (v0.25.6). Fixed também evita ser
   cortada pelo painel do modal (que rola). */
.combobox-list {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: min(92vw, 48rem);
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background-color: #1e293b;  /* slate-800 */
  border: 1px solid #334155;  /* slate-700 */
  border-radius: 0.375rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  font-size: 0.875rem;
}

.combobox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  color: #f1f5f9;             /* slate-100 */
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combobox-option > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.combobox-option.is-highlighted { background-color: #334155; }
.combobox-option.is-selected { font-weight: 600; }
.combobox-option.is-up { color: #34d399; }
.combobox-option.is-down { color: #f87171; }

.combobox-option-dot,
.combobox-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: #64748b;  /* slate-500 */
}

.is-up > .combobox-option-dot,
.combobox-dot.is-up { background-color: #10b981; }   /* emerald-500 */
.is-down > .combobox-option-dot,
.combobox-dot.is-down { background-color: #ef4444; } /* red-500 */

.combobox-empty {
  padding: 0.5rem 0.75rem;
  color: #94a3b8;             /* slate-400 */
}