/*
 * G5Food Clean UI — Fase 1
 * Camada visual não destrutiva. Mantém componentes, IDs e fluxos existentes.
 */
:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --bg-soft: #eef2f5;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #edf1f4;
  --line: #e1e6ea;
  --line-strong: #cbd3da;
  --text: #17212b;
  --muted: #667581;
  --yellow: #f4b400;
  --yellow-soft: #fff7dc;
  --green: #16845b;
  --green-soft: #e7f6ef;
  --red: #c53c4b;
  --red-soft: #fcecef;
  --blue: #2563a9;
  --radius: 14px;
  --shadow: 0 8px 28px rgb(28 42 55 / 8%);
}
html, body { background: var(--bg); color: var(--text); }
body { background-image: none; }
:focus-visible { outline-color: #2563a9; }
.auth-shell { width: min(1180px, calc(100% - 32px)); gap: 0; padding: 40px 0; }
.auth-brand, .auth-panel { border-color: var(--line); box-shadow: var(--shadow); }
.auth-brand {
  min-height: 660px;
  border-radius: 22px 0 0 22px;
  color: #fff;
  background: linear-gradient(145deg, #1c2b36, #263b48);
}
.auth-brand::after { border-color: rgb(255 255 255 / 6%); }
.auth-brand img { filter: brightness(0) invert(1); }
.auth-brand > p { color: #d7e0e5; }
.auth-capabilities span { border-color: rgb(255 255 255 / 16%); color: #eef3f5; background: rgb(255 255 255 / 7%); }
.auth-panel { border-radius: 0 22px 22px 0; background: #fff; }
.field input, .field select, input, select {
  color: var(--text);
  border-color: var(--line-strong);
  background: #fff;
}
input::placeholder { color: #95a1aa; }
.sidebar {
  color: var(--text);
  border-right-color: var(--line);
  background: #fff;
  box-shadow: 4px 0 18px rgb(28 42 55 / 4%);
}
.sidebar__brand img { filter: none; }
.nav-label { color: #8a969f; }
.nav-item { color: #53616c; }
.nav-item:hover { color: var(--text); background: #f3f6f8; }
.nav-item.is-active {
  color: #17212b;
  background: #fff4cc;
  box-shadow: inset 3px 0 #f4b400;
}
.nav-item.is-active .nav-icon { color: #b57c00; }
.sidebar__footer, .workspace-header { border-color: var(--line); background: #fff; }
.workspace__body, main { background: var(--bg); }
.workspace-header { box-shadow: 0 1px 0 var(--line); }
.context-selectors label, .profile-button small { color: var(--muted); }
.profile-button, .quiet-button, .secondary-button, .icon-button {
  color: var(--text);
  border-color: var(--line);
  background: #fff;
}
.profile-button:hover, .quiet-button:hover, .secondary-button:hover { background: #f5f7f8; }
.primary-button { color: #17212b; background: #f4b400; box-shadow: none; }
.primary-button:hover { background: #e5a900; }
.panel, .metric-card, .master-card, .empty-state {
  color: var(--text);
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.panel-heading, .definition-list > div, .store-list > *, .delivery-roadmap > * { border-color: var(--line); }
.metric-card > span, .metric-card small, .page-heading p, .panel p, .definition-list dt { color: var(--muted); }
.status-pill { box-shadow: none; }
.callout, .security-note { color: #43515c; background: #f2f6f8; border-color: #cdd9e1; }
.toast { color: var(--text); border-color: var(--line); background: #fff; box-shadow: var(--shadow); }
dialog { color: var(--text); border-color: var(--line); background: #fff; }
dialog::backdrop { background: rgb(24 34 42 / 42%); }
@media (max-width: 860px) {
  .auth-shell { display: block; padding: 16px 0; }
  .auth-brand { min-height: auto; padding: 36px 28px; border-radius: 18px 18px 0 0; }
  .auth-brand h1 { font-size: clamp(36px, 10vw, 52px); }
  .auth-panel { border-radius: 0 0 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}