/* ===================================================================
   Material Design 3 — design tokens
   Tema claro = padrão (:root). Tema escuro = [data-theme="dark"].
   Os componentes Material Web leem os --md-sys-color-*; o resto da
   interface (cards, tabela, badges) consome os "vars legados" abaixo,
   que apontam para esses mesmos tokens.
   =================================================================== */
:root {
  /* --- Material 3 system colors (claro) --- */
  --md-sys-color-primary: #1b6ef3;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d8e2ff;
  --md-sys-color-on-primary-container: #001a40;
  --md-sys-color-secondary: #565e71;
  --md-sys-color-secondary-container: #dae2f9;
  --md-sys-color-on-secondary-container: #131c2b;
  --md-sys-color-surface: #faf9fd;
  --md-sys-color-surface-dim: #dad9e0;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f3fa;
  --md-sys-color-surface-container: #eeedf4;
  --md-sys-color-surface-container-high: #e8e7ef;
  --md-sys-color-surface-container-highest: #e2e2e9;
  --md-sys-color-on-surface: #1a1c20;
  --md-sys-color-on-surface-variant: #44474f;
  --md-sys-color-outline: #74777f;
  --md-sys-color-outline-variant: #c4c6d0;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;

  /* tons semânticos auxiliares (status/badges) */
  --green: #1a7f37;
  --red: #cf222e;
  --yellow: #9a6700;

  color-scheme: light;

  /* --- "vars legados" usados pelo CSS da página (resolvem por escopo,
         então herdam automaticamente o override do tema escuro) --- */
  --bg: var(--md-sys-color-surface);
  --surface: var(--md-sys-color-surface-container-low);
  --surface-2: var(--md-sys-color-surface-container-high);
  --border: var(--md-sys-color-outline-variant);
  --text: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --primary: var(--md-sys-color-primary);
  --primary-hover: var(--md-sys-color-primary);
  --radius: 12px;
}

[data-theme="dark"] {
  --md-sys-color-primary: #aac7ff;
  --md-sys-color-on-primary: #002f65;
  --md-sys-color-primary-container: #00468f;
  --md-sys-color-on-primary-container: #d8e2ff;
  --md-sys-color-secondary: #bec6dc;
  --md-sys-color-secondary-container: #3c4658;
  --md-sys-color-on-secondary-container: #dae2f9;
  --md-sys-color-surface: #111318;
  --md-sys-color-surface-dim: #111318;
  --md-sys-color-surface-container-lowest: #0c0e13;
  --md-sys-color-surface-container-low: #191c20;
  --md-sys-color-surface-container: #1d2024;
  --md-sys-color-surface-container-high: #282a2f;
  --md-sys-color-surface-container-highest: #33353a;
  --md-sys-color-on-surface: #e2e2e6;
  --md-sys-color-on-surface-variant: #c4c6d0;
  --md-sys-color-outline: #8e9099;
  --md-sys-color-outline-variant: #44474f;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;

  --green: #4ac26b;
  --red: #ff7b72;
  --yellow: #e3b341;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--md-sys-color-surface-container);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { font-size: 28px; }
.brand h1 { margin: 0; font-size: 18px; font-weight: 500; }
.brand small { color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.company-select {
  min-width: 190px;
  --md-outlined-field-top-space: 8px;
  --md-outlined-field-bottom-space: 8px;
}
.company-select[hidden] { display: none !important; }

.status-pill {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.status-pill.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.status-pill.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }

main { max-width: min(1600px, 95vw); margin: 24px auto; padding: 0 24px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}

.tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}
.tab.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

.search-panel { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.search-panel .grow { flex: 1; min-width: 220px; }
.search-panel md-filled-button { margin-top: 4px; }

/* Chips de período (1/7/15/30 dias) preenchem o De/Até */
.period-row { flex-basis: 100%; }
.period-row .label { font-size: 12px; color: var(--muted); margin-bottom: 6px; display: block; }
.period-chips { --md-assist-chip-container-shape: 999px; }

/* Componentes Material Web compartilham o mesmo shape/altura */
md-outlined-text-field,
md-outlined-select { min-width: 170px; }

.results-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.results-toolbar .spacer { flex: 1; }
.results-toolbar .name-search { min-width: 220px; }
.summary { color: var(--muted); }
.checkbox { display: flex; align-items: center; gap: 7px; cursor: pointer; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
tbody tr:hover { background: var(--md-sys-color-surface-container); }
tbody tr:last-child td { border-bottom: none; }
.col-check { width: 44px; }
.col-actions { width: 120px; }
.order-id { font-weight: 600; cursor: pointer; color: var(--primary); }
.order-id:hover { text-decoration: underline; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
}
.badge.green { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.badge.yellow { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); }
.badge.red { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.badge.blue { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.page-info { color: var(--muted); }

.empty, .loading, .error-box { text-align: center; padding: 28px; color: var(--muted); }
.error-box {
  color: var(--md-sys-color-error);
  background: color-mix(in srgb, var(--md-sys-color-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 35%, transparent);
  border-radius: var(--radius); white-space: pre-wrap; text-align: left;
}

.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

/* ===================== Diálogo (md-dialog) ===================== */
#modal {
  --md-dialog-container-max-width: 96vw;
  --md-dialog-container-min-width: 92vw;
  --md-dialog-container-max-block-size: 92vh;
  width: 96vw;
}
/* área de conteúdo ocupa mais altura para o detalhe parecer "tela cheia" */
#modalBody { min-height: min(62vh, 640px); }
.dialog-headline { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
#modalBody h2 { margin-top: 0; font-weight: 500; }
#modalBody h3 { font-weight: 500; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 24px; margin: 14px 0; }
.detail-grid .k { color: var(--muted); font-size: 12px; }
.detail-grid .v { margin-bottom: 8px; }
.items-list { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; }
.items-list .item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.modal-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; }

/* ===================== Login (Google) ===================== */
.user-email { font-size: 13px; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-email[hidden], .login-overlay[hidden] { display: none !important; }

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  width: min(420px, 92vw);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}
.login-card .logo { font-size: 44px; display: block; margin-bottom: 8px; }
.login-card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 500; }
.login-sub { color: var(--muted); margin: 0 0 24px; }
#gsiButton { display: flex; justify-content: center; min-height: 44px; }
.login-error {
  margin: 18px 0 0;
  color: var(--md-sys-color-error);
  background: color-mix(in srgb, var(--md-sys-color-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 35%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.login-error[hidden] { display: none !important; }