/*
 * clickbus-ui — design system compartilhado dos mini-apps de Segurança.
 *
 * Cores e fontes são cópia direta de clickbus-gente (Embarque —
 * apps/portal/src/app/globals.css, conferido linha a linha em 2026-08-05,
 * não de memória: --color-primary/-dark/-light/-50..700, --color-background/
 * -foreground/-surface/-secondary, --color-muted/-disabled, --color-border/
 * -subtle, --color-success/-warning/-danger/-info (+ -bg/-text de cada),
 * --color-accent/-light/-dark, e a fonte Inter 400/600/700 com o fallback
 * exato do body{} de lá). Escala tipográfica, grid de espaçamento (8px) e
 * raio de borda vêm do "ClickBus Design System v1.0.0 (ferramentas
 * internas)" documentado em clickbus-os/design/design-system-apps-internas.md
 * — que já bate com os valores de raio/sombra do Embarque, então não há
 * conflito nesses dois pontos. Especificação de componente (altura/padding
 * de botão, card, input, badge) também vem do Embarque, a implementação
 * React já em produção.
 *
 * Sem build step: puro CSS, servido como arquivo estático por cada app
 * (Flask Blueprint ou FastAPI StaticFiles apontando pra este diretório —
 * ver README.md deste pacote). Um só arquivo, sem @import, pra não exigir
 * resolução de caminho relativo entre apps.
 *
 * Modo escuro é uma extensão nossa — o gente é "light theme" por decisão
 * explícita; mantido aqui porque o fake-site-validator já usava um antes
 * deste pacote existir e ele é consistente com a paleta clara.
 */

:root {
  /* --- Cor: superfícies e texto --- */
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f5f5;
  --color-text: #222222;
  --color-muted: #767676;
  --color-disabled: #9f9f9f;
  --color-border: #d0d0d0;
  --color-border-subtle: #e9e9e9;

  /* --- Cor: marca --- */
  --color-primary: #8629cc;
  --color-primary-hover: #a528ff;
  --color-primary-pressed: #6800b3;
  --color-primary-bg: #f8f0ff;
  --color-primary-border: #ca80ff;

  /* --- Cor: destaque decorativo (dourado — usado com moderação, ex.: um
     variant de botão secundário; nunca como cor de texto sobre fundo claro) --- */
  --color-accent: #ffbf00;
  --color-accent-light: #ffd54f;
  --color-accent-dark: #e6ac00;

  /* --- Cor: feedback (bg de destaque suave / texto legível / tom forte p/ ícone-barra) --- */
  --color-danger-bg: #f2dbd9;
  --color-danger-text: #b20f00;
  --color-danger-strong: #e31300;

  --color-warning-bg: #fdf1dc;
  --color-warning-text: #cc6e00;
  --color-warning-strong: #f2920d;

  --color-success-bg: #dfece3;
  --color-success-text: #0d732e;
  --color-success-strong: #1ab24c;

  --color-info-bg: #ebf0fa;
  --color-info-text: #22448b;
  --color-info-strong: #3b6fd4;

  /* --- Tipografia --- */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;

  /* --- Espaçamento: grid de 8px --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* --- Raio de borda --- */
  --radius-subtle: 4px;
  --radius-control: 8px;  /* botões, inputs */
  --radius-card: 12px;    /* cards, modais */
  --radius-container: 16px;
  --radius-full: 9999px;  /* só pills/badges — nunca botões, ver regra abaixo */

  /* --- Sombra --- */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1420;
    --color-surface: #241b2e;
    --color-surface-alt: #2c2436;
    --color-text: #f2eafb;
    --color-muted: #b8aec4;
    --color-disabled: #7d7488;
    --color-border: #3a2f47;
    --color-border-subtle: #2c2436;

    --color-primary: #a528ff;
    --color-primary-hover: #b464ff;
    --color-primary-pressed: #8629cc;
    --color-primary-bg: #2a1f38;
    --color-primary-border: #6800b3;

    --color-danger-bg: #3a1c1e;
    --color-danger-text: #ff8f93;
    --color-danger-strong: #e31300;

    --color-warning-bg: #3a2f14;
    --color-warning-text: #f0c46a;
    --color-warning-strong: #f2920d;

    --color-success-bg: #163523;
    --color-success-text: #7fe0a0;
    --color-success-strong: #1ab24c;

    --color-info-bg: #1c2a3f;
    --color-info-text: #9dbcf0;
    --color-info-strong: #3b6fd4;
  }
}

