/*
 * Painel administrativo Sorrifit sobre o tema Lumo padrão do Vaadin. Só espaçamento e pequenos blocos de layout: as cores, os raios e as bordas vêm
 * das variáveis do Lumo (claro e escuro funcionam sozinhos). Sem gradientes, sombras, translucidez nem desfoque.
 */
html {
  --lumo-primary-color: #00897b;
  --lumo-primary-color-50pct: #00897b80;
  --lumo-primary-text-color: #00796b;
}

html[theme~="dark"],
html[theme~="dark"] body {
  --lumo-primary-color: #4db6ac;
  --lumo-primary-text-color: #4db6ac;
}

/* ---------- estrutura ---------- */
.sf-page { width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--lumo-space-l) clamp(1rem, 3vw, 2rem) var(--lumo-space-xl); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--lumo-space-l); }
.sf-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--lumo-space-m); }
.sf-header h2 { margin: 0; font-size: var(--lumo-font-size-xxl); font-weight: 600; }
.sf-header p { margin: var(--lumo-space-xs) 0 0; color: var(--lumo-secondary-text-color); font-size: var(--lumo-font-size-s); }
.sf-actions { display: flex; flex-wrap: wrap; gap: var(--lumo-space-s); align-items: center; }

.sf-brand { display: flex; align-items: center; gap: var(--lumo-space-s); padding: var(--lumo-space-m); font-weight: 600; font-size: var(--lumo-font-size-l); }
.sf-brand-logo { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--lumo-border-radius-m); color: var(--lumo-primary-contrast-color); background: var(--lumo-primary-color); }
.sf-brand small { display: block; font-weight: 400; font-size: var(--lumo-font-size-xs); color: var(--lumo-secondary-text-color); text-transform: uppercase; letter-spacing: 0.05em; }
.sf-nav-grupo { margin: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-xs); font-size: var(--lumo-font-size-xxs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--lumo-secondary-text-color); font-weight: 600; }
.sf-navbar-title { font-weight: 600; font-size: var(--lumo-font-size-l); margin: 0; }

/* ---------- cartões ---------- */
.sf-card { border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); background: var(--lumo-base-color); padding: var(--lumo-space-m) var(--lumo-space-l); box-sizing: border-box; }
.sf-card > h3 { margin: 0 0 var(--lumo-space-m); font-size: var(--lumo-font-size-l); font-weight: 600; }
.sf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--lumo-space-m); }
.sf-stat { display: flex; align-items: center; gap: var(--lumo-space-m); border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); padding: var(--lumo-space-m); background: var(--lumo-base-color); }
.sf-stat-icone { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--lumo-border-radius-m); background: var(--lumo-primary-color-10pct); color: var(--lumo-primary-text-color); }
.sf-stat-icone vaadin-icon { width: 1.25rem; height: 1.25rem; }
.sf-stat-valor { font-size: var(--lumo-font-size-xxl); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sf-stat-rotulo { color: var(--lumo-secondary-text-color); font-size: var(--lumo-font-size-s); margin-top: var(--lumo-space-xs); }
.sf-stat.sf-aviso .sf-stat-icone { background: var(--lumo-warning-color-10pct); color: var(--lumo-warning-text-color); }
.sf-stat.sf-perigo .sf-stat-icone { background: var(--lumo-error-color-10pct); color: var(--lumo-error-text-color); }
.sf-stat.sf-neutro .sf-stat-icone { background: var(--lumo-contrast-5pct); color: var(--lumo-secondary-text-color); }
.sf-duas-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--lumo-space-m); }
@media (max-width: 1000px) { .sf-duas-colunas { grid-template-columns: minmax(0, 1fr); } }

