/* Identidade visual do Fyture (mesmos tokens do LoginTheme do app web). */
:root {
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;

  --roxo: #6c48f4;
  --roxo-escuro: #5136c2;
  --ink: #1b2a44;
  --texto-secundario: #5b6b82;
  --label-mono: #8a97ab;
  --hairline: #e3e7ed;
  --fundo: #eef1f5;
  --erro: #bb0000;
  --sucesso: #2f7d2c;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.container {
  padding: 24px 20px;
  max-width: 400px;
  margin: 0 auto;
}

.logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 28px;
}

/* Eyebrow mono-uppercase que abre cada bloco (padrão do painel de login). */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--roxo);
  margin: 0 0 12px;
}

/* Mesmo do login: Typography variant="h2" sob o LoginTheme (default MUI, peso 300). */
h1, h2 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.00833em;
  color: var(--ink);
  margin: 0 0 8px;
}

.subtitulo {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--texto-secundario);
  margin: 0 0 24px;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--fundo);
  color: var(--label-mono);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
}

/* Os parâmetros dinâmicos também são input/select dentro de label (taskpane.js). */
label {
  display: block;
  margin: 0 0 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texto-secundario);
}

label > input,
label > select,
input,
select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--roxo);
  box-shadow: 0 0 0 3px rgba(108, 72, 244, 0.15);
}

button.primario {
  width: 100%;
  margin-top: 8px;
  padding: 10px 16px;
  background: var(--roxo);
  color: #fff;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

button.primario:hover { background: var(--roxo-escuro); }
button.primario:disabled { opacity: 0.5; cursor: default; }

/* Equivalente ao Button variant="text" color="secondary" do app. */
.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.link:hover { text-decoration: underline; }

.acoes { margin: 16px 0 0; }

/* Lista de recursos: cada opção é um botão que abre os filtros logo abaixo. */
.item-recurso { margin-bottom: 10px; }

.recurso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--roxo);
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-left-width 0.15s ease;
}

.recurso:hover {
  background: var(--fundo);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

.recurso .seta {
  flex: none;
  color: var(--roxo);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.recurso.aberto {
  background: var(--fundo);
  border-left-width: 5px;
}

.recurso.aberto .seta { transform: rotate(90deg); }

.filtros {
  margin: 8px 0 0 4px;
  padding: 12px 0 4px 14px;
  border-left: 2px solid var(--hairline);
}

.filtros[hidden] { display: none; }

.hint { color: var(--texto-secundario); font-size: 0.75rem; margin-top: 10px; }
.hint code, .linha-usuario code {
  font-family: var(--font-mono);
  background: var(--fundo);
  padding: 1px 4px;
  border-radius: 3px;
}

.linha-usuario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 24px;
  padding: 10px 12px;
  background: var(--fundo);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04);
  font-size: 0.8125rem;
  color: var(--texto-secundario);
}

.linha-usuario strong { color: var(--ink); font-weight: 600; }

.status {
  margin-top: 16px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texto-secundario);
  min-height: 18px;
}

.status.erro { color: var(--erro); font-weight: 600; }
.status.sucesso { color: var(--sucesso); font-weight: 600; }