/* Oren Design System — E1 WebApp
   Tokens extraídos do oren-design skill.
   Proporção de cor: ≈70% areia / 22% tinta / 8% terracota */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Fontes */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Hanken Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Cores principais */
  --color-accent:         #E8553A;
  --color-accent-press:   #d4472d;
  --color-on-accent:      #FBF9F5;
  --color-on-dark:        #FBF9F5;
  --color-text:           #1A1A1A;
  --color-text-secondary: #6B645C;
  --color-text-tertiary:  #A39C92;
  --oren-sand:            #EFE9E0;
  --color-surface:        #FBF9F5;
  --oren-surface-alt:     #F8F4EE;
  --color-border:         #E3DCD1;
  --oren-dark-bg:         #1A1A1A;
  --oren-dark-surface:    #2a2a2a;
  --oren-dark-border:     #3a3a3a;

  /* Espaçamento (base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Raios */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-soft:   0 1px 3px rgba(0,0,0,.12);
  --shadow-bubble: 0 1px 2px rgba(0,0,0,.08);
}

/* ─── Reset mínimo ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--oren-sand);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: var(--color-accent); color: var(--color-on-accent); }

/* ─── Layout de app (sidebar + main) ─────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 220px;
  min-height: 100vh;
  background: var(--oren-dark-bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
}

.sidebar-logo {
  padding: 0 var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--oren-dark-border);
}

.sidebar-logo img {
  height: 28px;
  width: auto;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  color: #8C857D;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  transition: color .15s, background .15s;
}

.nav-item:hover {
  color: var(--color-on-dark);
  background: var(--oren-dark-surface);
}

.nav-item.active {
  color: var(--color-on-dark);
  background: var(--oren-dark-surface);
  border-left: 2px solid var(--color-accent);
  padding-left: calc(var(--space-6) - 2px);
}

.nav-icon {
  width: 18px;
  height: 18px;
  opacity: .7;
  flex-shrink: 0;
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon { opacity: 1; }

.sidebar-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--oren-dark-border);
}

.sidebar-user-email {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8C857D;
  margin-bottom: var(--space-3);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Main content */
.main-content {
  margin-left: 220px;
  flex: 1;
  min-height: 100vh;
  padding: var(--space-8) var(--space-8);
  max-width: 900px;
}

/* ─── Tipografia ──────────────────────────────────────────────────────────── */
.text-display  { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1.05; letter-spacing: -.02em; }
.text-title    { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.1;  letter-spacing: -.01em; }
.text-subtitle { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.2; }
.text-body-lg  { font-size: 18px; line-height: 1.6; }
.text-body     { font-size: 16px; line-height: 1.5; }
.text-small    { font-size: 14px; font-weight: 500; line-height: 1.45; }
.text-mono     { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; }
.text-mono-label {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-secondary);
}

/* ─── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* ─── Botões ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}

.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: var(--space-3) var(--space-6);
}

.btn-primary:hover { background: var(--color-accent-press); }

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
}

.btn-secondary:hover { background: var(--oren-surface-alt); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-4);
  font-size: 13px;
}

.btn-ghost:hover { color: var(--color-text); background: var(--oren-surface-alt); }

/* ─── Badges de status ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
}

.badge-pending    { background: #F5F0E8; color: #8C7A5A; }
.badge-processing { background: #EEF3FF; color: #4466CC; }
.badge-completed  { background: #EDFAF0; color: #2E7D4F; }
.badge-failed     { background: #FFF0EE; color: #C0392B; }

/* ─── Formulários ─────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.form-label { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--color-text); }
.form-hint  { font-size: 13px; color: var(--color-text-secondary); }

.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
}

.input:focus { border-color: var(--color-accent); }
.input::placeholder { color: var(--color-text-tertiary); }

select.input { cursor: pointer; }

/* ─── Área de upload ──────────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--oren-surface-alt);
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--color-accent);
  background: #FDF5F3;
}

/* ─── Plano de Ação (markdown renderizado) ───────────────────────────────── */
.action-plan h1, .action-plan h2, .action-plan h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-3);
}
.action-plan h1 { font-size: 24px; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3); }
.action-plan h2 { font-size: 18px; }
.action-plan h3 { font-size: 15px; }
.action-plan p  { font-size: 15px; line-height: 1.65; margin-bottom: var(--space-4); }
.action-plan strong { font-weight: 600; }
.action-plan em { font-style: italic; color: var(--color-text-secondary); }
.action-plan blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--oren-surface-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.action-plan blockquote p { margin: 0; }
.action-plan hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

