/* Tokens do design system VistoriaPro — cópia vendorizada de
   design-system/tokens/, sem alteração de conteúdo. Ordem importa. */
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");

/* Camada semântica do RemarcaPro — o resto do CSS só lê estas variáveis,
   nunca as --vp-, --text- ou --surface- diretamente. Reapontar aqui basta
   pra re-pelar o app inteiro. */
:root{
  --bg:var(--surface-page);
  --surface:var(--surface-card);
  --surface-2:var(--surface-sunken);
  --ink:var(--text-heading);
  --ink-2:var(--text-body);
  --muted:var(--text-muted);
  --line:var(--border-subtle);
  --line-strong:var(--border-default);
  --accent:var(--vp-blue-700);
  --accent-soft:var(--vp-blue-50);
  --accent-ink:var(--vp-blue-800);
  --ok:var(--vp-success-600);
  --ok-soft:var(--vp-success-100);
  --warn:var(--vp-warning-600);
  --warn-soft:var(--vp-warning-100);
  --danger:var(--vp-danger-600);
  --danger-soft:var(--vp-danger-100);
  --shadow:var(--shadow-sm);
  --radius:var(--radius-card);

  /* Tudo abaixo existe pra um tema (css/temas/*.css) conseguir trocar o
     visual inteiro redefinindo só estas variáveis. O valor padrão é o que
     o CSS tinha fixo antes — o tema padrão não muda nada. */
  --on-accent:#fff;              /* texto/ícone sobre --accent */
  --on-warn:#fff;                /* texto sobre --warn (avatar da administradora) */
  --font-heading-weight:700;     /* h1–h4 (era o bold padrão do navegador) */
  --radius-btn:6px;              /* botões */
  --radius-input:6px;            /* campos, banners, controles pequenos */
  --radius-ui:8px;               /* seletor de empresa e menus suspensos */
  --radius-chip:5px;             /* avatares/monogramas pequenos */
  --nav-bg:var(--vp-blue-900);   /* barra lateral */
  --nav-ink:var(--vp-blue-200);
  --nav-ink-muted:var(--vp-blue-300);
  --nav-ink-strong:#fff;
  --nav-hover-bg:rgba(255,255,255,.07);
  --nav-active-bg:var(--vp-blue-700);
  --nav-active-ink:#fff;
  --nav-line:var(--border-inverse);
  --nav-rule:rgba(255,255,255,.22);
  --tag-neutro-bg:var(--vp-neutral-100);  /* tag "rascunho" */
  --tag-neutro-ink:var(--vp-neutral-700);
  --tag-info-bg:var(--vp-blue-100);       /* tag "em execução" */
  --tag-info-ink:var(--vp-blue-800);
  --auth-from:var(--vp-blue-800);         /* degradê das telas públicas (login etc.) */
  --auth-to:var(--vp-blue-500);
  --auth-ink:#fff;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
/* Google Fonts só entrega o @font-face — o utilitário abaixo é o snippet
   oficial do Material Symbols, sem o qual o nome do ícone aparece como
   texto cru em vez de virar o glifo. */
.material-symbols-outlined{
  font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;
  font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 20;
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans),-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display),Arial,sans-serif;font-weight:var(--font-heading-weight);margin:0;letter-spacing:-.01em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.field input,.field select,.field textarea{
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:9px 11px;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field .hint{font-size:11px;color:var(--muted)}
.field .erro{font-size:11.5px;color:var(--danger);margin-top:2px}

.btn{
  border:1px solid transparent;border-radius:var(--radius-btn);padding:9px 16px;font-weight:600;font-size:13.5px;
  background:var(--accent);color:var(--on-accent);transition:filter .15s;
}
.btn-primary{color:var(--on-accent)}
.btn:hover{filter:brightness(1.08)}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2);filter:none}
.btn-quiet{background:transparent;border-color:transparent;color:var(--accent);padding:6px 8px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}

.banner{
  display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--radius-input);font-size:13px;
  border:1px solid;
}
.banner-info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent-ink)}
.banner-warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn)}
.banner-danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent);color:var(--danger)}
.banner-ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ok)}

/* Paginação das listagens (Views/Shared/_Paginacao.cshtml) */
.paginacao{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:12px;line-height:1.4}
.paginacao-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
/* Compactos e inline-flex: como <a> em linha, o padding do .btn invadia a linha de cima. */
.paginacao-links .btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 10px;font-size:13px;line-height:1;text-decoration:none}
.paginacao-links .btn-primary{cursor:default;filter:none}
.paginacao-links > .muted{padding:0 2px}