/* ---------- Reset & base ---------- */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-hover);
}

/* ---------- Tipografia (escala documentada — máx. 3 tamanhos por tela) ---------- */

.text-title {
  font-size: 2rem;       /* 32px */
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.text-section {
  font-size: 1.5rem;     /* 24px */
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.text-subtitle {
  font-size: 1.25rem;    /* 20px */
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.text-label {
  font-size: 0.75rem;    /* 12px */
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.text-muted {
  color: var(--color-muted);
}

/* Parágrafo de contexto logo abaixo do .app-header, antes do conteúdo
   principal da página (padrão usado nos mini-apps — ver apps/*/templates).
   Margem no topo inclusa porque .app-header (sticky, sem padding próprio)
   não deixa respiro nenhum antes do conteúdo. */
.page-intro {
  color: var(--color-muted);
  margin: var(--space-3) 0;
}

/* ---------- Layout ---------- */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-6);
}

.page-header {
  padding: var(--space-4) var(--space-3) var(--space-2);
  max-width: 960px;
  margin: 0 auto;
}

.page-header p {
  margin: 0;
  color: var(--color-muted);
}

/* ---------- Botão ---------- */
/* Regra do doc: sem gradiente, sem rounded-full — sempre --radius-control. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 2.5rem;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-control);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-sm { height: 2rem; padding: 0 var(--space-2); font-size: 0.875rem; }
.btn-lg { height: 2.75rem; padding: 0 var(--space-4); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--color-primary-pressed); }

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-primary-bg); }

.btn-outline {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-outline:hover:not(:disabled) { background: var(--color-surface-alt); }

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-primary-bg); }

.btn-danger {
  background: var(--color-danger-text);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: var(--color-danger-strong); }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-text);
}
.btn-accent:hover:not(:disabled) { background: var(--color-accent-dark); }

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

/* ---------- Input / Select / Textarea ---------- */

.field { display: block; margin-bottom: var(--space-2); }

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--color-muted);
}

.input, .select, textarea.input {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--space-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  box-shadow: var(--shadow-xs);
}

textarea.input {
  height: auto;
  min-height: 80px;
  padding: var(--space-1) var(--space-2);
  resize: vertical;
}

.input:focus, .select:focus, textarea.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.input.has-error {
  border-color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.field-error {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-danger-text);
}

/* Aviso de erro solto na página (fora de um form específico) — ex.: tentar
   conceder acesso a um domínio de e-mail não autorizado a logar. */
.alert-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
}

