/* NavVis UI — Customer Theme Overrides | navvis-ui-overrides.css */
/* Load AFTER navvis-ui.css. Each block overrides only the tokens it needs. */

/* ═══ NAVBAR HEIGHT ═══ */
/* Fonts come from the framework (Poppins display + Open Sans body) — no override. */
:root {
  --nv-navbar-height: 72px;
}

/* ═══ NAVBAR HEIGHT + VERTICAL CENTERING ═══ */
/* Strip browser/Bootstrap ul/li defaults that break flex alignment */
.nv-navbar__nav {
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
.nv-navbar__item {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* ═══ NAVVIS PORTAL — HERO SURFACE ═══ */
/* Navbar & footer black now come from .nv-navbar--black / .nv-footer--black
 * applied in global-header / global-footer (framework v1.5.0+).
 * Only the hero keeps a portal-specific surface colour (no framework class). */
.nv-page-hero { background-color: #1B2B3A !important; color: #FFFFFF !important; text-align: center !important; }
.nv-page-hero .nv-page-hero__title,
.nv-page-hero .nv-page-hero__subtitle,
.nv-page-hero h1, .nv-page-hero p { color: #FFFFFF !important; text-align: center !important; }

/* ═══ STICKY FOOTER — robust pin for ALL page types ═══ */
/* The framework's shell relies on a .nv-app > main (or .nv-app__main) grow
 * region to push the footer down. Legacy "Rewrite" page templates
 * (e.g. pt-full-page-legacy → system-software-licenses,
 * desktop-processing-licenses) render their content into an unclassed <div>
 * with NO <main>, so nothing grows and the footer floats up on short pages.
 * margin-top:auto on the footer (always a direct flex child of .nv-app) pins
 * it to the bottom regardless of content structure; it's a no-op when a grow
 * region already fills the column (modern pages). */
.nv-app > .nv-footer { margin-top: auto; }

/* ═══ NAVBAR DROPDOWNS ═══ */
/* Dropdown markup uses the framework .nv-dropdown + .nv-menu system.
 * Only reset list/item defaults that Bootstrap injects on <ul>/<li>. */
.nv-navbar__nav { gap: var(--nv-space-2); }
/* align-self:stretch chains through the <li> so the fly-out drops cleanly below the bar */
.nv-navbar__item { margin: 0; padding: 0; display: inline-flex; align-items: center; align-self: stretch; }
/* Fly-out menus inside the navbar need a min-width to stay readable */
.nv-navbar .nv-menu { min-width: 220px; }
/* Caret indicator — Liquid doesn't inject &#9662; inline, so CSS does */
.nv-navbar .nv-dropdown > summary::after { content: " ▾"; font-size: 0.7em; opacity: 0.7; }

/* ═══ OVERRIDE 1: ACME CORP — Orange Primary ═══ */
/*
 * Orange #E85D00 on white: contrast ratio 3.53:1 — use on dark surfaces or with white text only
 * Orange #E85D00 on #112E4F: contrast ratio 5.2:1 — WCAG AA PASS
 * White text on #E85D00: contrast ratio 3.53:1 — use bold weight (600+) for AA Large
 * Override: swap --nv-color-brand to Acme orange. All brand-derived tokens update automatically.
 */
[data-theme="acme"] {
  --nv-color-brand:        #E85D00;
  --nv-color-brand-hover:  #C94E00;
  --nv-color-brand-active: #A84200;
  --nv-color-border-focus: #E85D00;
  /* Focus ring: rgba(232, 93, 0, 0.15) */
  --nv-blue-50:   #FDF0E8;   /* tint for hover states */
  --nv-blue-200:  #F6C49A;   /* icon shadow fill */
  --nv-blue-600:  #C94E00;   /* hover */
  --nv-blue-700:  #A84200;   /* active */
  /* Surface and text tokens remain unchanged — only brand hue shifts */
}
/* Acme: button focus ring (override rgba value used in component) */
[data-theme="acme"] .nv-input:focus,
[data-theme="acme"] .nv-textarea:focus,
[data-theme="acme"] .nv-select:focus {
  box-shadow: 0 0 0 3px rgba(232, 93, 0, 0.15);
}

/* ═══ OVERRIDE 3: WCAG AAA HIGH-CONTRAST MODE ═══ */
/*
 * Achieves 7:1 contrast ratio (WCAG AAA) for all text/surface combinations.
 * Black #000000 on white #FFFFFF: 21:1 — WCAG AAA PASS
 * White #FFFFFF on black #000000: 21:1 — WCAG AAA PASS
 * Yellow focus ring #FFD700 on black: 14.3:1 — AAA PASS
 * Note: accent rule suspended — high contrast requires maximum distinction
 */
[data-theme="high-contrast"] {
  --nv-color-brand:           #0040CC;   /* #0040CC on white: 7.1:1 — AAA PASS */
  --nv-color-brand-hover:     #0030A0;
  --nv-color-brand-active:    #002080;
  --nv-color-surface:         #FFFFFF;
  --nv-color-surface-raised:  #FFFFFF;
  --nv-color-surface-dark:    #000000;
  --nv-color-border:          #000000;   /* black border for max contrast */
  --nv-color-border-focus:    #FFD700;   /* yellow — 14.3:1 on black, 1.07:1 on white — use with outline-offset */
  --nv-color-text-primary:    #000000;   /* 21:1 on white — AAA */
  --nv-color-text-secondary:  #000000;
  --nv-color-text-muted:      #1A1A1A;   /* 18.6:1 — AAA */
  --nv-color-text-inverse:    #FFFFFF;
  --nv-color-text-brand:      #0040CC;
  --nv-color-text-success:    #004D1A;   /* #004D1A on white: 9.7:1 — AAA */
  --nv-color-text-warning:    #4D3200;   /* #4D3200 on white: 10.2:1 — AAA */
  --nv-color-text-danger:     #8B0000;   /* #8B0000 on white: 8.5:1 — AAA */
  /* Borders: always black for maximum definition */
  --nv-grey-50:   #FFFFFF;
  --nv-grey-100:  #EEEEEE;
  --nv-grey-200:  #000000;
  --nv-grey-400:  #1A1A1A;
  --nv-grey-500:  #1A1A1A;
  /* Shadows removed — rely on borders instead */
  --nv-shadow-1: none;
  --nv-shadow-2: none;
}
/* High-contrast: override focus ring to yellow */
[data-theme="high-contrast"] :focus-visible {
  outline: 3px solid #FFD700 !important;
  outline-offset: 3px !important;
  background-color: #000000;  /* ensure yellow visible on any bg */
  color: #FFFFFF;
}
[data-theme="high-contrast"] .nv-btn--primary {
  background: #000000 !important;
  border: 2px solid #000000 !important;
  color: #FFFFFF !important;
}
[data-theme="high-contrast"] .nv-btn--secondary {
  background: #FFFFFF !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
}
[data-theme="high-contrast"] .nv-card--bordered,
[data-theme="high-contrast"] .nv-panel,
[data-theme="high-contrast"] .nv-input,
[data-theme="high-contrast"] .nv-select,
[data-theme="high-contrast"] .nv-textarea {
  border-color: #000000 !important;
  border-width: 2px !important;
}

/* ═══ USAGE NOTES ═══ */
/*
 * Apply theme via data attribute on <html> or a wrapper:
 *   <html data-theme="acme">          — Acme Corp orange
 *   <html data-theme="high-contrast"> — AAA high-contrast
 * Load order: <link rel="stylesheet" href="navvis-ui.css">
 *             <link rel="stylesheet" href="navvis-ui-overrides.css">
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * OOB RENDERING OVERRIDES — Entity List (Part 1: lists)
 *
 * Power Pages emits Bootstrap markup for {% entitylist %} / {% include
 * 'entity_list' %} that we cannot change. We map the platform-unique container
 * (.entity-grid.entitylist) onto NavVis UI tokens so OOB lists match .nv-table.
 * Generic Bootstrap leaves (.btn) are scoped UNDER the container so custom
 * widgets that also use Bootstrap are untouched.
 *
 * Specificity: the whole page sits inside the global .nv-reset wrapper, whose
 * `.nv-reset .table > thead > tr > th` neutraliser is (0,2,3). Selectors below
 * carry .entity-grid + .entitylist + .table + element chain to meet/exceed it
 * and win on source order (this file loads after navvis-ui.css).
 * Confirmed against the live /orders/ render (entity-grid entitylist >
 * view-grid table-responsive > table.table.table-striped; th.sort-enabled/
 * .sort-disabled with sort <a> + .sort-hint; .view-empty/.view-error/
 * .view-access-denied/.view-loading; .view-pagination).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Scroll container + narrow-viewport overflow fix.
 * The OOB list sits inside Studio flex wrappers (.container-fluid >
 * .columnBlockLayout) whose default min-width:auto refuses to shrink below the
 * table's content width, so on a reduced window the table pushes the whole page
 * wide instead of letting .table-responsive scroll. Allowing the chain to shrink
 * (min-width:0) lets .view-grid constrain to the available width and scroll.
 * The :has() rule reaches the two Studio ancestors ONLY when they contain a
 * list (kept separate so browsers without :has() still apply the rest). */
.entitylist,
.entity-grid.entitylist .view-grid {
  min-width: 0;
  max-width: 100%;
}
.entity-grid.entitylist .view-grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.container:has(.entity-grid.entitylist),
.container-fluid:has(.entity-grid.entitylist),
.columnBlockLayout:has(.entity-grid.entitylist) {
  /* !important beats the inline `min-width:250px` Power Pages Studio writes onto
   * column blocks. `.container` (not just `.container-fluid`) is required: below the
   * 768px Bootstrap breakpoint a section `.container` loses its fixed width and goes
   * display:flex — without this the flex chain blows out to the table's intrinsic
   * width and the page overflows instead of letting .view-grid scroll. */
  min-width: 0 !important;
}

/* Table shell — match .nv-table */
.entity-grid.entitylist table.table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
}

/* Header row — uppercase 11px token labels on grey-50 */
.entity-grid.entitylist .table > thead {
  background-color: var(--nv-grey-50);
}
.entity-grid.entitylist .table > thead > tr > th {
  padding: var(--nv-space-3) var(--nv-space-4);
  text-align: left;
  font-family: var(--nv-font-body);
  font-size: 11px;
  font-weight: var(--nv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nv-color-text-secondary);
  border-bottom: 1px solid var(--nv-color-border);
  white-space: nowrap;
}
/* Sort link reads as plain header text (it carries the platform sort handler) */
.entity-grid.entitylist .table > thead > tr > th a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}
.entity-grid.entitylist .table > thead > tr > th.sort-enabled { cursor: pointer; }
.entity-grid.entitylist .table > thead > tr > th .sort-hint {
  margin-left: var(--nv-space-1);
  opacity: 0.5;
  color: var(--nv-color-brand);
}

/* Body cells — 44px rows, token borders, blue-50 hover; drop Bootstrap zebra */
.entity-grid.entitylist .table > tbody > tr > td {
  height: 44px;
  padding: 0 var(--nv-space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--nv-grey-100);
  color: var(--nv-color-text-primary);
}
.entity-grid.entitylist .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: transparent;
}
.entity-grid.entitylist .table > tbody > tr:hover {
  background-color: var(--nv-blue-50);
}
.entity-grid.entitylist .table > tbody > tr:last-child > td {
  border-bottom: none;
}

/* Empty state — reuse the .nv-empty-state look (centered, muted, italic).
 * The platform renders the "no records" text two ways across pages: plain text
 * in .view-empty (some lists), OR wrapped in a Bootstrap .alert.alert-block
 * .alert-warning yellow box (others). Style the container as an empty state AND
 * neutralise the inner alert so every list's empty message looks identical and
 * on-brand — "no records" is an empty state, not a warning. Headers stay visible. */
.entity-grid.entitylist .view-empty,
.entity-grid.entitylist .view-empty-maker {
  padding: var(--nv-space-8) 0;
  text-align: center;
  font-style: italic;
  color: var(--nv-color-text-secondary);
}
.entity-grid.entitylist .view-empty .alert,
.entity-grid.entitylist .view-empty-maker .alert {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-style: inherit;
  text-align: inherit;
}
.entity-grid.entitylist .view-loading {
  padding: var(--nv-space-6) 0;
  text-align: center;
  color: var(--nv-color-text-muted);
}

/* Pagination */
.entity-grid.entitylist .view-pagination {
  display: flex;
  justify-content: center;
  gap: var(--nv-space-1);
  padding: var(--nv-space-4) 0;
}

/* Buttons inside the list (and its action modals) → .nv-btn look.
 * EXCLUDE the per-row Actions dropdown toggle (.btn-xs / .dropdown-toggle):
 * forcing it to 40px inline-flex bloated the Actions column and pushed its
 * fixed-position Bootstrap menu off-screen (items unreachable). The toggle keeps
 * its native compact size; only real action/form buttons get the nv-btn look. */
.entity-grid.entitylist .btn:not(.btn-xs):not(.dropdown-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nv-space-2);
  height: var(--nv-input-height);
  padding: 0 var(--nv-space-5);
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--nv-btn-radius);
  text-decoration: none;
}
.entity-grid.entitylist .btn-primary:not(.btn-xs),
.entity-grid.entitylist .btn-success:not(.btn-xs) {
  background-color: var(--nv-color-brand);
  border-color: var(--nv-color-brand);
  color: #FFFFFF;
}
.entity-grid.entitylist .btn-primary:not(.btn-xs):hover,
.entity-grid.entitylist .btn-success:not(.btn-xs):hover {
  background-color: var(--nv-color-brand-hover);
  border-color: var(--nv-color-brand-hover);
}
.entity-grid.entitylist .btn-default:not(.btn-xs):not(.dropdown-toggle) {
  background-color: var(--nv-color-surface);
  border-color: var(--nv-color-border);
  color: var(--nv-color-text-primary);
}
.entity-grid.entitylist .btn-default:not(.btn-xs):not(.dropdown-toggle):hover {
  background-color: var(--nv-grey-50);
}

