.account-password-dialog{width:min(420px,calc(100% - 32px));padding:28px;border:1px solid var(--color-border);border-radius:20px;background:var(--color-surface);color:var(--color-text);box-shadow:0 24px 70px rgba(15,23,42,.24)}
.account-password-dialog::backdrop{background:rgba(15,23,42,.48);backdrop-filter:blur(8px)}
.account-password-dialog form{position:relative}
.account-password-dialog h2{margin:6px 0 8px}
.account-password-dialog label{display:block;margin-top:16px;font-size:13px;font-weight:700}
.account-password-dialog input{width:100%;height:44px;margin-top:7px;padding:0 12px;border:1px solid var(--ui-control-border);border-radius:var(--ui-control-radius);font:inherit}
.account-password-dialog input:focus{outline:3px solid var(--color-focus);border-color:var(--color-primary)}
/* Antes ficava fora da caixa (offsets negativos). Com o diálogo agora
   podendo rolar internamente (overflow-y:auto em dialog{}, ver styles.css),
   qualquer coisa que ultrapasse a borda do diálogo é cortada pelo overflow
   — por isso o X passou para dentro da caixa, igual ao .dialog-close comum. */
.account-password-dialog .dialog-close{position:absolute;top:14px;right:14px}
.account-password-dialog .account-password-submit{width:100%;margin-top:10px}
.account-password-dialog .success{color:var(--color-success-text)}
/* O diálogo de assinatura precisa de mais espaço horizontal que os demais
   diálogos de conta (senha etc.), que continuam com o width padrão. */
#adminSignatureDialog{width:min(640px,calc(100% - 32px))}
.admin-signature-preview-wrap{margin:16px 0 0;text-align:center}
.admin-signature-preview-wrap label{margin-top:0;text-align:left}
.admin-signature-preview-wrap img{max-height:70px;margin-top:6px}
.admin-signature-canvas-wrap{margin-top:16px;padding:11px;border:1px solid var(--color-border);border-radius:16px;background:#f8fafc}
.admin-signature-canvas-wrap label{margin-top:0}
/* Área de desenho grande e fluida: acompanha a largura do diálogo e a
   altura da tela (clamp), em vez de um tamanho fixo em px. A resolução
   real do canvas (largura/altura em pixels) é ajustada por JavaScript
   conforme o tamanho renderizado e a densidade de pixels do monitor —
   o CSS só define o espaço visual disponível. */
#adminSignatureCanvas{display:block;width:100%;height:clamp(180px,26vh,260px);margin:7px 0;border:1px solid var(--color-border);border-radius:12px;background:#fff;touch-action:none;cursor:crosshair}
.admin-signature-canvas-wrap .text-button{border:0;background:transparent;color:var(--color-primary);font:750 12px inherit;cursor:pointer;padding:0}
/* Fase 2 — autorização de dispositivos em lote (2026-08-04). */
#deviceBulkAuthDialog{width:min(520px,calc(100% - 32px))}
#deviceBulkAuthDialog select{width:100%;height:44px;margin-top:7px;padding:0 12px;border:1px solid var(--ui-control-border);border-radius:var(--ui-control-radius);font:inherit;background:#fff}
.device-bulk-employee-list{max-height:220px;overflow-y:auto;margin-top:8px;padding:8px;border:1px solid var(--color-border);border-radius:12px;display:grid;gap:4px}
/* O diálogo de dispositivos reaproveita a caixa de .account-password-dialog só
   pela aparência, e herdava junto o `label{display:block}` daqui: sem flex, o
   row-reverse do toggle não valia e a chave aparecia à ESQUERDA do nome, ao
   contrário de todo o resto do sistema. Restaura o componente canônico. */
.device-bulk-employee-list .toggle-field{font-size:13px;font-weight:500;padding:4px 2px;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:10px}
.device-bulk-employee-list .toggle-field > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-bulk-flag{margin-left:6px;color:#8a94a6;font-size:11px;font-style:normal}
/* Cabeçalho da lista (busca + chave "Todos"). Fica GRUDADO no topo porque a
   caixa rola: com a lista da empresa inteira, o controle que marca todos não
   pode sumir de vista assim que se começa a rolar. */
.device-bulk-toolbar{position:sticky;top:-8px;z-index:1;display:grid;gap:8px;margin:-8px -8px 4px;padding:8px;border-bottom:1px solid var(--color-border);background:#fff}
.device-bulk-toolbar .people-search{width:100%}
.device-bulk-employee-list .device-bulk-all{font-weight:750}
.device-bulk-count{color:#8a94a6;font-size:11px;font-style:normal;font-weight:600}
/* A lista rolável é a caixa inteira; as linhas ficam num contêiner próprio só
   para a busca poder escondê-las sem afetar o cabeçalho. */
.device-bulk-rows{display:grid;gap:4px}
.device-auth-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

/* Código curto do aparelho (deviceShortCode em app.js). Dois aparelhos do mesmo
   modelo eram indistinguíveis na lista; o código é derivado do device_id, então
   é estável entre telas e sessões. Fonte monoespaçada porque ele existe para ser
   conferido caractere a caractere contra a etiqueta do aparelho. */
.device-code{margin-left:7px;padding:1px 6px;border-radius:6px;background:#eef2f7;color:#5a6b82;font:700 10.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}

/* Cadastro de aparelhos (Configurações → Pessoas). ID e modelo vêm do aparelho
   e não mudam; o apelido é o único campo editável — por isso só ele tem ação. */
.device-registry{margin-top:18px;padding-top:16px;border-top:1px solid var(--color-border)}
.device-registry-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px}
.device-registry-table{max-height:300px;overflow:auto;border:1px solid var(--color-border);border-radius:12px}
.device-registry-table table{width:100%;border-collapse:collapse}
.device-registry-table th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#64748b;font-size:10px;letter-spacing:.06em;text-align:left;padding:9px 12px}
.device-registry-table td{padding:9px 12px;border-top:1px solid var(--color-border);font-size:12.5px;vertical-align:middle}
/* Na coluna de ID o código é o conteúdo principal, não um sufixo do nome. */
.device-code-lead{margin-left:0}
.device-registry-empty{color:#94a3b8;font-size:11px;font-style:italic}

/* Diálogo de apagar aparelho. A lista nominal de quem será desvinculado é a
   proteção da ação — por isso ela ocupa o corpo do diálogo, não uma nota. */
.device-delete-dialog{width:min(560px,calc(100% - 32px))}
.device-delete-dialog .device-delete-hint{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff9ef;color:#7a5410;font-size:12px;line-height:1.5}
.device-delete-table{max-height:260px;overflow:auto;margin-top:14px;border:1px solid var(--color-border);border-radius:12px}
.device-delete-table table{width:100%;border-collapse:collapse}
.device-delete-table th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#64748b;font-size:10px;letter-spacing:.06em;text-align:left;padding:9px 12px}
.device-delete-table td{padding:9px 12px;border-top:1px solid var(--color-border);font-size:12.5px}
.device-delete-dialog .danger-button{border-color:#dc3545;background:#dc3545}
.device-registry-delete{margin-left:6px;color:#c1333f}