/* app/css/telas.css
   O que só uma tela usa: o login, a janela de usuário e o relatório. */

/* ── Login ────────────────────────────────────────────────────────────── */
.dm-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--dm-sp-6); }
.dm-auth-card { width: 100%; max-width: 380px; }
.dm-auth-card h1 { font-size: var(--dm-fs-lg); margin: 0 0 var(--dm-sp-1); }
.dm-auth-card p { margin: 0 0 var(--dm-sp-5); color: var(--dm-text-2); font-size: var(--dm-fs-md); }
.dm-auth-brand { font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-titulo); letter-spacing: 1px; color: var(--dm-text-3); margin-bottom: var(--dm-sp-4); }
.dm-auth-error { color: var(--dm-danger); font-size: var(--dm-fs-sm); min-height: 18px; margin-bottom: var(--dm-sp-3); }
.dm-auth-status {
  margin-top: var(--dm-sp-4); padding: var(--dm-sp-3) var(--dm-sp-3); font-size: var(--dm-fs-sm); line-height: 1.5;
  border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm);
  background: var(--dm-surface-2); color: var(--dm-text-2);
}
.dm-auth-status:empty { display: none; }
.dm-auth-status--error { color: var(--dm-danger); border-color: var(--dm-danger); }
.dm-auth-links { display: flex; justify-content: space-between; gap: var(--dm-sp-2); margin-top: var(--dm-sp-3); }
/* The code field (platform recipe code-field, section 4). The JS uppercases the
   VALUE; this only stops it flashing lowercase. text-indent offsets the space
   letter-spacing leaves after the last letter, or "centered" sits crooked. */
.dm-code {
  text-align: center; text-transform: uppercase;
  letter-spacing: .3em; text-indent: .3em;
  font-variant-numeric: tabular-nums; font-weight: var(--dm-fw-forte); font-size: var(--dm-fs-num);
}
.dm-auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--dm-sp-3); }

/* ── Users, modal, scopes ─────────────────────────────────────────────── */
.dm-row--off td { opacity: 0.55; }
.dm-modal {
  position: fixed; inset: 0; z-index: 40;
  background: var(--dm-overlay);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--dm-sp-12) var(--dm-sp-5); overflow-y: auto;
}
.dm-modal-card {
  width: 100%; max-width: 620px;
  background: var(--dm-surface); border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius); box-shadow: var(--dm-shadow);
  padding: var(--dm-sp-6) var(--dm-sp-6);
}
.dm-modal-card h2 { margin: 0 0 var(--dm-sp-5); font-size: var(--dm-fs-lg); }
.dm-scope-grid { display: flex; flex-wrap: wrap; gap: var(--dm-sp-2) var(--dm-sp-4); }
.dm-scope-item { display: inline-flex; align-items: center; gap: var(--dm-sp-2); font-size: var(--dm-fs-md); cursor: pointer; }
.dm-scope-item input { width: 16px; height: 16px; accent-color: var(--dm-primary); }

/* ── Report ───────────────────────────────────────────────────────────── */
.dm-report-controls { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0 var(--dm-sp-4); }
@media (max-width: 760px) { .dm-report-controls { grid-template-columns: 1fr; } }
.dm-report-form { margin-bottom: var(--dm-sp-5); }
.dm-report h2 { font-size: var(--dm-fs-lg); margin: var(--dm-sp-1) 0 var(--dm-sp-2); }
.dm-report h3 { font-size: var(--dm-fs-md); margin: var(--dm-sp-6) 0 var(--dm-sp-3); color: var(--dm-text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.dm-report-org { font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-titulo); letter-spacing: 0.6px; text-transform: uppercase; color: var(--dm-text-3); }
.dm-report-head { border-bottom: 1px solid var(--dm-border); padding-bottom: var(--dm-sp-4); margin-bottom: var(--dm-sp-5); }
.dm-report-stats { margin-bottom: var(--dm-sp-2); }
.dm-report-stats .dm-stat { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); }

@media print {
  body { background: var(--dm-surface); font-size: var(--dm-fs-sm); }
  .dm-topbar, .dm-noprint, .dm-notices { display: none !important; }
  .dm-main { padding: 0; }
  .dm-view { max-width: none; }
  .dm-card { border: 0; box-shadow: none; padding: 0; }
  .dm-report-stats .dm-stat { border: 1px solid var(--dm-border); }
  .dm-table th, .dm-table td { padding: var(--dm-sp-2) var(--dm-sp-2); }
  .dm-report h3 { break-after: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
}