/* Etapa D2a: componentes padrão (ui-*) e casca da empresa (sb-*, co-*).
   SÓ var(--...) do theme.css: nenhuma cor literal aqui. Tema escuro,
   fonte do sistema, foco visível, alvos de toque de pelo menos 40 px. */

:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

.ui-sr-only {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.ui-skip {
  position:absolute; left:var(--space-2); top:-48px; z-index:2000;
  min-height:40px; padding:0 var(--space-4); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); background:var(--surface-elevated); color:var(--text-strong);
  font:inherit; cursor:pointer;
}
.ui-skip:focus { top:var(--space-2); }
.ui-muted { color:var(--text-secondary); font-size:var(--font-size-md); margin:0; }
.ui-prose { max-width:70ch; line-height:1.6; color:var(--text-primary); margin:0; }

/* ---------- botão ---------- */
.ui-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:40px; padding:0 var(--space-4); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); background:transparent; color:var(--text-strong);
  font:inherit; font-size:var(--font-size-md); font-weight:600; line-height:1; cursor:pointer;
  white-space:nowrap;
}
.ui-btn:hover:not(:disabled) { background:var(--hover); }
.ui-btn:disabled { opacity:.55; cursor:not-allowed; }
.ui-btn--primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ui-btn--primary:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-hover); }
.ui-btn--danger { color:var(--error); border-color:var(--error); }
.ui-btn--danger:hover:not(:disabled) { background:var(--error-soft); }
.ui-btn--icon { width:40px; padding:0; }
.ui-btn svg { flex:none; }

/* ---------- campos ---------- */
.ui-field { display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-4); }
.ui-field:first-child { margin-top:0; }
.ui-label { margin:0; color:var(--text-primary); font-size:var(--font-size-sm); font-weight:600; }
.ui-input {
  width:100%; min-height:40px; height:auto; padding:var(--space-2) var(--space-3);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text-strong); font:inherit; font-size:var(--font-size-md);
  box-shadow:none;
}
.ui-input:focus { border-color:var(--focus-ring); box-shadow:none; }
.ui-input[aria-invalid="true"] { border-color:var(--error); }
.ui-field-help { color:var(--text-secondary); font-size:var(--font-size-sm); line-height:1.5; }
.ui-field-error { color:var(--error); font-size:var(--font-size-sm); }
.ui-field-error[hidden] { display:none; }

/* ---------- selo, aviso, vazio ---------- */
.ui-badge {
  display:inline-flex; align-items:center; padding:2px var(--space-2); border-radius:var(--radius-sm);
  font-size:var(--font-size-sm); font-weight:600; line-height:1.5; white-space:nowrap;
  border:1px solid var(--border); background:var(--hover); color:var(--text-primary);
}
.ui-badge--ok { color:var(--ok); background:var(--ok-soft); border-color:transparent; }
.ui-badge--warn { color:var(--warn); background:var(--warn-soft); border-color:transparent; }
.ui-badge--error { color:var(--error); background:var(--error-soft); border-color:transparent; }
.ui-badge--info { color:var(--info); background:var(--info-soft); border-color:transparent; }
.ui-notice {
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm);
  border-left:3px solid var(--info); background:var(--info-soft);
  color:var(--text-strong); font-size:var(--font-size-md); line-height:1.5;
}
.ui-notice--ok { border-left-color:var(--ok); background:var(--ok-soft); }
.ui-notice--warn { border-left-color:var(--warn); background:var(--warn-soft); }
.ui-notice--error { border-left-color:var(--error); background:var(--error-soft); }
.ui-empty { padding:var(--space-10) 0; color:var(--text-secondary); }
.ui-empty p { margin:0; font-size:var(--font-size-lg); color:var(--text-primary); }
.ui-empty .ui-empty-note { margin-top:var(--space-2); font-size:var(--font-size-md); color:var(--text-secondary); }

