/* VF visual system. Loaded after legacy styles; no business or display-state rules. */
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) {
  --vf-bg: #101118;
  --vf-panel: #191b26;
  --vf-panel-raised: #202330;
  --vf-panel-soft: #151721;
  --vf-line: rgba(181, 186, 209, .14);
  --vf-line-strong: rgba(181, 186, 209, .26);
  --vf-ink: #eeeef6;
  --vf-muted: #a0a4ba;
  --vf-accent: #b5a0ef;
  --vf-accent-solid: #8b70d0;
  --vf-accent-wash: rgba(171, 146, 230, .1);
  --vf-success: #80cbb0;
  --vf-danger: #ee9ba9;
  --vf-warning: #e7c17f;
  --vf-elevation: 0 4px 16px rgba(0, 0, 0, .1);
  --vf-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --vf-page-gutter: clamp(24px, 2.8vw, 52px);
  --vf-sidebar-size: 232px;
  --vf-compact-shell-sidebar: var(--vf-sidebar-size);
  --panel: var(--vf-panel);
  --panel-2: var(--vf-panel-soft);
  --border: var(--vf-line);
  --text: var(--vf-ink);
  --muted: var(--vf-muted);
  --soft: var(--vf-muted);
  --primary: var(--vf-accent-solid);
  --primary-hover: #9c81df;
  --success: var(--vf-success);
  --danger: var(--vf-danger);
  --warning: var(--vf-warning);
  --info: #8fbddd;
  --vf-text: var(--vf-ink);
  --vf-text-strong: var(--vf-ink);
  --vf-text-muted: var(--vf-muted);
  --vf-surface-page: var(--vf-bg);
  --vf-surface-panel: var(--vf-panel);
  --vf-surface-card: var(--vf-panel);
  --vf-surface-card-strong: var(--vf-panel-raised);
  --vf-surface-field: var(--vf-panel-soft);
  --vf-border: var(--vf-line);
  --vf-border-soft: var(--vf-line);
  --vf-shadow-card: var(--vf-elevation);
  --vf-gradient-primary: linear-gradient(120deg, #9074d3, #8065c4);
  --vf-gradient-primary-hover: linear-gradient(120deg, #9b80dd, #8b70cf);
  --vf-scrollbar-thumb: #555568;
  --vf-scrollbar-thumb-hover: #75748a;
  --vf-scrollbar-track: transparent;
  --theme-scroll-thumb: #555568;
  --theme-scroll-track: transparent;
  color: var(--vf-ink);
  background: var(--vf-bg) !important;
  padding: 0 !important;
  font: 14px/1.55 var(--vf-font);
  -webkit-font-smoothing: antialiased;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))).theme-light {
  --vf-bg: #f3f4f8;
  --vf-panel: #ffffff;
  --vf-panel-raised: #f0f1f7;
  --vf-panel-soft: #f8f9fc;
  --vf-line: rgba(46, 42, 67, .12);
  --vf-line-strong: rgba(46, 42, 67, .24);
  --vf-ink: #28293b;
  --vf-muted: #63677b;
  --vf-accent: #7253b8;
  --vf-accent-solid: #795bc1;
  --vf-accent-wash: rgba(125, 92, 188, .07);
  --vf-success: #237f60;
  --vf-danger: #b74660;
  --vf-warning: #95702c;
  --vf-elevation: 0 4px 20px rgba(49, 42, 77, .035);
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) *, body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) *::before, body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) *::after { font-family: var(--vf-font); }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(button, input, select, textarea) { font-family: var(--vf-font); }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--vf-accent) !important;
  outline-offset: 3px;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(button, input, select, textarea):disabled { opacity: .48; cursor: not-allowed; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(button, a) { -webkit-tap-highlight-color: transparent; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .bg-layer { background: none !important; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .login-flight-trails { opacity: 0; pointer-events: none; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.main-panel, .side-panel)::before,
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.main-panel, .side-panel)::after { background: none !important; box-shadow: none !important; }

/* Type hierarchy and calm, reusable surfaces. */
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .aba-conteudo > :is(h1, .top-header h1),
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .aba-conteudo :is(.top-header, .expenses-page-heading, .faturamento-executive-header) h1 {
  font-size: clamp(27px, 2.2vw, 34px) !important;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--vf-ink) !important;
  -webkit-text-fill-color: currentColor;
  background: none;
  text-shadow: none !important;
  margin: 0 0 10px;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .aba-conteudo :is(.top-header, .expenses-page-header, .faturamento-executive-header) {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--vf-line);
  gap: 20px;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.subtitle, .profile-help) { color: var(--vf-muted); font-size: 13px; line-height: 1.65; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .aba-conteudo h2 { letter-spacing: -.025em; font-weight: 600; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .aba-conteudo h3 { letter-spacing: -.012em; font-weight: 600; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.eyebrow, .expenses-kicker, .fat-eyebrow, .section-kicker) {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--vf-accent);
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.side-card, .metric-card, .week-table-block, .planilha-summary-card, .faturamento-kpi-card) {
  border: 1px solid var(--vf-line) !important;
  border-radius: 14px;
  background: var(--vf-panel) !important;
  box-shadow: var(--vf-elevation) !important;
  color: var(--vf-ink);
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .main-panel .side-card { padding: 24px; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .main-panel .side-card .side-card { box-shadow: none !important; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.side-card, .metric-card)::before,
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.side-card, .metric-card)::after { box-shadow: none !important; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .mini-info {
  border-color: var(--vf-line); background: var(--vf-panel-soft); box-shadow: none;
  border-radius: 9px; padding: 12px 14px; gap: 8px;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .label { color: var(--vf-muted); font-weight: 500; line-height: 1.5; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.money, [class*="metric"] > strong) { font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.filter-input, .filter-select, .fake-field input, .fake-field select, .fake-field textarea, .faturamento-field input,
 .medicos-field input, .medicos-field select, .expenses-date-field input, .expenses-item-field input, .expenses-item-field select) {
  background: var(--vf-panel-soft) !important;
  border: 1px solid var(--vf-line-strong) !important;
  border-radius: 8px !important;
  color: var(--vf-ink) !important;
  min-height: 42px;
  padding: 10px 12px;
  box-shadow: none !important;
  font-size: 13px;
  line-height: 1.4;
  color-scheme: dark;
  transition: border-color 140ms ease, background-color 140ms ease;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(input, textarea)::placeholder { color: var(--vf-muted); opacity: .78; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--vf-accent-solid); }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))).theme-light :is(input, select, textarea) { color-scheme: light; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .fake-field label { font-size: 12px; color: var(--vf-muted); margin-bottom: 7px; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.primary-btn, .secondary-btn, .shortcut-btn, .fat-button, .expenses-button, .accounting-action-button) {
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.45;
  min-height: 40px;
  padding: 10px 16px;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.primary-btn, .expenses-button.is-primary, .fat-button.is-primary) {
  background: var(--vf-gradient-primary) !important; color: #fff !important; border: 1px solid transparent !important;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.primary-btn, .expenses-button.is-primary, .fat-button.is-primary):hover:not(:disabled) {
  background: var(--vf-gradient-primary-hover) !important; transform: none;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.secondary-btn, .shortcut-btn, .expenses-button.is-secondary, .fat-button:not(.is-primary)) {
  background: var(--vf-panel-raised) !important; border: 1px solid var(--vf-line) !important; color: var(--vf-ink) !important;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.secondary-btn, .shortcut-btn, .expenses-button.is-secondary):hover:not(:disabled) {
  background: var(--vf-accent-wash) !important; border-color: var(--vf-line-strong) !important; transform: none;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.table-action, .text-action-btn, .fat-text-button) { color: var(--vf-accent); font-size: 12px; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.table-action.danger, .primary-btn.danger, .secondary-btn.danger, .expenses-button.is-danger, .fat-text-button.is-danger) {
  color: var(--vf-danger) !important; background: color-mix(in srgb, var(--vf-danger) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--vf-danger) 24%, transparent) !important;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.pill, .status, .fat-month-chip, .expenses-count-badge, .expenses-status-badge, .accounting-tag) {
  font-size: 11px; font-weight: 500; line-height: 1.4; padding: 5px 9px; border-radius: 6px;
  box-shadow: none !important; text-shadow: none; max-width: 100%;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.pill.neutral, .status.open, .status.neutral, .fat-month-chip, .expenses-count-badge) {
  color: var(--vf-accent); background: var(--vf-accent-wash); border: 1px solid color-mix(in srgb, var(--vf-accent) 18%, transparent);
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.pill.success, .status.success, .pill.paid, .status.paid) {
  color: var(--vf-success) !important; background: color-mix(in srgb, var(--vf-success) 9%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--vf-success) 20%, transparent) !important;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.pill.warning, .status.warning) {
  color: var(--vf-warning); background: color-mix(in srgb, var(--vf-warning) 9%, transparent);
  border-color: color-mix(in srgb, var(--vf-warning) 22%, transparent);
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.pill.error, .status.error, .pill.danger, .status.danger) {
  color: var(--vf-danger); background: color-mix(in srgb, var(--vf-danger) 9%, transparent);
  border-color: color-mix(in srgb, var(--vf-danger) 22%, transparent);
}

/* Tables keep their scroll wrappers and sticky-header behavior. */
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.week-table-wrapper, .consultar-table-wrapper, .cashback-table-wrapper, .pagamento-table-wrapper, .admin-users-table-wrap) {
  border: 1px solid var(--vf-line); border-radius: 10px; background: var(--vf-panel); box-shadow: none;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.week-table, .consultar-table, .cashback-table, .pagamento-table, .admin-users-table) {
  width: 100%; border-collapse: collapse; color: var(--vf-ink); font-variant-numeric: tabular-nums;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.week-table, .consultar-table, .cashback-table, .pagamento-table, .admin-users-table) th {
  background: var(--vf-panel-raised) !important; color: var(--vf-muted) !important;
  padding: 13px 15px; font-size: 11px; font-weight: 600; line-height: 1.5;
  letter-spacing: .025em; text-transform: none; border-bottom: 1px solid var(--vf-line) !important;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.week-table, .consultar-table, .cashback-table, .pagamento-table, .admin-users-table) td {
  background: transparent; color: var(--vf-ink); padding: 14px 15px; font-size: 12px; line-height: 1.55;
  border-color: var(--vf-line) !important;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.week-table, .consultar-table, .cashback-table, .pagamento-table, .admin-users-table) tbody tr:hover td {
  background: var(--vf-accent-wash);
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.table-empty, .empty-state, .empty-message) {
  padding: 32px 22px !important; color: var(--vf-muted) !important; font-size: 13px; line-height: 1.7;
  text-align: center; font-weight: 400;
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) div.table-empty { background: var(--vf-panel-soft); border: 1px dashed var(--vf-line-strong); border-radius: 10px; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.modal, .medicos-modal) { backdrop-filter: blur(8px); background-color: rgba(7, 8, 14, .76); }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.modal-content, .medicos-modal-content) {
  border: 1px solid var(--vf-line-strong) !important; border-radius: 18px !important;
  background: var(--vf-panel) !important; color: var(--vf-ink); box-shadow: 0 24px 90px rgba(0,0,0,.4) !important;
  max-height: calc(100dvh - 48px);
}
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .modal-header { padding: 22px 26px; background: var(--vf-panel) !important; border-bottom: 1px solid var(--vf-line); }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .modal-header h3 { font-size: 20px; font-weight: 600; letter-spacing: -.025em; color: var(--vf-ink); }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .modal-body { padding: 24px 26px; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .modal-footer { padding: 18px 26px; background: var(--vf-panel-soft) !important; border-top: 1px solid var(--vf-line); gap: 12px; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .modal-close { width: 34px; height: 34px; border-radius: 8px; color: var(--vf-muted); background: var(--vf-panel-raised); }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.vf-toast, .toast, .notification) { border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.2); }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) ::-webkit-scrollbar { width: 6px; height: 6px; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) ::-webkit-scrollbar-track { background: transparent; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) ::-webkit-scrollbar-thumb { background: #555568; border-radius: 10px; border: 1px solid transparent; }
body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) ::-webkit-scrollbar-thumb:hover { background: #75748a; }
@media (max-width: 1100px) { body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) { --vf-sidebar-size: 208px; --vf-page-gutter: 24px; } }
@media (max-width: 760px) {
  body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) { --vf-page-gutter: 16px; }
  body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .main-panel .side-card { padding: 18px; }
  body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) :is(.modal-header, .modal-body, .modal-footer) { padding: 18px; }
  body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) .modal-content { max-height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) *, body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) *::before, body.vf-premium:where(:not(:has(#loginScreen.active:not(.admin-authenticated)))) *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}