/* ============================================================
   PipeDev — Tema claro, marca e alternância de tema
   Isolado do CSS de componentes para reduzir conflito entre fases.
   Valores do tema claro: design system KodeHUB (docs/design-system/).
   ============================================================ */

html { color-scheme: dark; }

html[data-theme="light"] {
  color-scheme: light;

  --background: 210 8% 96%;
  --foreground: 210 11% 8%;

  --card: 0 0% 100%;
  --card-foreground: 210 11% 8%;

  --popover: 0 0% 100%;
  --popover-foreground: 210 11% 8%;

  --primary: 210 11% 8%;
  --primary-foreground: 210 8% 97%;

  --secondary: 204 12% 88%;
  --secondary-foreground: 210 11% 8%;

  --muted: 204 12% 92%;
  --muted-foreground: 204 7% 38%;

  --accent: 204 12% 86%;
  --accent-foreground: 210 11% 8%;

  --success: 160 84% 39%;
  --warning: 38 92% 50%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --info: 199 89% 48%;

  --border: 204 12% 82%;
  --input: 204 12% 82%;
  --ring: 204 7% 40%;

  /* A barra lateral é grafite nos dois temas. */
  --sidebar-background: 210 11% 8%;
  --sidebar-accent: 204 7% 20%;
  --sidebar-border: 204 7% 25%;

  --chart-1: 210 11% 18%;
  --chart-2: 204 8% 42%;
  --chart-3: 204 12% 66%;

  --shadow-sm: 0 1px 2px hsl(210 11% 8% / 0.06);
  --shadow-md: 0 4px 12px hsl(210 11% 8% / 0.08);
  --shadow-card: 0 1px 2px hsl(210 11% 8% / 0.05), 0 8px 24px hsl(210 11% 8% / 0.04);
  --shadow-card-hover: 0 12px 28px hsl(210 11% 8% / 0.12);
  --shadow-elevated: 0 16px 36px hsl(210 11% 8% / 0.14);

  --gradient-primary: linear-gradient(135deg, hsl(210 11% 8%) 0%, hsl(204 7% 32%) 55%, hsl(204 12% 62%) 100%);

  --prio-baixa: 0 0% 38%;
  --prio-media: 210 55% 42%;
  --prio-alta: 32 78% 42%;
  --prio-urgente: 0 70% 45%;
}

body,
.sidebar,
.card,
.project-card,
.kanban-column,
.kanban-card,
.task-drawer,
.modal-dialog,
.input {
  transition-property: background-color, border-color, color;
  transition-duration: var(--duration-fast);
  transition-timing-function: ease-out;
}

/* ── Marca: wordmark PipeDev ───────────────────────────────
   Texto + quadrado com a inicial: herda as cores do contexto
   (painel de página ou barra lateral) e dispensa imagem por tema. */
.pipedev-logo {
  --logo-fg: var(--foreground);
  --logo-bg: var(--background);

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: hsl(var(--logo-fg));
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.sidebar .pipedev-logo {
  --logo-fg: var(--sidebar-foreground);
  --logo-bg: var(--sidebar-background);
}

.pipedev-logo__mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: calc(var(--radius) - 0.125rem);
  background: hsl(var(--logo-fg));
  color: hsl(var(--logo-bg));
  font-size: 1rem;
}

.pipedev-logo__name { font-size: 1.25rem; }
.pipedev-logo__name span { font-weight: 500; opacity: 0.72; }

.brand--page {
  flex-direction: column;
  gap: 0.5rem;
}

.brand--page .pipedev-logo { gap: 0.625rem; }
.brand--page .pipedev-logo__mark { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; }
.brand--page .pipedev-logo__name { font-size: 1.75rem; }

.sidebar__brand {
  padding: 0.25rem 0.5rem 0.5rem;
}

/* ── Controle de tema ──────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.125rem);
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 600;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.theme-toggle:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.theme-toggle__icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.theme-toggle__moon { display: none; }
html[data-theme="light"] .theme-toggle__sun { display: none; }
html[data-theme="light"] .theme-toggle__moon { display: block; }

.sidebar__theme-toggle {
  width: 100%;
  justify-content: flex-start;
  margin-bottom: 0.875rem;
  border-color: hsl(var(--sidebar-border));
  background: transparent;
  color: hsl(var(--sidebar-foreground) / 0.7);
}

.sidebar__theme-toggle:hover {
  background: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}

.theme-toggle--floating {
  position: fixed;
  z-index: 5;
  top: 1rem;
  right: 1rem;
  border-radius: 9999px;
  box-shadow: var(--shadow-card);
}

/* Cores de estado precisam de contraste próprio no fundo claro. */
html[data-theme="light"] .alert--error { color: hsl(0 65% 34%); }
html[data-theme="light"] .alert--success { color: hsl(160 85% 22%); }
html[data-theme="light"] .alert--warning { color: hsl(32 90% 26%); }
html[data-theme="light"] .alert--info { color: hsl(199 90% 26%); }
html[data-theme="light"] .status-planejamento { color: hsl(199 90% 26%); }
html[data-theme="light"] .status-pausado { color: hsl(32 90% 26%); }
html[data-theme="light"] .status-concluido { color: hsl(160 85% 22%); }
html[data-theme="light"] .status-cancelado { color: hsl(0 65% 34%); }
html[data-theme="light"] .pipeline__step.is-done { color: hsl(160 85% 22%); }
html[data-theme="light"] .gh-repo__status.is-ok { color: hsl(160 85% 22%); }
html[data-theme="light"] .gh-repo__status.is-warning { color: hsl(32 90% 26%); }

@media (max-width: 800px) {
  .sidebar__brand {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .theme-toggle--floating {
    top: 0.75rem;
    right: 0.75rem;
  }

  .theme-toggle--floating [data-theme-label] { display: none; }
}