/* ---------- cabeçalho de página ---------- */
.ui-page-header {
  display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-4); margin:0 0 var(--space-6); padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border);
}
.ui-page-title { min-width:0; }
.ui-page-title h1 { margin:0; font-size:var(--font-size-xl); letter-spacing:0; color:var(--text-strong); }
.ui-page-title p { margin:var(--space-1) 0 0; max-width:70ch; color:var(--text-secondary); font-size:var(--font-size-md); line-height:1.5; }
.ui-page-actions { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.ui-form-message:empty { display:none; }
.ui-form-message { margin-bottom:var(--space-4); }

/* ---------- tabela de dados ---------- */
.ui-table-wrap {
  position:relative; overflow:auto; max-height:70vh; width:100%;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
}
.ui-table { width:100%; border-collapse:collapse; min-width:560px; font-size:var(--font-size-md); }
.ui-table[hidden] { display:none; }
.ui-table th {
  position:sticky; top:0; z-index:1; padding:var(--space-2) var(--space-4); text-align:left;
  background:var(--surface-elevated); color:var(--text-secondary); font-size:var(--font-size-sm);
  font-weight:600; border-bottom:1px solid var(--border-strong); white-space:nowrap;
}
.ui-table td {
  padding:var(--space-2) var(--space-4); border-bottom:1px solid var(--border);
  color:var(--text-primary); vertical-align:middle;
}
.ui-table tbody tr:last-child td { border-bottom:0; }
.ui-table tbody tr:hover td { background:var(--hover); }
.ui-table .is-end { text-align:right; }
.ui-table-status { padding:var(--space-8) var(--space-4); color:var(--text-secondary); text-align:center; }
.ui-table-status[hidden] { display:none; }
.ui-table-status p { margin:0; }
.ui-cell-stack { display:flex; flex-direction:column; gap:2px; align-items:flex-start; min-width:0; }
.ui-cell-stack small { color:var(--text-secondary); overflow-wrap:anywhere; }
.ui-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:flex-end; }

/* ---------- modal ---------- */
.ui-modal-backdrop {
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:var(--space-5); background:var(--overlay);
}
.ui-modal {
  width:100%; max-width:480px; max-height:calc(100vh - var(--space-10)); overflow:auto;
  padding:var(--space-6); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface-elevated); color:var(--text-strong); box-shadow:var(--shadow-md);
}
.ui-modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); margin-bottom:var(--space-5); }
.ui-modal-head h2 { margin:0; font-size:var(--font-size-lg); }
.ui-modal-head p { margin:var(--space-1) 0 0; color:var(--text-secondary); font-size:var(--font-size-sm); }
.ui-modal-footer:empty { display:none; }
.ui-modal-footer { display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-6); flex-wrap:wrap; }

/* ---------- abas ---------- */
.ui-tabs-list { display:flex; gap:var(--space-1); border-bottom:1px solid var(--border); overflow-x:auto; }
.ui-tab {
  min-height:40px; padding:0 var(--space-4); border:0; border-bottom:2px solid transparent;
  background:transparent; color:var(--text-secondary); font:inherit; font-size:var(--font-size-md);
  cursor:pointer; white-space:nowrap;
}
.ui-tab:hover { color:var(--text-strong); }
.ui-tab[aria-selected="true"] { color:var(--text-strong); border-bottom-color:var(--accent); font-weight:600; }
.ui-tabs-panel { padding-top:var(--space-5); }

/* ---------- Configurações > Permissões ---------- */
.ui-role-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--space-8) var(--space-10); }
.ui-role { min-width:0; }
.ui-role h2 { margin:0 0 var(--space-1); font-size:var(--font-size-lg); color:var(--text-strong); }
.ui-role-perms { margin:var(--space-3) 0 0; padding-left:var(--space-5); color:var(--text-primary); font-size:var(--font-size-md); line-height:1.7; }

/* ---------- casca da empresa ---------- */
/* A casca ocupa 100% da janela: nada centraliza nem limita a largura (login usa .login-main). */
body.company-mode { display:block; place-items:normal; width:100%; max-width:none; margin:0; padding:0; min-width:0; --ctx-h:0px; }
body.company-mode.has-ctx { --ctx-h:52px; }
body.company-mode .ctx-bar { height:var(--ctx-h); padding:0 var(--space-4); width:100%; max-width:none; margin:0; }
body.company-mode .ctx-bar .ui-btn { min-height:40px; }
.co-shell { display:flex; align-items:stretch; width:100%; max-width:none; margin:0; min-height:100vh; }
.co-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.co-topbar { display:none; }
/* o login usa .login-main (base.css); aqui o conteúdo usa a largura útil */
.co-main { width:auto; max-width:none; flex:1; min-width:0; padding:var(--space-8) var(--space-8) var(--space-12); }
.co-main:focus { outline:none; }
.co-content { width:100%; max-width:none; margin:0; text-align:left; }

