/* Componentes do Painel ADS (KAN-75). So classes com prefixo ui- (nao colide com o .btn da v1) e so
   tokens (tokens.css). Nenhum seletor de elemento solto: um componente so muda quem pede a classe.
   Referencia visual de tudo: /auth-ui/styleguide (testada no teste visual). */

@layer ds.components {
  /* ---------- Botao ---------- */
  .ui-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px; /* alvo de toque confortavel */
    padding: 10px var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .ui-button:hover {
    background: var(--color-surface-2);
  }

  .ui-button--primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

  .ui-button--primary:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
  }

  .ui-button--danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
  }

  .ui-button--danger:hover {
    background: var(--color-danger-soft);
  }

  .ui-button--ghost {
    border-color: transparent;
    color: var(--color-primary);
  }

  .ui-button:disabled,
  .ui-button[aria-disabled='true'] {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* ---------- Campos ---------- */
  .ui-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  .ui-input,
  .ui-select {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
  }

  .ui-input[aria-invalid='true'] {
    border-color: var(--color-danger);
  }

  /* Espaco entre componentes vizinhos (sem margem global: so quem se encosta ganha espaco). */
  .ui-hint + .ui-button,
  .ui-hint + .ui-stack,
  .ui-output + .ui-button,
  .ui-message + .ui-button,
  .ui-form + .ui-hint,
  .ui-button + .ui-hint {
    margin-top: var(--space-4);
  }

  .ui-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }

  .ui-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-primary);
  }

  /* ---------- Texto ---------- */
  .ui-title {
    margin: 0;
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
  }

  .ui-heading {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
  }

  /* Segundo titulo na mesma secao: separado do conteudo de cima. */
  * + .ui-heading {
    margin-top: var(--space-6);
  }

  .ui-hint {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* Link de texto (o .ui-button e o link com cara de botao). */
  .ui-link {
    color: var(--color-primary);
    text-underline-offset: 2px;
  }

  .ui-link:hover {
    color: var(--color-primary-hover);
  }

  .ui-link:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* ---------- Mensagem (role="alert"/"status"; o tipo vem de data-kind) ---------- */
  .ui-message {
    margin: 0 0 var(--space-3);
    padding: 10px var(--space-3);
    border-left: 4px solid currentColor;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: var(--text-sm);
  }

  .ui-message[data-kind='error'] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  .ui-message[data-kind='success'] {
    background: var(--color-success-soft);
    color: var(--color-success);
  }

  .ui-message[data-kind='warning'] {
    background: var(--color-warning-soft);
    color: var(--color-warning);
  }

  /* ---------- Chip de status (sempre com texto: cor nunca e a unica pista) ---------- */
  .ui-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
  }

  .ui-chip--success {
    background: var(--color-success-soft);
    color: var(--color-success);
  }

  .ui-chip--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning);
  }

  .ui-chip--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  /* ---------- Superficies ---------- */
  .ui-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .ui-section {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
  }

  .ui-output {
    display: block;
    margin-top: var(--space-3);
    padding: 10px var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }

  /* Empilha filhos com espaco igual (botoes de acao, listas de campos). */
  .ui-stack {
    display: grid;
    gap: var(--space-3);
  }

  /* ---------- Texto longo (conteudo das unidades em Markdown, KAN-33) ---------- */
  .ui-prose {
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
  }

  .ui-prose > :first-child {
    margin-top: 0;
  }

  .ui-prose h2,
  .ui-prose h3,
  .ui-prose h4,
  .ui-prose h5 {
    margin: var(--space-6) 0 var(--space-2);
    line-height: var(--leading-tight);
  }

  .ui-prose h2 {
    font-size: var(--text-lg);
  }

  .ui-prose h3,
  .ui-prose h4,
  .ui-prose h5 {
    font-size: var(--text-md);
  }

  .ui-prose p,
  .ui-prose ul,
  .ui-prose ol,
  .ui-prose pre,
  .ui-prose blockquote,
  .ui-prose .ui-prose__table {
    margin: 0 0 var(--space-3);
  }

  .ui-prose ul,
  .ui-prose ol {
    padding-left: var(--space-6);
  }

  .ui-prose li + li {
    margin-top: var(--space-1);
  }

  .ui-prose blockquote {
    padding: 10px var(--space-3);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
  }

  .ui-prose blockquote[data-kind='summary'] {
    border-left-color: var(--color-primary);
    background: var(--color-primary-soft);
  }

  .ui-prose blockquote[data-kind='reinforcement'] {
    border-left-color: var(--color-warning);
    background: var(--color-warning-soft);
  }

  .ui-prose code {
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .ui-prose pre {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    overflow-x: auto;
  }

  .ui-prose pre code {
    padding: 0;
    background: none;
  }

  /* Diagramas das Aulas (KAN-43): SVG desenhado pelo front, so com as cores do tema. */
  .ui-diagram {
    margin: 0 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
  }

  .ui-diagram__canvas {
    overflow-x: auto;
    padding: var(--space-2);
  }

  .ui-diagram svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    font-family: var(--font-sans);
  }

  .ui-diagram text {
    fill: var(--color-text);
  }

  .ui-diagram .ui-diagram__bold {
    font-weight: 600;
  }

  .ui-diagram__shape,
  .ui-diagram__hollow {
    fill: var(--color-surface);
    stroke: var(--color-text-muted);
    stroke-width: 1.5;
  }

  .ui-diagram__line {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1.5;
  }

  .ui-diagram__solid {
    fill: var(--color-text);
  }

  .ui-diagram__frame {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1;
  }

  .ui-diagram__dashed {
    stroke-dasharray: 6 4;
  }

  .ui-diagram__tag {
    fill: var(--color-surface-2);
  }

  .ui-diagram figcaption {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
  }

  .ui-diagram__title {
    font-weight: 600;
  }

  .ui-diagram details {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
  }

  .ui-diagram details p {
    margin: var(--space-1) 0 0;
  }

  .ui-prose__table {
    overflow-x: auto;
  }

  .ui-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .ui-prose th,
  .ui-prose td {
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  .ui-prose th {
    background: var(--color-surface-2);
  }

  .ui-prose hr {
    margin: var(--space-6) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
  }

  /* ---------- Foco visivel (todos os interativos) ---------- */
  .ui-button:focus-visible,
  .ui-input:focus-visible,
  .ui-select:focus-visible,
  .ui-check input:focus-visible,
  .ui-prose__table:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

  [hidden] {
    display: none !important;
  }
}