/* Staff management pages only. The shared shell supplies the desktop theme.
   Keep this entire layer behind the desktop/web/pointer guards: mobile, native,
   client portal, document printing, and the approved dispatch/service/vessel
   workspaces continue to use their own layouts. */
@media screen and (min-width: 901px) and (hover: hover) and (pointer: fine) {
  /* Functional settings controls are created only while this desktop query matches. */
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) [data-desktop-staff-hidden][hidden],
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-search [hidden],
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-workbench [hidden] {
    display: none !important;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-search {
    width: 100%; margin-bottom: 18px;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-search input {
    width: 100%; min-width: 0; border: 1px solid var(--mp-line); border-radius: 7px; padding: 9px; font-size: 13px; background: var(--mp-surface); color: var(--mp-ink);
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-search-clear {
    border: 0; padding: 5px 0; color: var(--mp-gold); background: transparent; font-size: 12px;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-search-status {
    margin: 4px 0 0; font-size: 12px; color: var(--mp-muted);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-workbench { min-width: 0; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-workbench-heading {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-workbench h2 { font-size: 21px; margin: 0 0 4px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-workbench h3 { font-size: 16px; margin: 0 0 6px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-workbench-heading p,
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-tabpanel > p { font-size: 13px; color: var(--mp-muted); margin: 0 0 10px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-heading-actions { display: flex; gap: 8px; flex-shrink: 0; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-tabs { display: flex; border-bottom: 1px solid var(--mp-line); gap: 22px; margin-bottom: 14px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 8px 0 11px; font-size: 13px; color: var(--mp-muted); }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-tab[aria-selected="true"] { color: var(--mp-ink); border-bottom-color: var(--mp-gold); font-weight: 600; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-filters input { flex: 1 1 180px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-filters :is(input, select),
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-account-choice select { border: 1px solid var(--mp-line); border-radius: 7px; background: var(--mp-surface); padding: 8px 10px; min-width: 0; font-size: 13px; color: var(--mp-ink); }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-result-count { margin: 0 0 8px; font-size: 12px; color: var(--mp-muted); }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table-wrap { overflow-x: auto; border: 1px solid var(--mp-line); border-radius: 8px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table { table-layout: fixed; width: 100%; min-width: 0; margin: 0; font-size: 13px; border-collapse: collapse; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table :is(th, td) { padding: 12px 10px; border-bottom: 1px solid var(--mp-line); overflow-wrap: anywhere; vertical-align: middle; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table th { background: var(--mp-canvas); font-size: 11px; text-transform: uppercase; letter-spacing: .035em; font-weight: 600; color: var(--mp-muted); }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table th:first-child { width: 31%; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table th:nth-child(2) { width: 18%; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table th:nth-child(4) { width: 82px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table th:last-child { width: 104px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table td:last-child .btn { padding: 6px 10px; white-space: nowrap; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table td:first-child :is(strong, span) { display: block; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-table td:first-child span { color: var(--mp-muted); font-size: 12px; margin-top: 3px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-selected { background: var(--mp-soft-gold); }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-empty,
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-selection-status,
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-readonly { font-size: 13px; color: var(--mp-muted); margin: 12px 0; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-account-choice { display: flex; align-items: center; gap: 12px; font-size: 13px; margin: 14px 0; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-editor { margin-top: 18px; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-editor .staff-account-card { background: var(--mp-surface); }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-savebar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 0 3px; border-top: 1px solid var(--mp-line); width: 100%; }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-savebar span { color: var(--mp-muted); font-size: 12px; }
  /* Daily overview and the office's client / vessel directories. */
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="dashboard"] .metric-card {
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="dashboard"] .metric-card .card-body {
    padding: 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="dashboard"] .metric-card .display-6 {
    margin-top: 6px;
    font-size: 28px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="clients"], [data-desktop-page="vessels"]) .mp-list-heading {
    gap: 16px;
    margin-bottom: 12px;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="clients"], [data-desktop-page="vessels"]) .mp-list-heading form {
    min-width: min(100%, 260px);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="clients"] #new {
    scroll-margin-top: 90px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="vessels"] .vessel-card {
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    box-shadow: none;
    transition: border-color .15s ease;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="vessels"] .vessel-card:hover {
    border-color: var(--mp-gold);
    box-shadow: none;
    transform: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="vessels"] .vessel-card .card-body {
    padding: 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="vessels"] .vessel-card hr {
    margin: 12px 0;
    color: var(--mp-line);
    opacity: 1;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="client_detail"] #mainContent > .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
    align-items: start;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="client_detail"] #mainContent > .row > .col-lg-4 .card + .card {
    margin-top: 16px;
  }

  /* Management fleet directory: keep team / service states, remove the hero. */
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessels-hero {
    min-height: 0;
    padding: 18px 20px;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    color: var(--mp-ink);
    background: var(--mp-surface);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessels-hero::after {
    content: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessels-hero h1 {
    margin: 4px 0 6px;
    color: var(--mp-ink);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.025em;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessels-hero > div:first-child > span {
    color: var(--mp-gold);
    font-size: 11px;
    letter-spacing: .07em;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessels-hero p {
    color: var(--mp-muted);
    font-size: 13px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessels-hero-mark {
    width: 64px;
    height: 64px;
    border-color: var(--mp-line);
    background: var(--mp-soft-gold);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessels-hero-mark b {
    margin-top: 36px;
    color: var(--mp-gold);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-summary {
    gap: 12px;
    margin: 16px 0;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-summary article {
    padding: 14px 16px;
    border-radius: var(--mp-radius);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-summary :is(span, small) {
    font-size: 12px;
    line-height: 1.45;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-summary strong {
    margin: 5px 0;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-directory {
    border-color: var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-directory > header {
    padding: 14px 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-directory > header > div > span {
    font-size: 11px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-directory h2 {
    color: var(--mp-ink);
    font-size: 16px;
    font-weight: 700;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-search input {
    font-size: 13px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-card {
    border-radius: var(--mp-radius);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-card:hover {
    box-shadow: none;
    transform: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-monogram {
    color: var(--mp-gold);
    background: var(--mp-soft-gold);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-card-heading h3 {
    font-size: 17px;
    font-weight: 700;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] :is(.management-vessel-card-heading p, .management-vessel-next strong) {
    font-size: 13px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] :is(.management-vessel-card-heading small, .management-service-chips span, .management-vessel-next small, .management-vessel-next em, .management-vessel-next time, .management-team-mini > span, .management-missing-team b, .management-missing-team span, .management-team-ready b) {
    font-size: 11px;
    line-height: 1.4;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-card > footer {
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 13px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-team-mini {
    gap: 8px;
    flex-wrap: wrap;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-team-mini > span {
    max-width: none;
    white-space: normal;
  }

  /* Management vessel detail is separate from the approved service vessel view. */
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr);
    padding: 18px 20px;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    color: var(--mp-ink);
    background: var(--mp-surface);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-hero-copy h1 {
    color: var(--mp-ink);
    font-size: 27px;
    font-weight: 700;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-hero-copy > span {
    color: var(--mp-gold);
    font-size: 11px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-hero-copy :is(p, small) {
    color: var(--mp-muted);
    font-size: 13px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-hero-actions > :is(a, div) {
    padding: 12px;
    border-color: var(--mp-line);
    color: var(--mp-ink);
    background: var(--mp-canvas);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-hero-actions strong {
    font-size: 13px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-hero-actions small {
    color: var(--mp-muted);
    font-size: 11px;
    white-space: normal;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 18px;
    margin-top: 18px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] :is(.management-vessel-main, .management-vessel-rail) {
    min-width: 0;
    gap: 18px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-rail {
    position: static;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-panel {
    border-radius: var(--mp-radius);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-panel > header {
    min-height: 64px;
    padding: 12px 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-panel > header h2 {
    color: var(--mp-ink);
    font-size: 16px;
    font-weight: 700;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] :is(.management-vessel-panel > header span, .management-vessel-panel > header p, .management-vessel-panel > header > button, .management-visit-row > div span, .management-visit-row > div small, .management-visit-row > em, .management-history-row div span, .management-history-row div small, .management-history-row time, .management-team-roster span, .management-team-roster small, .management-team-form-intro p, .management-team-form-note, .management-vessel-facts dt, .management-engine-panel article span, .management-engine-panel article small, .management-backup-option small, .management-cadence-grid article span, .management-cadence-grid article small) {
    font-size: 11px;
    line-height: 1.45;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] :is(.management-visit-row > div strong, .management-history-row div strong, .management-team-roster strong, .management-team-form-intro strong, .management-vessel-facts dd, .management-vessel-notes p, .management-engine-panel article strong, .management-backup-option strong, .management-cadence-grid article strong) {
    font-size: 13px;
    line-height: 1.4;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] :is(.management-team-form > label, .management-team-form legend, .management-team-form .form-select, .management-team-form .btn) {
    font-size: 12px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] :is(.management-visit-row, .management-history-row) {
    padding: 12px 14px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-team-form {
    gap: 14px;
    padding: 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-facts dd {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Recurring agreements and billing: retain every financial action and state. */
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory[hidden] {
    display: block !important;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--mp-line);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory h2 {
    margin: 0 0 4px;
    font-size: 18px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory :is(p, caption, small) {
    margin: 0;
    color: var(--mp-muted);
    font-size: 12px;
    line-height: 1.45;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory caption {
    padding: 12px 18px;
    border-top: 1px solid var(--mp-line);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory :is(th, td) {
    padding: 12px 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory th:nth-child(1) {
    width: 22%;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory th:nth-child(2) {
    width: 17%;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory th:nth-child(4) {
    width: 104px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory th:nth-child(5) {
    width: 108px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory th:nth-child(6) {
    width: 72px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory td:last-child .btn {
    padding: 6px 8px;
    white-space: nowrap;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory td.text-nowrap {
    white-space: normal !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory td small {
    display: block;
    margin-top: 4px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-directory :is(.badge, .desktop-plan-service) {
    display: inline-block;
    margin: 2px 3px 2px 0;
    white-space: normal;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .desktop-plan-service {
    padding: 3px 6px;
    border: 1px solid var(--mp-line);
    border-radius: 4px;
    color: var(--mp-muted);
    background: var(--mp-canvas);
    font-size: 11px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-section-nav {
    position: static;
    gap: 4px;
    padding: 5px;
    margin: 0 0 18px;
    border-color: var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    box-shadow: none;
    backdrop-filter: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-section-nav a {
    padding: 10px 12px;
    color: var(--mp-muted);
    font-size: 13px;
    font-weight: 600;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] :is(.management-billing-overview, .management-pricing-reference) {
    border-color: var(--mp-line);
    background: var(--mp-surface);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-billing-overview .card-body {
    padding: 12px 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-billing-overview .card-body > .d-flex {
    align-items: center !important;
    margin-bottom: 8px !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-billing-overview h2 {
    display: inline;
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.4;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-billing-overview .card-body > .d-flex > div > .small {
    display: inline;
    margin-left: 10px;
    font-size: 12px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-billing-overview .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 8px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-billing-overview .form-text {
    margin-top: 8px !important;
    font-size: 12px;
    line-height: 1.4;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] :is(.management-billing-total, .management-billing-stat) {
    min-height: 56px;
    padding: 8px 12px;
    border-color: var(--mp-line);
    border-radius: var(--mp-radius);
    color: var(--mp-ink);
    background: var(--mp-canvas);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-billing-total {
    border-color: #e3d2a6;
    background: var(--mp-soft-gold);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] :is(.management-billing-total strong, .management-billing-stat strong) {
    color: var(--mp-ink);
    margin-top: 3px;
    font-size: 21px;
    font-variant-numeric: tabular-nums;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] :is(.management-quote-guide, .quote-service-builder) {
    border-color: var(--mp-line);
    border-radius: 8px;
    background: var(--mp-canvas);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] .management-pricing-reference {
    align-items: start;
    padding: 14px 16px;
    color: var(--mp-muted);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] :is(.service-price-row, .plan-service-choice) {
    border-radius: 8px !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_enrollments"] :is(#management-billing, #fleet-management-plans, #management-quotes, #management-plan-workspace) {
    scroll-margin-top: 90px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="fleet_management_plan_detail"] #mainContent > .vstack {
    gap: 18px !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="fleet_management_plan_detail"] #mainContent > .vstack > .card {
    box-shadow: none !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .billing-control-shell {
    --billing-gold: var(--mp-gold);
    --billing-ink: var(--mp-ink);
    --billing-muted: var(--mp-muted);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .billing-page-heading h1 {
    color: var(--mp-ink);
    font-size: 27px;
    font-weight: 700;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] :is(.billing-status-overview, .billing-disclosure) {
    border-color: var(--mp-line);
    border-radius: var(--mp-radius);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .billing-status-overview-header {
    padding: 16px 18px;
    background: var(--mp-surface);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .billing-status-tabs {
    gap: 12px;
    padding: 14px 18px;
    background: var(--mp-canvas);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .billing-status-tabs .nav-link {
    min-height: 84px;
    padding: 12px 14px;
    border-radius: 8px;
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .billing-status-tabs .nav-link.active {
    color: var(--mp-ink);
    background: var(--mp-soft-gold);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .billing-status-table tbody td {
    padding: 13px 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .collection-preview-card {
    border-color: var(--mp-line);
    border-radius: var(--mp-radius);
    color: var(--mp-ink);
    background: var(--mp-surface);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .collection-preview-total {
    color: var(--mp-gold);
    font-size: 28px;
    font-variant-numeric: tabular-nums;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .collection-preview-row {
    border-color: var(--mp-line);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .collection-preview-card .text-white-50 {
    color: var(--mp-muted) !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="billing"] .billing-disclosure > summary {
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="invoice_detail"] .invoice-sheet {
    max-width: 1120px;
    padding: 28px;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="invoice_detail"] .marinepro-document-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="invoice_detail"] .marinepro-document-table :is(th, td) {
    padding: 12px;
    font-size: 13px;
  }

  /* Operational calendars: size their containers, not their colored statuses. */
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"], [data-desktop-page="main_schedule"]) .view-switch {
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid var(--mp-line);
    border-radius: 8px;
    background: var(--mp-surface);
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"], [data-desktop-page="main_schedule"]) .calendar-card {
    border-color: var(--mp-line);
    border-radius: var(--mp-radius);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"], [data-desktop-page="main_schedule"]) .calendar-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"], [data-desktop-page="main_schedule"]) .month-grid {
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    min-width: 980px;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"], [data-desktop-page="main_schedule"]) .weekday {
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"], [data-desktop-page="main_schedule"]) .calendar-day {
    padding: 8px;
    min-height: 170px;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"], [data-desktop-page="main_schedule"]) .calendar-date {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"]) .wash-event {
    border-radius: 6px;
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"]) :is(.event-vessel, .day-job-vessel) {
    font-size: 13px;
    line-height: 1.4;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"]) :is(.event-client, .wash-event-time, .day-job-line) {
    font-size: 11px;
    line-height: 1.4;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"], [data-desktop-page="main_schedule"]) .day-column {
    padding: 12px;
    border-radius: 8px;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="washes"], [data-desktop-page="dives"], [data-desktop-page="system_checks"], [data-desktop-page="main_schedule"]) .day-job-card {
    padding: 12px;
    border-radius: 8px;
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="main_schedule"] .main-compact-event {
    gap: 6px;
    padding: 7px 6px;
    border-radius: 5px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="main_schedule"] .main-event-copy b {
    font-size: 12px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="main_schedule"] .main-event-copy small {
    font-size: 11px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="main_schedule"] .main-schedule-legend {
    gap: 12px;
    flex-wrap: wrap;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] .route-control-card {
    border-top: 1px solid var(--mp-line);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] .route-planner-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    gap: 18px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] :is(.route-map-toolbar, .route-map-footer) {
    padding: 12px 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] .route-map-frame:not(:fullscreen):not(:-webkit-full-screen) {
    min-height: 520px;
    background: var(--mp-canvas);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] .route-map-frame:not(:fullscreen):not(:-webkit-full-screen) .wash-route-map {
    height: 520px;
    min-height: 520px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] .route-stop-card {
    max-height: 620px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] .route-stop-list {
    max-height: 550px;
    overscroll-behavior-y: contain;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] .route-stop {
    padding: 12px;
    font-size: 13px;
  }

  /* Job detail forms remain in their original columns with all evidence fields. */
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="wash_detail"], [data-desktop-page="dive_detail"]) #mainContent > .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="wash_detail"], [data-desktop-page="dive_detail"]) :is(.btn-lg, .form-select-lg) {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
    border-radius: 8px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_detail"] :is(.clock-card, .crew-clock-card) {
    border-radius: var(--mp-radius);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] .system-check-page {
    max-width: 1240px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] .system-check-heading h1 {
    color: var(--mp-ink);
    font-size: 27px;
    font-weight: 700;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] .system-check-intro > div {
    padding: 12px;
    border-color: var(--mp-line);
    border-radius: 8px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] .system-check-intro :is(strong, small) {
    font-size: 12px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] :is(.system-zone, .system-check-submit) {
    border-radius: var(--mp-radius);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] .system-zone > summary {
    gap: 12px;
    padding: 14px 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] .system-zone-number {
    color: var(--mp-gold);
    background: var(--mp-soft-gold);
    border-radius: 8px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] .system-check-item {
    grid-template-columns: minmax(220px, 1fr) auto;
    padding: 12px 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] .system-condition-option span {
    min-width: 74px;
    padding: 8px 12px;
    font-size: 12px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] :is(.system-zone-status b, .system-zone-status small, .system-check-progress-row > div:first-child span) {
    font-size: 11px;
  }

  /* Settings and people administration: one quiet, readable control surface. */
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-secondary[hidden] {
    display: block !important;
    position: sticky;
    top: 96px;
    float: left;
    width: 210px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 16px 10px;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    scrollbar-width: thin;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-secondary ~ :not(script):not(style) {
    min-width: 0;
    width: auto;
    margin-left: 232px !important;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-nav-group + .desktop-settings-nav-group {
    margin-top: 22px;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-nav-group h2 {
    margin: 0 10px 8px;
    color: var(--mp-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-nav-group a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--mp-ink);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-nav-group a:is(:hover, [aria-current="page"]) {
    border-color: #e3d2a6;
    color: var(--mp-ink);
    background: var(--mp-soft-gold);
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-nav-group svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] .settings-hub {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    gap: 8px;
    margin-bottom: 18px !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] .settings-hub > [class*="col-"] {
    flex: 0 1 auto;
    width: auto;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] .settings-link-card {
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    box-shadow: none;
    transform: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] .settings-link-card:hover {
    border-color: var(--mp-gold);
    box-shadow: none;
    transform: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] .settings-link-card .card-body {
    padding: 10px 12px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] .settings-link-card h2 {
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.4;
  }
  /* These descriptions repeat the secondary nav; keep the original links and
     counts visible while leaving the complete mobile cards untouched. */
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] .settings-link-card :is(p, .text-uppercase) {
    display: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] .settings-count {
    min-width: 0;
    min-height: 0;
    height: auto;
    margin-left: 8px;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] :is(#service-financial-settings, #sms-policy-settings, #google-maps-settings, #stripe-settings, #client-demo-account, #email-settings) {
    justify-content: flex-start !important;
    scroll-margin-top: 90px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="settings"] :is(#service-financial-settings, #sms-policy-settings, #google-maps-settings, #stripe-settings, #client-demo-account, #email-settings) > [class*="col-"] {
    width: 100%;
    max-width: 1120px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="service_settings"] #mainContent > .card {
    width: 100%;
    max-width: 1120px !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .role-permission-panel {
    padding: 16px;
    border-color: var(--mp-line);
    border-radius: 8px;
    background: var(--mp-canvas);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .role-permission-panel h2 {
    color: var(--mp-ink);
    font-size: 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .staff-account-card {
    background: var(--mp-surface);
    border-color: var(--mp-line) !important;
    border-radius: var(--mp-radius) !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-ready [data-desktop-staff-layout] {
    display: block;
    margin-top: 0;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-ready [data-desktop-staff-roster] {
    width: 100%;
    padding: 0;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-account {
    overflow: hidden;
    border: 1px solid var(--mp-line);
    border-radius: 8px;
    background: var(--mp-surface);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-account-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-account-heading::-webkit-details-marker {
    display: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-account-heading > .d-flex {
    min-width: 0;
    align-items: center !important;
    margin: 0 !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-account-heading .small {
    overflow-wrap: anywhere;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-manage {
    padding: 5px 10px;
    border: 1px solid var(--mp-line);
    border-radius: 5px;
    color: var(--mp-ink);
    background: var(--mp-surface);
    font-size: 12px;
    font-weight: 600;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-account[open] > summary {
    border-bottom: 1px solid var(--mp-line);
    background: var(--mp-soft-gold);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-account > .staff-account-card {
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 18px !important;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-tools {
    display: grid;
    gap: 12px;
    margin-top: 18px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-support {
    overflow: hidden;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-support-heading {
    padding: 14px 16px;
    color: var(--mp-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] .desktop-staff-support > :not(summary) {
    width: 100%;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--mp-line);
    border-radius: 0;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="staff_accounts"] :is(.desktop-staff-account-heading, .desktop-staff-support-heading):focus-visible {
    outline: 2px solid var(--mp-gold);
    outline-offset: -3px;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="staff_accounts"], [data-desktop-page="employee_onboarding"]) .sticky-form {
    position: static;
  }
  html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"]) #mainContent > .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
    align-items: start;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="portal_accounts"] .portal-active-accounts {
    border-color: var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    box-shadow: none;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="portal_accounts"] .portal-active-accounts > header {
    padding: 16px 18px;
    color: var(--mp-ink);
    background: var(--mp-surface);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="portal_accounts"] .portal-active-accounts > header :is(h2, p) {
    color: var(--mp-ink);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="portal_accounts"] .portal-active-accounts > header h2 {
    font-size: 18px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="portal_accounts"] .portal-active-accounts > header :is(span, p) {
    font-size: 12px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="portal_accounts"] .portal-account-search {
    padding: 14px 18px;
    background: var(--mp-canvas);
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="portal_accounts"] :is(.portal-vessel-pill, .portal-active-badge) {
    font-size: 11px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="time_entries"] #mainContent > .card:first-of-type .card-body {
    padding: 16px;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="time_entries"] .table {
    min-width: 980px;
    font-variant-numeric: tabular-nums;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="time_entries"] .table > thead > tr > th {
    white-space: nowrap;
  }
  html:not(.is-native-app) body.desktop-refresh[data-desktop-page="time_entries"] .table > tbody > tr > td {
    padding: 12px 14px;
  }

  @media (max-width: 1250px) {
    html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-secondary[hidden] {
      display: flex !important;
      position: static;
      float: none;
      flex-wrap: wrap;
      gap: 16px;
      width: 100%;
      max-height: none;
      margin-bottom: 18px;
      padding: 14px;
    }
    html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-secondary ~ :not(script):not(style) {
      margin-left: 0 !important;
    }
    html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-nav-group {
      flex: 1 1 160px;
      margin: 0;
    }
    html:not(.is-native-app) body.desktop-refresh:is([data-desktop-page="settings"], [data-desktop-page="service_settings"], [data-desktop-page="staff_accounts"], [data-desktop-page="team"], [data-desktop-page="employee_onboarding"], [data-desktop-page="portal_accounts"], [data-desktop-page="time_entries"]) .desktop-settings-nav-group + .desktop-settings-nav-group {
      margin-top: 0;
    }
  }

  /* Small desktop windows retain a usable reading column and scrollable tables. */
  @media (max-width: 1150px) {
    html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessels"] .management-vessel-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] :is(.management-vessel-hero, .management-vessel-layout) {
      grid-template-columns: minmax(0, 1fr);
    }
    html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-vessel-rail {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    html:not(.is-native-app) body.desktop-refresh[data-desktop-page="management_vessel_detail"] .management-team-panel {
      grid-column: 1 / -1;
    }
    html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] .route-planner-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    html:not(.is-native-app) body.desktop-refresh[data-desktop-page="wash_route_planner"] .route-stop-list {
      max-height: 360px;
    }
    html:not(.is-native-app) body.desktop-refresh[data-desktop-page="system_check_detail"] .system-check-progress-row {
      grid-template-columns: minmax(150px, 1fr) minmax(160px, 1fr);
    }
  }
}