/* ---------- selos (usam os selos do Lumo: theme="badge ...") ---------- */
.sf-badge { display: inline-flex; align-items: center; padding: 0.15em 0.6em; border-radius: var(--lumo-border-radius-m); font-size: var(--lumo-font-size-xs); font-weight: 500; white-space: nowrap; background: var(--lumo-contrast-10pct); color: var(--lumo-body-text-color); }
.sf-badge.ok { background: var(--lumo-success-color-10pct); color: var(--lumo-success-text-color); }
.sf-badge.aviso { background: var(--lumo-warning-color-10pct); color: var(--lumo-warning-text-color); }
.sf-badge.erro { background: var(--lumo-error-color-10pct); color: var(--lumo-error-text-color); }
.sf-badge.info { background: var(--lumo-primary-color-10pct); color: var(--lumo-primary-text-color); }
.sf-chips { display: flex; flex-wrap: wrap; gap: var(--lumo-space-xs); }
.sf-chip { display: inline-block; padding: 0.1em 0.55em; border-radius: var(--lumo-border-radius-m); font-size: var(--lumo-font-size-xs); background: var(--lumo-primary-color-10pct); color: var(--lumo-primary-text-color); white-space: nowrap; }
.sf-chip.neutro { background: var(--lumo-contrast-10pct); color: var(--lumo-secondary-text-color); }
.sf-mono { font-family: var(--lumo-font-family-monospace, ui-monospace, Menlo, Consolas, monospace); font-size: var(--lumo-font-size-xs); }
.sf-muted { color: var(--lumo-secondary-text-color); }
.sf-vazio { display: flex; flex-direction: column; align-items: center; gap: var(--lumo-space-s); padding: var(--lumo-space-xl) var(--lumo-space-m); color: var(--lumo-secondary-text-color); text-align: center; }
.sf-vazio vaadin-icon { width: 2rem; height: 2rem; }

/* ---------- tabelas e formulários ---------- */
vaadin-grid.sf-grid { border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); overflow: hidden; }
.sf-toolbar { display: flex; flex-wrap: wrap; gap: var(--lumo-space-m); align-items: flex-end; }
.sf-toolbar > * { min-width: 0; }
.sf-grupo-permissoes { border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); padding: var(--lumo-space-s) var(--lumo-space-m); }
.sf-grupo-permissoes h4 { margin: 0 0 var(--lumo-space-xs); font-size: var(--lumo-font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--lumo-secondary-text-color); }
.sf-kv { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--lumo-space-xs) var(--lumo-space-m); align-items: baseline; }
.sf-kv dt { color: var(--lumo-secondary-text-color); font-size: var(--lumo-font-size-s); }
.sf-kv dd { margin: 0; overflow-wrap: anywhere; }
.sf-senha-gerada { display: flex; align-items: center; gap: var(--lumo-space-s); border: 1px dashed var(--lumo-primary-color); border-radius: var(--lumo-border-radius-m); padding: var(--lumo-space-s) var(--lumo-space-m); background: var(--lumo-primary-color-10pct); }
.sf-senha-gerada code { font-size: var(--lumo-font-size-l); font-weight: 600; letter-spacing: 0.04em; user-select: all; }

/* ---------- login ---------- */
.sf-login { min-height: 100vh; display: grid; place-items: center; padding: var(--lumo-space-l); box-sizing: border-box; background: var(--lumo-contrast-5pct); }
.sf-login-cartao { width: min(100%, 24rem); border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); padding: var(--lumo-space-xl) var(--lumo-space-l); background: var(--lumo-base-color); display: flex; flex-direction: column; gap: var(--lumo-space-m); box-sizing: border-box; }
.sf-login-cartao .sf-brand { padding: 0; font-size: var(--lumo-font-size-xl); }
.sf-login-cartao p { margin: 0; color: var(--lumo-secondary-text-color); font-size: var(--lumo-font-size-s); }
.sf-erro { border-radius: var(--lumo-border-radius-m); padding: var(--lumo-space-s) var(--lumo-space-m); font-size: var(--lumo-font-size-s); background: var(--lumo-error-color-10pct); color: var(--lumo-error-text-color); }

/* Superssérie (treino da biblioteca): linhas do mesmo bi-set/tri-set ganham uma barra lateral */
vaadin-grid.sf-grid::part(sf-superserie) { background: var(--lumo-primary-color-10pct); }
vaadin-grid.sf-grid::part(sf-superserie):first-of-type { box-shadow: inset 3px 0 0 var(--lumo-primary-color); }