/* ── List toolbar (view selector + search field/button) ──
 * The OOB toolbar renders an oversized 45px view selector (a.selected-view
 * .dropdown-toggle, 16px) and a .btn-hg ("huge") search button that clash with
 * the 35px search input. Normalise the trio to a compact, aligned toolbar
 * (sm height + sm font). Selectors carry enough classes to beat the list .btn
 * rule above (which is (0,5,0) via its :not() chain). */
.entity-grid.entitylist .view-toolbar { align-items: center; }
/* view selector */
.entity-grid.entitylist .view-toolbar .selected-view.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-2);
  height: var(--nv-input-height-sm);
  padding: 0 var(--nv-space-3);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  line-height: 1;
  color: var(--nv-color-text-primary);
}
/* search input → nv-input look at sm height */
.entity-grid.entitylist .entitylist-search .query.form-control,
.entity-grid.entitylist .query.form-control {
  height: var(--nv-input-height-sm);
  padding: 0 var(--nv-space-3);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
  border: var(--nv-input-border);
  box-shadow: none;
}
.entity-grid.entitylist .entitylist-search .query.form-control:focus,
.entity-grid.entitylist .query.form-control:focus {
  outline: none;
  border-color: var(--nv-color-border-focus);
  box-shadow: var(--nv-input-focus-shadow);
}
/* search button (.btn-hg) — match the input height, tighter padding */
.entity-grid.entitylist .input-group-btn .btn.btn-hg,
.entity-grid.entitylist .entitylist-search .btn.btn-hg {
  height: var(--nv-input-height-sm);
  padding: 0 var(--nv-space-3);
  font-size: var(--nv-text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * OOB RENDERING OVERRIDES — Entity Form / Modal Forms (Part 2)
 *
 * Two OOB form shapes (confirmed live on /profile/ + the list action modals):
 *   • Standalone {% entityform %}  → .entity-form.crmEntityFormView, table
 *     layout: td.cell > div.info.required > label.field-label, div.control >
 *     input.text.form-control; submit is input.btn.btn-primary in div.actions.
 *   • List action modals (.modal-form) → form.form-horizontal > .form-group >
 *     label.control-label + .form-control.
 * Map both onto nv-input / nv label / nv-btn tokens. Scoped to the OOB form
 * containers (.crmEntityFormView, .modal-form) + the .actions submit bar so
 * custom widgets that also use Bootstrap forms are untouched. (Modal buttons are
 * also covered by the list .btn rule since modals are children of .entity-grid.) */

/* Inputs / selects / textareas → nv-input look */
.crmEntityFormView .form-control,
.modal-form .form-control {
  height: var(--nv-input-height);
  padding: 0 var(--nv-space-3);
  font-family: var(--nv-font-body);
  font-size: var(--nv-input-font-size);
  color: var(--nv-color-text-primary);
  background-color: var(--nv-color-surface);
  border: var(--nv-input-border);
  border-radius: var(--nv-input-radius);
  box-shadow: none;
}
.crmEntityFormView textarea.form-control,
.modal-form textarea.form-control {
  height: auto;
  min-height: 80px;
  padding: var(--nv-space-2) var(--nv-space-3);
}
.crmEntityFormView .form-control:focus,
.modal-form .form-control:focus {
  outline: none;
  border-color: var(--nv-color-border-focus);
  box-shadow: var(--nv-input-focus-shadow);
}

/* Labels — standalone uses .field-label, modal uses .control-label */
.crmEntityFormView .field-label,
.crmEntityFormView .control-label,
.modal-form .control-label {
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-text-primary);
}

/* Validation summary → nv-alert--danger look (standalone .validation-summary,
 * modal .validation-summary-errors) */
.crmEntityFormView .validation-summary,
.crmEntityFormView .validation-summary-errors,
.modal-form .validation-summary-errors {
  padding: var(--nv-space-4);
  border: 1px solid var(--nv-color-danger-border);
  border-radius: var(--nv-radius-sm);
  background-color: var(--nv-color-danger-subtle);
  color: var(--nv-color-danger-text);
  font-size: var(--nv-text-sm);
}

/* Form / submit buttons → nv-btn look (exclude any row-action .btn-xs).
 * .actions is the standalone entityform submit bar; .modal-form covers modal
 * footers (list modals are already covered by the list .btn rule too). */
.crmEntityFormView .btn:not(.btn-xs),
.modal-form .btn:not(.btn-xs),
.actions .btn:not(.btn-xs) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nv-space-2);
  height: var(--nv-input-height);
  padding: 0 var(--nv-space-5);
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--nv-btn-radius);
  text-decoration: none;
}
.crmEntityFormView .btn-primary:not(.btn-xs),
.modal-form .btn-primary:not(.btn-xs),
.actions .btn-primary:not(.btn-xs) {
  background-color: var(--nv-color-brand);
  border-color: var(--nv-color-brand);
  color: #FFFFFF;
}
.crmEntityFormView .btn-primary:not(.btn-xs):hover,
.modal-form .btn-primary:not(.btn-xs):hover,
.actions .btn-primary:not(.btn-xs):hover {
  background-color: var(--nv-color-brand-hover);
  border-color: var(--nv-color-brand-hover);
}
.crmEntityFormView .btn-default:not(.btn-xs),
.modal-form .btn-default:not(.btn-xs),
.actions .btn-default:not(.btn-xs) {
  background-color: var(--nv-color-surface);
  border-color: var(--nv-color-border);
  color: var(--nv-color-text-primary);
}
.crmEntityFormView .btn-default:not(.btn-xs):hover,
.modal-form .btn-default:not(.btn-xs):hover,
.actions .btn-default:not(.btn-xs):hover {
  background-color: var(--nv-grey-50);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PORTAL UI ADJUSTMENTS — 2026-07 punch list
 * Navbar text, user menu, breadcrumb, table headers, blue-pill tabs, to-top btn.
 * All portal-specific — lives here, not in the verbatim framework navvis-ui.css.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Navbar: bold, UPPERCASE, solid-white main-menu items (was 75%-white) ── */
.nv-navbar__nav .nv-navbar__link {
  color: #FFFFFF;
  font-weight: var(--nv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nv-navbar__nav .nv-navbar__link--active { color: #FFFFFF; }
/* Hover keeps the framework's rectangular highlight background but darkens the text */
.nv-navbar__nav .nv-navbar__link:hover { color: var(--nv-grey-400); background-color: rgba(255, 255, 255, 0.08); }

/* ── User menu trigger → NV Blue pill: white text on brand-blue background (sits in .nv-navbar__actions, not __nav) ── */
.nv-navbar__user > summary {
  color: #FFFFFF;
  font-weight: var(--nv-weight-semibold);
  background-color: var(--nv-color-brand);
}
.nv-navbar__user > summary:hover,
.nv-navbar__user[open] > summary { color: #FFFFFF; background-color: var(--nv-color-brand-hover); }

/* ── Breadcrumb: blend into the page background (drop Bootstrap's grey strip) ── */
.nv-reset .breadcrumb,
.nv-breadcrumb { background-color: transparent; }

/* ── Table headers → NV Blue text on page background, roomier cells ──
 * Re-declares the same selectors used earlier in this file so source order wins
 * (covers both OOB entity lists and framework .nv-table). */
.entity-grid.entitylist .table > thead,
.nv-table thead { background-color: transparent; }
.entity-grid.entitylist .table > thead > tr > th,
.nv-table th {
  color: var(--nv-color-brand);
  font-size: var(--nv-text-sm);                     /* up from 11px */
  padding: var(--nv-space-4) var(--nv-space-5);      /* roomier than space-3/4 */
}
.entity-grid.entitylist .table > thead > tr > th a { color: var(--nv-color-brand); }
.entity-grid.entitylist .table > thead > tr > th .sort-hint { color: var(--nv-color-brand); }

/* ── Company Account dashboard: blue pill tabs ── */
.nv-tabs--pills .nv-tabs__link--active {
  background-color: var(--nv-color-brand);
  color: #FFFFFF;
}
.nv-tabs--pills .nv-tabs__link--active .nv-badge {
  background: rgba(255,255,255,0.25);
  color: #FFFFFF;
}

/* ── Footer bottom bar: group the legal links with even spacing, push to the right ── */
.nv-footer__legal {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nv-space-2) var(--nv-space-5);
  margin-left: auto;
}

/* ── Jump-to-top button (rendered by global-footer) ── */
.nv-to-top {
  position: fixed;
  right: var(--nv-space-5);
  bottom: var(--nv-space-5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nv-color-brand);
  color: #FFFFFF;
  border: none;
  box-shadow: var(--nv-shadow-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--nv-duration-fast) var(--nv-ease-out),
              transform var(--nv-duration-fast) var(--nv-ease-out),
              visibility var(--nv-duration-fast) var(--nv-ease-out);
  z-index: 60;
}
.nv-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.nv-to-top:hover { background: var(--nv-color-brand-hover); color: #FFFFFF; }

/* Modal chrome → nv-modal look */
.modal-form .modal-content {
  border: 0;
  border-radius: var(--nv-radius-sm);
  box-shadow: var(--nv-shadow-2);
}
.modal-form .modal-header {
  border-bottom: 1px solid var(--nv-color-border);
  padding: var(--nv-space-4) var(--nv-space-5);
}
.modal-form .modal-title {
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-heading);
}
.modal-form .modal-body {
  padding: var(--nv-space-5);
}
.modal-form .modal-footer {
  border-top: 1px solid var(--nv-color-border);
  padding: var(--nv-space-4) var(--nv-space-5);
}