.sb {
  flex:0 0 var(--sb-width); width:var(--sb-width); position:sticky; top:0;
  align-self:flex-start; height:100vh; display:flex; flex-direction:column;
  padding:var(--space-4) var(--space-3); background:var(--sidebar); border-right:1px solid var(--border);
  overflow-y:auto;
}
.sb-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  padding:var(--space-2) var(--space-3) var(--space-4); }
.sb-company { font-size:var(--font-size-lg); color:var(--text-strong); overflow-wrap:anywhere; }
.sb-close { display:none; }
.sb-nav { display:flex; flex-direction:column; gap:var(--space-1); }
.sb > .sb-nav { flex:1; }
.sb-empty { margin:0; padding:var(--space-2) var(--space-3); color:var(--text-secondary); font-size:var(--font-size-md); line-height:1.5; }
.sb-tabs { display:flex; gap:var(--space-1); padding:var(--space-1); margin:0 0 var(--space-3);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); }
.sb-tab {
  flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:40px; padding:0 var(--space-3); border:0; border-radius:var(--radius-sm); background:transparent;
  color:var(--text-secondary); font:inherit; font-size:var(--font-size-md); font-weight:600; cursor:pointer;
}
.sb-tab:hover { background:var(--hover); color:var(--text-strong); }
.sb-tab[aria-selected="true"] { background:var(--accent-soft); color:var(--text-strong); }
.sb-tab[aria-selected="true"] .sb-ic { color:var(--accent); }
.sb-ic { display:inline-flex; color:var(--text-secondary); }
.sb-group { padding:0 var(--space-3); font-size:var(--font-size-xs); font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; }
.sb-items { list-style:none; margin:var(--space-1) 0 var(--space-2); padding:0; }
.sb-link {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  min-height:40px; padding:0 var(--space-3); border-radius:var(--radius-sm);
  color:var(--text-secondary); font-size:var(--font-size-md); text-decoration:none;
  border-left:2px solid transparent;
}
.sb-link:hover { background:var(--hover); color:var(--text-strong); }
.sb-link[aria-current="page"] { color:var(--text-strong); background:var(--accent-soft); border-left-color:var(--accent); font-weight:600; }
.sb-soon { font-size:var(--font-size-xs); color:var(--text-tertiary); white-space:nowrap; }
.sb-foot { display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--border); }
.sb-user { display:flex; flex-direction:column; padding:0 var(--space-3); font-size:var(--font-size-md); color:var(--text-strong); min-width:0; }
.sb-user strong, .sb-user small { overflow-wrap:anywhere; }
.sb-user small { color:var(--text-secondary); font-size:var(--font-size-sm); }
.sb-backdrop { display:none; }

/* ---------- celular e tela estreita: sidebar vira menu recolhível ---------- */
@media (max-width:899px) {
  .co-topbar {
    display:flex; align-items:center; gap:var(--space-3); position:sticky; top:var(--ctx-h); z-index:40;
    min-height:56px; padding:var(--space-2) var(--space-4); background:var(--sidebar);
    border-bottom:1px solid var(--border);
  }
  .co-topbar-title { font-weight:600; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .co-main { padding:var(--space-5) var(--space-4) var(--space-10); }
  .sb {
    position:fixed; top:0; bottom:0; left:0; z-index:90; height:auto;
    width:min(var(--sb-width), 86vw); max-width:86vw; flex:none;
    transform:translateX(-100%); visibility:hidden;
    transition:transform .2s, visibility 0s linear .2s; box-shadow:var(--shadow-md);
  }
  .co-shell.is-nav-open .sb { transform:none; visibility:visible; transition:transform .2s; }
  .sb-close { display:inline-flex; }
  .sb-backdrop { position:fixed; inset:0; z-index:80; background:var(--overlay); }
  .sb-backdrop:not([hidden]) { display:block; }
  .ui-page-header { margin-bottom:var(--space-4); }
}
@media (prefers-reduced-motion:reduce) {
  .sb { transition:none; }
}

/* ---------- Etapa D3: listagem (uiList) ---------- */
.ui-list { display:flex; flex-direction:column; gap:var(--space-4); width:100%; min-width:0; }
.ui-list-header { margin:0; align-items:flex-end; border-bottom:0; padding-bottom:0; }
.ui-list-tools { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.ui-list-search { position:relative; display:flex; align-items:center; min-width:220px; }
.ui-list-search > svg { position:absolute; left:var(--space-3); color:var(--text-secondary); pointer-events:none; }
.ui-list-search-input { padding-left:var(--space-8); width:260px; }
.ui-list-filter-wrap { position:relative; }
.ui-list-filter-count {
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 var(--space-1); border-radius:var(--radius-sm); background:var(--accent);
  color:var(--on-accent); font-size:var(--font-size-sm); line-height:1;
}
.ui-list-filter-count[hidden] { display:none; }
.ui-list-filters {
  position:absolute; right:0; top:calc(100% + var(--space-2)); z-index:20; width:280px;
  display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-4);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface-elevated); box-shadow:var(--shadow-md);
}
.ui-list-filters[hidden] { display:none; }
.ui-list-filters-foot { display:flex; justify-content:flex-end; margin-top:var(--space-4); }
.ui-list-refresh.is-spinning svg { animation:ui-list-spin 900ms linear infinite; }
@keyframes ui-list-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .ui-list-refresh.is-spinning svg { animation:none; } }

