/* ============================================================
   HRZ OPS — Wave 11 UX Perceptive Tokens (08/05/2026)
   Tokens semanticos + componentes da camada perceptiva.
   Resolve os 5 gargalos de UX identificados na analise dos
   feedbacks do Jadson (escopo, frescor, distincao de estados,
   causalidade pos-decisao, historico de atividade).
   ============================================================ */

:root {
  /* Data Freshness (idade do dado em si) */
  --freshness-fresh:  #10b981;   /* < 5min — verde */
  --freshness-recent: #6366f1;   /* 5-30min — indigo */
  --freshness-stale:  #f59e0b;   /* 30min-2h — amber */
  --freshness-old:    #ef4444;   /* > 2h — red */

  /* Task Age (idade da task na lista pendente) */
  --age-recent-bg:  transparent;                  /* < 7d normal */
  --age-aging-bg:   rgba(254, 243, 199, 0.45);    /* 7-15d amber bg */
  --age-old-bg:     rgba(254, 226, 226, 0.55);    /* >15d red bg */
  --age-ghost-bg:   rgba(243, 244, 246, 0.85);    /* deletado/ghost cinza */

  /* Scope Indicator */
  --scope-personal-bg:    #2563eb15;
  --scope-personal-border:#2563eb;
  --scope-personal-text:  #1e40af;
  --scope-global-bg:      #6b728015;
  --scope-global-border:  #6b7280;
  --scope-global-text:    #374151;

  /* Sync State */
  --sync-synced:  #10b981;
  --sync-pending: #f59e0b;
  --sync-error:   #ef4444;
  --sync-ghost:   #6b7280;

  /* Decision Outcome (toast pos-aprovacao) */
  --outcome-cliente:   #2563eb;  /* "pendente cliente" */
  --outcome-gestor:    #f97316;  /* aba do gestor */
  --outcome-arquivo:   #6b7280;  /* arquivado */
}

/* Dark mode parity */
[data-theme="dark"] {
  --age-aging-bg: rgba(180, 83, 9, 0.18);
  --age-old-bg:   rgba(127, 29, 29, 0.30);
  --age-ghost-bg: rgba(55, 65, 81, 0.40);
  --scope-personal-bg: #1e3a8a40;
  --scope-personal-text: #93c5fd;
  --scope-global-bg: #37415140;
  --scope-global-text: #d1d5db;
}

/* ============ Scope Banner ============ */
.scope-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 10px;
  border-left: 3px solid var(--scope-personal-border);
  background: var(--scope-personal-bg);
  color: var(--scope-personal-text);
  font-size: 13px;
  font-weight: 500;
  transition: background 200ms ease, transform 100ms ease;
}
.scope-banner[data-scope="global"] {
  border-left-color: var(--scope-global-border);
  background: var(--scope-global-bg);
  color: var(--scope-global-text);
}
.scope-banner__icon { font-size: 18px; line-height: 1; }
.scope-banner__action {
  margin-left: auto;
  font-size: 12px;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 150ms;
}
.scope-banner__action:hover { opacity: 1; }
.scope-banner__action:focus-visible { outline: 2px solid var(--scope-personal-border); outline-offset: 2px; }

/* ============ Data Freshness ============ */
.freshness {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}
.freshness__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--freshness-fresh);
  animation: freshness-pulse 2s ease-in-out infinite;
}
.freshness[data-state="recent"] .freshness__dot { background: var(--freshness-recent); animation: none; }
.freshness[data-state="stale"]  .freshness__dot { background: var(--freshness-stale); animation: none; }
.freshness[data-state="old"]    .freshness__dot { background: var(--freshness-old); animation: none; }
.freshness__refresh {
  margin-left: 8px;
  background: none;
  border: 1px solid transparent;
  font-size: 11px;
  color: inherit;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.8;
}
.freshness__refresh:hover { opacity: 1; border-color: currentColor; }
.freshness__refresh:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.freshness__refresh[data-loading="true"] { opacity: 0.5; cursor: progress; }
@keyframes freshness-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .freshness__dot { animation: none; }
}

/* ============ Task Age Badge ============ */
.task-age-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
}
.task-age-badge[data-category="real"]      { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.task-age-badge[data-category="aging"]     { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.task-age-badge[data-category="old"]       { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.task-age-badge[data-category="anomaly"]   { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.task-age-badge[data-category="syncgap"]   { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.task-age-badge[data-category="ghost"]     { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }

/* Background row tinting */
.task-row[data-age-category="aging"]   { background: var(--age-aging-bg); }
.task-row[data-age-category="old"]     { background: var(--age-old-bg); }
.task-row[data-age-category="ghost"]   { background: var(--age-ghost-bg); opacity: 0.7; }

/* ============ Decision Toast ============ */
.decision-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  max-width: 360px;
  padding: 14px 18px;
  border-radius: 12px;
  background: white;
  border-left: 4px solid var(--outcome-cliente);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: toast-slide 250ms ease-out;
}
.decision-toast[data-outcome="gestor"]  { border-left-color: var(--outcome-gestor); }
.decision-toast[data-outcome="arquivo"] { border-left-color: var(--outcome-arquivo); }
.decision-toast__title { font-weight: 600; font-size: 13px; color: #111827; }
.decision-toast__detail { font-size: 12px; color: #4b5563; }
.decision-toast__actions { display: flex; gap: 8px; margin-top: 4px; }
.decision-toast__action {
  font-size: 12px;
  background: none;
  border: 1px solid #e5e7eb;
  color: #374151;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.decision-toast__action:hover { background: #f9fafb; }
.decision-toast__action:focus-visible { outline: 2px solid var(--outcome-cliente); outline-offset: 2px; }
.decision-toast__action--undo { color: #dc2626; border-color: #fca5a5; }
.decision-toast__action[disabled] { opacity: 0.5; cursor: not-allowed; }
@keyframes toast-slide {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .decision-toast { animation: none; }
}

/* Dark mode toast */
[data-theme="dark"] .decision-toast { background: #1f2937; }
[data-theme="dark"] .decision-toast__title { color: #f3f4f6; }
[data-theme="dark"] .decision-toast__detail { color: #d1d5db; }
[data-theme="dark"] .decision-toast__action { color: #e5e7eb; border-color: #374151; }
[data-theme="dark"] .decision-toast__action:hover { background: #374151; }

/* ============ Activity Timeline ============ */
.activity-timeline { list-style: none; padding: 0; margin: 0; }
.activity-timeline__item {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.activity-timeline__item:last-child { border-bottom: none; }
.activity-timeline__dot {
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--freshness-fresh);
}
.activity-timeline__item[data-type="cron"]    .activity-timeline__dot { background: #6366f1; }
.activity-timeline__item[data-type="gestor"]  .activity-timeline__dot { background: #2563eb; }
.activity-timeline__item[data-type="ai"]      .activity-timeline__dot { background: #a855f7; }
.activity-timeline__item[data-type="clickup"] .activity-timeline__dot { background: #f97316; }
.activity-timeline__when { color: #9ca3af; font-size: 11px; min-width: 90px; font-variant-numeric: tabular-nums; }
.activity-timeline__what { flex: 1; color: #374151; }
.activity-timeline__empty { color: #9ca3af; font-size: 12px; padding: 12px 0; text-align: center; }

[data-theme="dark"] .activity-timeline__item { border-bottom-color: #374151; }
[data-theme="dark"] .activity-timeline__what { color: #e5e7eb; }