/* ---------- Card ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.card-header { padding: var(--space-3) var(--space-3) var(--space-1); }
.card-body { padding: var(--space-3); }
.card-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.card-hover:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
}

/* ---------- Badge ---------- */
/* Pill (--radius-full) é a exceção documentada à regra "sem rounded-full" —
   vale só pra badges/tags, nunca pra botões. */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-primary { background: var(--color-primary); color: #fff; }
.badge-secondary { background: var(--color-surface-alt); color: var(--color-muted); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-info { background: var(--color-info-bg); color: var(--color-info-text); }
.badge-accent { background: var(--color-accent); color: var(--color-text); }
.badge-outline { border: 1px solid var(--color-border); color: var(--color-text); }

/* ---------- Tabela ---------- */

.table-wrapper { overflow-x: auto; }

table.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

table.table th, table.table td {
  padding: 0.5rem var(--space-3);
  text-align: left;
  font-size: 1rem;
  white-space: nowrap;
}

table.table th {
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
}

table.table td {
  border-bottom: 1px solid var(--color-border-subtle);
}

table.table tbody tr:hover td { background: var(--color-bg); }
table.table tbody tr:last-child td { border-bottom: none; }

/* ---------- Padrão de tela de login ---------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-4);
  max-width: 380px;
  text-align: center;
}

.login-card .text-subtitle { margin-bottom: var(--space-1); }

.login-card p {
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

.login-error {
  color: var(--color-danger-text) !important;
  font-size: 0.85rem;
  background: var(--color-danger-bg);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-control);
  margin: calc(var(--space-1) * -1) 0 var(--space-3);
}

/* ---------- Barra de usuário (topo das apps autenticadas) ---------- */

.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.9rem;
  color: var(--color-muted);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
}

.logout-link {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
}
.logout-link:hover { text-decoration: underline; }

/* Agrupa mais de uma ação (voltar ao portal, sair) do lado direito da
   .user-bar sem quebrar o justify-content: space-between dela. */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Link "voltar" discreto — usado pelo botão de cada mini-app pra voltar à
   home do clickbus-security (equivalente ao PortalLink do clickbus-gente). */
.back-link {
  font-size: 0.85rem;
  color: var(--color-muted);
  text-decoration: none;
}
.back-link:hover { color: var(--color-primary); }

/* ---------- App launcher (grid de ferramentas do portal) ---------- */

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  /* .container (envolve o grid na home) não tem padding no topo — some
     respiro entre o .portal-header e os cards dos mini-apps. */
  margin-top: var(--space-4);
}

.app-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.app-card .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.app-card .icon-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-card);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.hidden { display: none !important; }

/* ---------- Utilitários de layout (formulários inline, ex.: console de acessos) ---------- */

.stack-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: flex-end;
}

.field-inline {
  margin-bottom: 0;
}

/* ---------- Header de mini-app ----------
 * Padrão replicado do header das apps do clickbus-gente (ex.: PPI —
 * apps/ppi/src/components/layout/Header.tsx, conferido linha a linha):
 * barra sólida na cor de marca, fixa no topo, logo+título à esquerda,
 * usuário+avatar+ações à direita. Um só componente pras 3 mini-apps
 * (fake-site-validator, cyber-scan, security-assets) usarem igual, em
 * vez de cada uma inventar seu próprio topo.
 */

.app-header {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-3);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.app-header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.app-header-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  background: rgb(255 255 255 / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.app-header-title {
  min-width: 0;
}

.app-header-title h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-title p {
  margin: 0;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.app-header-user {
  text-align: right;
  line-height: 1.2;
  display: none;
}

@media (min-width: 640px) {
  .app-header-user {
    display: block;
  }
}

.app-header-user p:first-child {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.app-header-user p:last-child {
  margin: 0;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.7);
}

.app-header-avatar,
.app-header-avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.app-header-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 0.2);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Pill de ação no header (voltar ao portal / sair) — equivalente ao
   PortalLink do clickbus-gente. Nome próprio (não .portal-header-action,
   já usado só pelo header da home do portal) porque aqui é consumido por
   qualquer mini-app, não só o portal. */
.app-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-control);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: rgb(255 255 255 / 0.15);
  text-decoration: none;
  transition: background-color 0.12s ease;
  white-space: nowrap;
}

.app-header-pill:hover {
  background: rgb(255 255 255 / 0.25);
  color: #fff;
}

/* Abas de navegação no header (pra apps com mais de uma tela, ex.:
   security-assets — Geral/JumpCloud/SentinelOne) — mesmo tratamento das
   tabs do header do PPI: pill ativa = bg-white/20, inativa = white/80. */
.app-header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.app-header-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-control);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: rgb(255 255 255 / 0.8);
  transition: background-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}

.app-header-nav a:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.app-header-nav a.active {
  background: rgb(255 255 255 / 0.2);
  color: #fff;
}