/* ─── Tabela de histórico ────────────────────────────────────────────────── */
.history-table { width: 100%; border-collapse: collapse; }
.history-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.history-table td {
  padding: var(--space-4);
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.history-table tr:hover td { background: var(--oren-surface-alt); }
.history-table a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.history-table a:hover { color: var(--color-accent); }

/* ─── Alertas e mensagens ────────────────────────────────────────────────── */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: var(--space-6);
}
.alert-error   { background: #FFF0EE; color: #C0392B; border: 1px solid #F5C6C0; }
.alert-success { background: #EDFAF0; color: #2E7D4F; border: 1px solid #B5E5C4; }
.alert-info    { background: #EEF3FF; color: #3355BB; border: 1px solid #C5D3F8; }

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Utils ───────────────────────────────────────────────────────────────── */
.text-secondary { color: var(--color-text-secondary); }
.text-accent    { color: var(--color-accent); }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.flex  { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.w-full { width: 100%; }

/* ─── Plano de Ação renderizado (análise-result) ────────────────────────── */

/* Elementos do markdown que ficam ocultos */
.analysis-result h1  { display: none; }
.analysis-result hr  { display: none; }
.analysis-result h2  { display: none; } /* prioridade exibida no badge de cada card */

/* Linha de meta-dados do markdown — oculta no dashboard (info já está no cabeçalho do card) */
.analysis-result > p:first-of-type { display: none; }

/* Contagem de ações: "• 4 ações pendentes" */
.plan-actions-count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.plan-actions-count::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Card de recomendação */
.rec-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
  transition: border-color .15s;
}
.rec-card:hover { border-color: var(--color-text-tertiary); }

/* Linha superior: ação + badge de prioridade */
.rec-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.rec-action {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  flex: 1;
  margin: 0;
}

/* Badge de prioridade */
.rec-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  margin-top: 2px;
}
.rec-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rec-badge-critical  { background: #FFF0EE; color: #C0392B; }
.rec-badge-critical::before  { background: #C0392B; }
.rec-badge-important { background: #FFF8EC; color: #9A6C00; }
.rec-badge-important::before { background: #9A6C00; }
.rec-badge-coaching  { background: #EDFAF0; color: #2E7D4F; }
.rec-badge-coaching::before  { background: #2E7D4F; }

/* Contexto: descrição curta abaixo da ação */
.rec-context {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Fallback para blockquotes/em que o JS não conseguiu empacotar */
.analysis-result blockquote { display: none; }
.analysis-result > p > em:only-child { display: none; }

/* ─── Conclusão de ações ─────────────────────────────────────────────────── */

/* Card concluído: acinzentado com risco no título */
.rec-card.is-done {
  opacity: 0.55;
  background: var(--oren-surface-alt);
}
.rec-card.is-done .rec-action {
  text-decoration: line-through;
  color: var(--color-text-secondary);
}

/* Linha inferior do card: checkbox + campo de nota */
.rec-completion-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.rec-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.rec-checkbox-label:hover { color: var(--color-text-secondary); }

.rec-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}

.rec-note-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--color-border);
  padding: 2px 0;
  outline: none;
  min-width: 0;
}
.rec-note-input::placeholder { color: var(--color-text-tertiary); font-style: italic; }
.rec-note-input:focus { border-bottom-color: var(--color-accent); }