:root,
html[data-theme="light"] {
  color-scheme: light;
  --nm-color-primary: #1e7a46;
  --nm-color-primary-hover: #176238;
  --nm-color-primary-active: #124e2d;
  --nm-color-primary-soft: #e8f3ec;
  --nm-color-green-dark: #1a3a28;
  --nm-color-background: #f7f9f7;
  --nm-color-surface: #ffffff;
  --nm-color-surface-muted: #f0f4f1;
  --nm-color-text: #17231b;
  --nm-color-text-muted: #526158;
  --nm-color-border: #d8e1db;
  --nm-color-focus: #1e7a46;
  --nm-color-danger: #b42318;
  --nm-color-success: #1e7a46;
  --nm-warning: #9a6700;
  --nm-info: #176b87;
  --nm-font-heading: "Fraunces", Georgia, serif;
  --nm-font-detail: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --nm-font-body: Inter, "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --nm-font-wordmark: Montserrat, "Avenir Next", Futura, sans-serif;
  --nm-radius-sm: 0.5rem;
  --nm-radius-md: 0.875rem;
  --nm-radius-lg: 1.25rem;
  --nm-shadow-card: 0 8px 24px rgb(26 58 40 / 0.08);
  --nm-shadow-raised: 0 12px 32px rgb(26 58 40 / 0.12);
  --nm-duration-fast: 150ms;
  --nm-duration-base: 220ms;
  --nm-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Short aliases retained while legacy page styles are migrated. */
  --nm-primary: var(--nm-color-primary);
  --nm-primary-hover: var(--nm-color-primary-hover);
  --nm-primary-soft: var(--nm-color-primary-soft);
  --nm-forest: var(--nm-color-green-dark);
  --nm-bg: var(--nm-color-background);
  --nm-surface: var(--nm-color-surface);
  --nm-surface-subtle: var(--nm-color-surface-muted);
  --nm-text: var(--nm-color-text);
  --nm-text-muted: var(--nm-color-text-muted);
  --nm-border: var(--nm-color-border);
  --nm-danger: var(--nm-color-danger);
  --nm-focus: var(--nm-color-focus);
  --nm-shadow-sm: 0 1px 2px rgb(26 58 40 / 0.06);
  --nm-shadow-md: var(--nm-shadow-card);

  /* Compatibility layer for the existing clinical shell. */
  --clinical-bg: var(--nm-bg);
  --clinical-surface: var(--nm-surface);
  --clinical-surface-muted: var(--nm-surface-subtle);
  --clinical-muted-surface: var(--nm-surface-subtle);
  --clinical-soft: var(--nm-surface-subtle);
  --clinical-border: var(--nm-border);
  --clinical-title: var(--nm-text);
  --clinical-text: var(--nm-text);
  --clinical-muted: var(--nm-text-muted);
  --clinical-primary: var(--nm-primary);
  --clinical-primary-hover: var(--nm-primary-hover);
  --clinical-primary-soft: var(--nm-primary-soft);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --nm-color-primary: #10b981;
  --nm-color-primary-hover: #34d399;
  --nm-color-primary-active: #6ee7b7;
  --nm-color-primary-soft: #052e16;
  --nm-color-green-dark: #f1f5f9;
  --nm-color-background: #0f172a;
  --nm-color-surface: #1e293b;
  --nm-color-surface-muted: #162032;
  --nm-color-text: #f1f5f9;
  --nm-color-text-muted: #94a3b8;
  --nm-color-border: #334155;
  --nm-color-focus: #34d399;
  --nm-color-danger: #f87171;
  --nm-color-success: #34d399;
  --nm-shadow-card: 0 8px 24px rgb(0 0 0 / 0.2);
  --nm-shadow-raised: 0 12px 32px rgb(0 0 0 / 0.3);
}