/* faixa de resumo: números pequenos, sem cartões */
.ui-list-summary { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); margin:0; padding:0; }
.ui-list-summary[hidden] { display:none; }
.ui-list-stat { display:flex; flex-direction:column-reverse; gap:2px; }
.ui-list-stat dt { color:var(--text-secondary); font-size:var(--font-size-sm); }
.ui-list-stat dd { margin:0; color:var(--text-strong); font-size:var(--font-size-lg); font-weight:600; }
.ui-list-stale[hidden] { display:none; }

/* tabela densa colada ao rodapé */
.ui-list-card {
  display:flex; flex-direction:column; min-width:0;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
}
.ui-list-table-wrap { position:relative; overflow:auto; max-height:70vh; min-width:0; }
.ui-list-table { width:100%; border-collapse:collapse; min-width:640px; font-size:var(--font-size-md); }
.ui-list-table[hidden] { display:none; }
.ui-list-table th {
  position:sticky; top:0; z-index:1; height:40px; padding:0 var(--space-4); text-align:left;
  background:var(--surface-elevated); color:var(--text-secondary); font-size:var(--font-size-sm);
  font-weight:600; border-bottom:1px solid var(--border-strong); white-space:nowrap;
}
.ui-list-table td {
  height:44px; padding:0 var(--space-4); border-bottom:1px solid var(--border);
  color:var(--text-primary); vertical-align:middle; white-space:nowrap;
}
.ui-list-table tbody tr:last-child td { border-bottom:0; }
.ui-list-table tbody tr:hover td { background:var(--hover); }
.ui-list-table .is-end { text-align:right; }
.ui-list-sort {
  display:inline-flex; align-items:center; gap:var(--space-1); min-height:40px; padding:0; border:0;
  background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer;
}
.ui-list-sort:hover { color:var(--text-strong); }
.ui-list-sort-icon { display:inline-flex; width:14px; height:14px; }
.ui-list-table th[aria-sort="ascending"], .ui-list-table th[aria-sort="descending"] { color:var(--text-strong); }
.ui-list-cell, .ui-list-masked { display:inline-flex; align-items:center; gap:var(--space-2); }
.ui-list-secret { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.04em; }
.ui-list-icon-btn {
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0;
  border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-secondary); cursor:pointer;
}
.ui-list-icon-btn:hover:not(:disabled) { background:var(--hover); color:var(--text-strong); }
.ui-list-icon-btn:disabled { opacity:.55; cursor:not-allowed; }
.ui-list-icon-btn.is-done { color:var(--ok); }
.ui-list-actions-col { width:1%; }
.ui-list-clip { position:fixed; left:-9999px; top:0; width:1px; height:1px; opacity:0; }

.ui-list-status { padding:var(--space-8) var(--space-4); color:var(--text-secondary); text-align:center; }
.ui-list-status[hidden] { display:none; }
.ui-list-empty p { margin:0 0 var(--space-3); color:var(--text-primary); font-size:var(--font-size-lg); }
.ui-list-error { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); }
.ui-list-skeleton { display:flex; flex-direction:column; gap:var(--space-3); }
.ui-list-skeleton-row { display:block; height:20px; border-radius:var(--radius-sm); background:var(--hover); }
.ui-list-skeleton-row:nth-child(odd) { width:92%; }
.ui-list-skeleton-row:nth-child(even) { width:78%; }

/* rodapé de paginação */
.ui-list-footer {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-3) var(--space-6); padding:var(--space-2) var(--space-4);
  border-top:1px solid var(--border-strong); background:var(--surface-elevated);
  color:var(--text-secondary); font-size:var(--font-size-md);
}
.ui-list-size-wrap, .ui-list-nav { display:flex; align-items:center; gap:var(--space-2); }
.ui-list-size { width:auto; min-width:72px; }
.ui-list-nav { gap:var(--space-4); }
.ui-list-nav-btns { display:flex; align-items:center; gap:var(--space-1); }
.ui-list-nav-btns [hidden] { display:none; }
.ui-list-page-text { color:var(--text-primary); }
.ui-list-sort:focus-visible, .ui-list-icon-btn:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

@media (max-width:640px) {
  .ui-list-search, .ui-list-search-input { width:100%; min-width:0; }
  .ui-list-search { flex:1 1 100%; }
  .ui-list-filters { left:0; right:auto; width:min(280px, calc(100vw - 2 * var(--space-4))); }
  .ui-list-footer { flex-direction:column; align-items:stretch; gap:var(--space-2); }
  .ui-list-size-wrap { justify-content:space-between; }
  .ui-list-nav { justify-content:space-between; }
}

/* Etapa 4.5: estado online/offline com ponto de cor */
.ui-status-dot { display:inline-flex; align-items:center; gap:var(--space-2); }
.ui-dot { width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none; }
.ui-status-dot--ok .ui-dot { background:var(--ok); }