/*
 * Design system do DeviceLab, em cima dos temas claro/escuro do Shoelace.
 * Pré-requisitos na página (veja ui.js):
 *   /vendor/shoelace/themes/light.css, /vendor/shoelace/themes/dark.css,
 *   /vendor/geist/wght.css, /vendor/geist-mono/wght.css
 */

:root,
.sl-theme-dark {
  /* Tipografia própria: Geist (texto) e Geist Mono (código, ids, coordenadas). */
  --sl-font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
  --sl-font-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
  --sl-font-size-medium: 0.9375rem;
  --sl-border-radius-small: 6px;
  --sl-border-radius-medium: 10px;
  --sl-border-radius-large: 14px;
  --sl-focus-ring-width: 2px;

  /* Cor de marca: o primário do Shoelace passa a ser violeta nas duas aparências. */
  --sl-color-primary-50: var(--sl-color-violet-50);
  --sl-color-primary-100: var(--sl-color-violet-100);
  --sl-color-primary-200: var(--sl-color-violet-200);
  --sl-color-primary-300: var(--sl-color-violet-300);
  --sl-color-primary-400: var(--sl-color-violet-400);
  --sl-color-primary-500: var(--sl-color-violet-500);
  --sl-color-primary-600: var(--sl-color-violet-600);
  --sl-color-primary-700: var(--sl-color-violet-700);
  --sl-color-primary-800: var(--sl-color-violet-800);
  --sl-color-primary-900: var(--sl-color-violet-900);
  --sl-color-primary-950: var(--sl-color-violet-950);

  /* Tokens semânticos usados pelas páginas. */
  --dl-bg: var(--sl-color-neutral-50);
  --dl-surface: var(--sl-color-neutral-0);
  --dl-subtle: var(--sl-color-neutral-100);
  --dl-border: var(--sl-color-neutral-200);
  --dl-text: var(--sl-color-neutral-900);
  --dl-muted: var(--sl-color-neutral-600);
  --dl-accent: var(--sl-color-primary-600);
  --dl-ok: var(--sl-color-success-600);
  --dl-err: var(--sl-color-danger-600);
  --dl-header-h: 56px;
}

.sl-theme-dark {
  --dl-bg: var(--sl-color-neutral-0);
  --dl-surface: var(--sl-color-neutral-50);
  --dl-subtle: var(--sl-color-neutral-100);
  --dl-border: var(--sl-color-neutral-200);
  --dl-accent: var(--sl-color-primary-600);
}

/* Evita o "pisca" de componentes ainda não registrados pelo autoloader. */
:not(:defined) {
  visibility: hidden;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sl-font-sans);
  font-size: var(--sl-font-size-medium);
  line-height: 1.55;
  background: var(--dl-bg);
  color: var(--dl-text);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--dl-accent);
}

code,
pre,
kbd,
.mono {
  font-family: var(--sl-font-mono);
  font-size: 0.85em;
}

code {
  background: var(--dl-subtle);
  border-radius: var(--sl-border-radius-small);
  padding: 1px 6px;
}

pre {
  margin: 0;
  background: var(--dl-subtle);
  border-radius: var(--sl-border-radius-medium);
  padding: 12px 14px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

h1,
h2,
h3 {
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ---------- App shell ---------- */

.dl-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--dl-header-h);
  padding: 8px 16px;
  background: color-mix(in srgb, var(--dl-surface) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dl-border);
}

.dl-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--dl-text);
  text-decoration: none;
  white-space: nowrap;
}

.dl-logo {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
}

.dl-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.dl-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dl-muted);
  margin: 28px 0 12px;
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.dl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-spacer {
  flex: 1;
}

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

.dl-error {
  color: var(--dl-err);
}

.dl-ok {
  color: var(--dl-ok);
}

.dl-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--dl-muted);
  border: 1px dashed var(--dl-border);
  border-radius: var(--sl-border-radius-large);
}

.dl-empty sl-icon {
  font-size: 28px;
}

sl-card {
  --border-color: var(--dl-border);
  --border-radius: var(--sl-border-radius-large);
  --padding: 16px;
  width: 100%;
}

sl-card::part(base) {
  background: var(--dl-surface);
  box-shadow: none;
}

/* Tabela simples (o Shoelace não tem tabela). */
.dl-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dl-surface);
  border: 1px solid var(--dl-border);
  border-radius: var(--sl-border-radius-large);
  overflow: hidden;
}

.dl-table th,
.dl-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--dl-border);
  vertical-align: middle;
}

.dl-table tr:last-child td {
  border-bottom: none;
}

.dl-table th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dl-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 640px) {
  .dl-table,
  .dl-table tbody,
  .dl-table tr,
  .dl-table td {
    display: block;
  }
  .dl-table thead {
    display: none;
  }
  .dl-table td {
    border: none;
    padding: 4px 12px;
  }
  .dl-table tr {
    border-bottom: 1px solid var(--dl-border);
    padding: 8px 0;
  }
  .dl-hide-mobile {
    display: none;
  }
}

/* Rótulo só para leitores de tela (mantém o label acessível em inputs compactos). */
.dl-label-hidden::part(form-control-label) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}