@media screen {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  html {
    background: var(--nm-bg);
    color: var(--nm-text);
  }

  body {
    margin: 0;
    background: var(--nm-bg);
    color: var(--nm-text);
    font-family: var(--nm-font-body) !important;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2 {
    color: var(--nm-text);
    font-family: var(--nm-font-heading);
    font-weight: 600;
    line-height: 1.16;
  }

  h3,
  h4,
  h5,
  h6 {
    color: var(--nm-text);
    font-family: var(--nm-font-body);
    line-height: 1.3;
  }

  p,
  li,
  label,
  small {
    color: inherit;
  }

  a {
    color: var(--nm-primary);
    text-underline-offset: 3px;
  }

  a:hover {
    color: var(--nm-primary-hover);
  }

  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--nm-focus) 55%, transparent);
    outline-offset: 2px;
  }

  :is(button, input, select, textarea) {
    font: inherit;
  }

  button {
    min-height: 44px !important;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-height: 44px !important;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-radius-md);
    background: var(--nm-surface);
    color: var(--nm-text);
    box-shadow: none;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover {
    border-color: color-mix(in srgb, var(--nm-primary) 48%, var(--nm-border));
  }

  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--nm-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-primary) 16%, transparent);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.78;
  }

  .container {
    width: min(100% - 32px, 1180px);
    margin-inline: auto;
  }

  .header {
    gap: 20px;
    margin-bottom: 24px;
    padding: 8px 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--nm-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .header:hover {
    box-shadow: none !important;
  }

  .header > div:first-child {
    min-width: min(100%, 240px);
  }

  .header .actions {
    flex: 1 1 560px;
    justify-content: flex-end;
  }

  .header h1,
  .page-title {
    margin: 0;
    font-size: 2rem;
  }

  .page-title-bar {
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--nm-border);
  }

  .page-title-bar__heading {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .page-title-bar__title {
    width: 100%;
    margin: 0;
    color: var(--nm-text);
    font-family: var(--nm-font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.16;
    text-align: center;
  }

  .page-title-bar__actions {
    width: 100%;
    justify-content: center;
  }

  .anthropometry-pdf-button {
    display: inline-flex !important;
    min-height: 44px;
    align-items: center !important;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-radius-md);
    background: var(--nm-surface);
    color: var(--nm-text);
    font: 600 0.8125rem/1.2 var(--nm-font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--nm-duration-fast) var(--nm-ease-standard), border-color var(--nm-duration-fast) var(--nm-ease-standard), color var(--nm-duration-fast) var(--nm-ease-standard);
  }

  .anthropometry-pdf-button:hover {
    border-color: var(--nm-primary);
    background: var(--nm-primary-soft);
    color: var(--nm-primary-hover);
  }

  .anthropometry-pdf-button__icon {
    position: static;
    display: block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    align-self: center;
    margin: 0;
    transform: none;
  }

  .ui-icon {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    overflow: visible;
  }

  .theme-toggle .ui-icon,
  .shell-menu__icon .ui-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .header p,
  .header .muted,
  .page-subtitle,
  .muted,
  .text-muted {
    color: var(--nm-text-muted) !important;
  }

  /* Contrast compatibility while legacy page utilities are retired. */
  :is(.text-slate-400, .jsc-9d6ccd40, .jsc-e210be8d, .jsc-9bd138ae, .jsc-91b77969,
    .jsc-3b63bf9c, .jsc-f5b09491, .jsc-ac41869d, .jsc-00bdc92e, .jsc-a16d04eb, .reg-hint, .reg-back,
    #prazoExportacao, #waterGlassCount, #loadingState, #metasWorkflowStatus) {
    color: var(--nm-text-muted) !important;
  }

  :is(.text-amber-600\/70, .text-indigo-600\/70, .text-orange-600\/70, .text-rose-600\/70) {
    color: var(--nm-text) !important;
  }

  :is(.reg-section-title, .jsc-8426ae61, .jsc-f60ddf1b, .tab-active, #tabAnamnese, #tabModelos,
    #shortcutAgenda, #shortcutPatients, #shortcutConfig) {
    color: var(--nm-primary-hover) !important;
  }

  :is(#tabQFA, #tabQuestionario, #tabEnviados, button[data-click-args="'isak'"],
    button[data-click-args="'historico'"], button[data-click="mostrarBackup"], button[data-click="sair"]) {
    color: var(--nm-text-muted) !important;
  }

  :is(#totpBtn, .btn-new, #btn-salvar, #publishButton) {
    background: var(--nm-primary) !important;
    color: #ffffff !important;
  }

  a.hover\:underline {
    color: var(--nm-primary-hover) !important;
    text-decoration: underline;
  }

  :is(.text-emerald-600, a[href$="importar.html"], a[href$="pacientes.html"],
    a[href$="termos-de-uso"], a[href$="politica-de-privacidade"]) {
    color: var(--nm-primary-hover) !important;
  }

  :is(.card, .glass-panel, .panel, .section-card, .metric-card, .stat-card, .content-card) {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-radius-lg);
    background: var(--nm-surface);
    box-shadow: var(--nm-shadow-sm);
  }

  :is(.card, .glass-panel, .panel, .section-card) :is(.card, .glass-panel, .panel, .section-card) {
    border-color: color-mix(in srgb, var(--nm-border) 72%, transparent);
    border-radius: var(--nm-radius-md);
    background: var(--nm-surface-subtle);
    box-shadow: none;
  }

  :is(.card, .panel, .section-card) h2 {
    font-size: 1.35rem;
  }

  :is(.card, .panel, .section-card) h3 {
    font-size: 1rem;
  }

  :is(.button, .btn, .login-btn, .reg-btn, .submit-btn, .asn-btn, .action-btn, .btn-primary, .btn-secondary) {
    min-height: 44px;
    border-radius: var(--nm-radius-md);
    font-family: var(--nm-font-body);
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  }

  :is(.button:not(.secondary):not(.ghost):not(.danger), .btn-primary, .login-btn, .reg-btn, .submit-btn, .asn-btn-primary) {
    border-color: var(--nm-primary);
    background: var(--nm-primary);
    color: #ffffff;
  }

  :is(.button:not(.secondary):not(.ghost):not(.danger), .btn-primary, .login-btn, .reg-btn, .submit-btn, .asn-btn-primary):hover {
    border-color: var(--nm-primary-hover);
    background: var(--nm-primary-hover);
    color: #ffffff;
  }

  :is(.button.secondary, .button.ghost, .btn-secondary, .asn-btn-secondary) {
    border: 1px solid var(--nm-border);
    background: var(--nm-surface);
    color: var(--nm-text);
  }

  :is(.button.secondary, .button.ghost, .btn-secondary, .asn-btn-secondary):hover {
    border-color: var(--nm-primary);
    background: var(--nm-primary-soft);
    color: var(--nm-primary-hover);
  }

  :is(.icon-btn, .security-icon-btn, .theme-toggle, .topbar-menu-button, .mobile-nav-close) {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-radius-md);
    background: var(--nm-surface);
    color: var(--nm-text);
  }

  :is(.isak-modal-close, .tfa-theme-btn) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: var(--nm-radius-md) !important;
  }

  :is(.icon-btn, .security-icon-btn, .theme-toggle, .topbar-menu-button, .mobile-nav-close):hover {
    border-color: var(--nm-primary);
    background: var(--nm-primary-soft);
    color: var(--nm-primary-hover);
  }

  :is(.badge, .pill, .chip, .tag, .status-badge) {
    border: 1px solid color-mix(in srgb, var(--nm-primary) 25%, var(--nm-border));
    border-radius: 999px;
    background: var(--nm-primary-soft);
    color: var(--nm-primary-hover);
    font-family: var(--nm-font-detail);
    font-size: 0.75rem;
    font-weight: 500;
  }

  :is(.tabs, .tab-list, [role="tablist"]) {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-radius-md);
    background: var(--nm-surface-subtle);
  }

  :is(.tab, [role="tab"]) {
    min-height: 40px;
    border-radius: var(--nm-radius-sm);
    color: var(--nm-text-muted);
  }

  :is(.tab.active, .tab[aria-selected="true"], [role="tab"][aria-selected="true"]) {
    background: var(--nm-surface);
    color: var(--nm-primary-hover);
    box-shadow: var(--nm-shadow-sm);
  }

  table {
    width: 100%;
    border-color: var(--nm-border);
    background: var(--nm-surface);
    color: var(--nm-text);
  }

  th {
    background: var(--nm-surface-subtle);
    color: var(--nm-text);
    font-family: var(--nm-font-detail);
    font-size: 0.75rem;
    font-weight: 500;
  }

  th,
  td {
    border-color: var(--nm-border);
  }

  tbody tr:hover {
    background: color-mix(in srgb, var(--nm-primary-soft) 52%, transparent);
  }

  body[data-page="settings"] .grid-full {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    align-items: start;
  }

  body[data-page="settings"] :is(#auditCard, #templatesAnamneseCard, #fatoresPreparoCard, #gruposEquivalenciaCard) {
    grid-column: 1 / -1;
  }

  body[data-page="patients"] #listView > .grid,
  body[data-page="foods"] .grid,
  body[data-page="agenda"] .grid {
    align-items: start;
  }

  body[data-page="patients"] .patient-card,
  body[data-page="agenda"] .agenda-entry {
    border-radius: var(--nm-radius-md);
    box-shadow: none;
  }

  :is(.status, [role="status"], [aria-live]) {
    overflow-wrap: anywhere;
  }

  .app-topbar,
  .clinical-topbar,
  .mobile-topbar {
    border-bottom: 1px solid var(--nm-border);
    background: color-mix(in srgb, var(--nm-surface) 94%, transparent);
    color: var(--nm-text);
    box-shadow: none;
    backdrop-filter: blur(12px);
  }

  :is(.app-brand, .brand-name, .legal-brand, .wordmark, .topbar-brand) {
    color: var(--nm-forest);
    font-family: var(--nm-font-wordmark);
    font-weight: 700;
  }

  .mobile-nav,
  .nav-drawer,
  .sidebar {
    border-color: var(--nm-border);
    background: var(--nm-surface);
    color: var(--nm-text);
  }

  :is(.mobile-nav a, .nav-drawer a, .sidebar a) {
    min-height: 44px;
    border-radius: var(--nm-radius-md);
    color: var(--nm-text-muted);
  }

  :is(.mobile-nav a, .nav-drawer a, .sidebar a):is(:hover, .active, [aria-current="page"]) {
    background: var(--nm-primary-soft);
    color: var(--nm-primary-hover);
  }

  .modal,
  .dialog,
  [role="dialog"] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-radius-lg);
    background: var(--nm-surface);
    color: var(--nm-text);
    box-shadow: var(--nm-shadow-md);
  }

  .toast,
  .alert,
  .notice {
    border-radius: var(--nm-radius-md);
    box-shadow: var(--nm-shadow-sm);
  }

  body[data-page="login"],
  body[data-page="cadastro"],
  body[data-page="verify-2fa"],
  body[data-page="legal"] {
    background: var(--nm-bg) !important;
  }

  :is(.login-card, .reg-card, .verify-card, .blocked-card, .questionnaire-shell, .legal-article, .legal-aside) {
    border: 1px solid var(--nm-border) !important;
    border-radius: var(--nm-radius-lg) !important;
    background: var(--nm-surface) !important;
    color: var(--nm-text) !important;
    box-shadow: var(--nm-shadow-md) !important;
  }

  :is(.login-card, .reg-card, .verify-card, .blocked-card) h1,
  :is(.legal-hero, .questionnaire-header) h1 {
    font-family: var(--nm-font-heading) !important;
    color: var(--nm-text) !important;
  }

  :is(.login-input, .reg-input, .verify-input) {
    border-color: var(--nm-border) !important;
    border-radius: var(--nm-radius-md) !important;
    background: var(--nm-surface) !important;
    color: var(--nm-text) !important;
  }

  .legal-header,
  .legal-footer {
    border-color: var(--nm-border) !important;
    background: var(--nm-surface) !important;
  }

  .legal-article h2,
  .legal-article h3 {
    color: var(--nm-text) !important;
  }

  .legal-article p,
  .legal-article li,
  .legal-aside a {
    color: var(--nm-text-muted) !important;
  }

  html[data-theme="dark"] img:not([src*="logo"]):not([src*="avatar"]) {
    filter: brightness(0.94) contrast(1.03);
  }

  html[data-theme="dark"] body {
    background: var(--nm-bg) !important;
    background-image: none !important;
  }

  html[data-theme="dark"] :is(.bg-white, .bg-slate-50, .bg-gray-50) {
    background-color: var(--nm-surface) !important;
  }

  html[data-theme="dark"] :is(.card, .glass-panel, .panel, .section-card, .metric-card, .stat-card, .content-card) {
    border-color: var(--nm-border) !important;
    background: var(--nm-surface) !important;
    color: var(--nm-text) !important;
  }

  html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-color: var(--nm-border) !important;
    background: var(--nm-surface-subtle) !important;
    color: var(--nm-text) !important;
  }

  html[data-theme="dark"] body[data-page="login"] :is(.login-input, .login-card),
  html[data-theme="dark"] body[data-page="cadastro"] :is(.reg-input, .reg-card),
  html[data-theme="dark"] body[data-page="verify-2fa"] :is(.tfa-input, .tfa-card) {
    border-color: var(--nm-border) !important;
    background: var(--nm-surface) !important;
    color: var(--nm-text) !important;
  }

  body[data-page="dashboard"] .metric-card > .absolute.rounded-full {
    display: none !important;
  }

  html[data-theme="dark"] :is(.text-slate-900, .text-gray-900, .text-slate-800, .text-gray-800) {
    color: var(--nm-text) !important;
  }

  html[data-theme="dark"] :is(.border-slate-200, .border-gray-200, .border-slate-300, .border-gray-300) {
    border-color: var(--nm-border) !important;
  }
}

.nm-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  margin-inline-start: 0.5rem;
  padding: 0.125rem 0.5rem;
  color: var(--nm-primary);
  background: var(--nm-primary-soft);
  border: 1px solid var(--nm-border);
  border-radius: 999px;
  font-family: var(--nm-font-detail);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

@media screen and (max-width: 720px) {
  .container {
    width: min(100% - 24px, 1180px);
  }

  .header {
    align-items: flex-start;
    margin-bottom: 18px;
    padding-bottom: 16px;
  }

  .header > div:first-child,
  .header .actions {
    width: 100%;
    min-width: 0;
  }

  .header .actions {
    flex-basis: auto;
    justify-content: flex-start;
  }

  .header h1,
  .page-title {
    font-size: 1.65rem;
  }

  :is(.card, .glass-panel, .panel, .section-card, .metric-card, .stat-card, .content-card) {
    border-radius: var(--nm-radius-md);
  }

  :is(.modal, .dialog, [role="dialog"]) {
    max-width: calc(100vw - 24px);
  }

  .table-responsive,
  .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}