/*
 * ENUW / Perfex shared responsive system.
 *
 * This file owns application-wide viewport geometry, the shared admin shell,
 * overlays, touch targets, orientation behavior and transaction documents.
 * Module stylesheets continue to own their component appearance.
 * Loaded last from app_admin_head and app_customers_head.
 */

:root {
  --enuw-screen-gutter: 24px;
  --enuw-screen-gutter-compact: 12px;
  --enuw-touch-target: 44px;
  --enuw-overlay-gutter: 16px;
  --enuw-overlay-max-height: calc(100dvh - (var(--enuw-overlay-gutter) * 2));
}

html,
body {
  width: 100%;
  max-width: 100%;
}

body,
#wrapper,
#wrapper > .content,
#content,
.content-wrapper,
.container,
.container-fluid,
.row,
.panel_s,
.panel-body,
.modal,
.modal-dialog,
.modal-content,
.modal-body {
  min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

pre,
code,
.text-long,
.long-text,
.description,
.modal-title,
.popover-content,
.tooltip-inner,
.dropdown-menu > li > a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Wide data remains available, but only its local wrapper may scroll. */
.table-responsive,
.dataTables_scrollBody,
.dt-scroll-body,
.horizontal-scrollable-tabs,
.enuw-asset-options {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper,
.dataTables_scroll,
.dt-scroll,
.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.dt-scroll-head,
.dt-scroll-headInner {
  max-width: 100%;
}

.dataTables_scrollHead,
.dt-scroll-head {
  overflow: hidden !important;
}

/* Shared overlay containment: Bootstrap, Select2, jQuery UI and editors. */
.dropdown-menu,
.bootstrap-select .dropdown-menu,
.select2-drop,
.select2-dropdown,
.ui-autocomplete,
.typeahead,
.tt-menu,
.daterangepicker,
.datepicker,
.datetimepicker,
.colorpicker,
.popover,
.tooltip-inner,
#app-tooltip,
.note-popover,
.tox-tinymce-aux,
.mce-floatpanel,
.notifications-wrapper,
.header-notifications,
.enuw-asset-options {
  max-width: calc(100vw - (var(--enuw-overlay-gutter) * 2)) !important;
  overflow-wrap: anywhere;
}

.dropdown-menu,
.bootstrap-select .dropdown-menu,
.select2-drop,
.select2-dropdown,
.ui-autocomplete,
.typeahead,
.tt-menu,
.daterangepicker,
.datepicker,
.datetimepicker,
.colorpicker,
.notifications-wrapper,
.header-notifications,
.enuw-asset-options {
  max-height: var(--enuw-overlay-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.select2-container,
.select2-container-multi,
.bootstrap-select,
.input-group,
.form-group {
  min-width: 0;
  max-width: 100%;
}

.select2-drop-mask {
  width: 100vw !important;
  max-width: 100vw !important;
}

.popover,
.tooltip,
#app-tooltip,
.note-popover {
  pointer-events: auto;
}

/* Shared modal/drawer viewport contract. */
.modal {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.modal-dialog,
.modal-dialog.modal-sm,
.modal-dialog.modal-lg,
.modal-dialog.modal-xl,
.modal-dialog.modal-xxl,
.modal-dialog.full-screen-modal,
#usp-page-modal .modal-dialog,
.enuw-confirm .modal-dialog,
.enuw-copilot-assets .modal-dialog {
  width: min(calc(100% - 32px), 1140px) !important;
  max-width: calc(100vw - 32px) !important;
  margin: 16px auto !important;
}

.modal-content,
#usp-page-modal .modal-content,
.enuw-confirm .modal-content,
.enuw-copilot-assets .modal-content {
  display: flex;
  max-height: calc(100dvh - 32px);
  flex-direction: column;
}

#usp-page-modal .usp-md-dialog,
.enuw-confirm__dialog,
.enuw-copilot-assets__panel {
  width: min(calc(100% - 32px), 960px);
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

#usp-page-modal .usp-md-content {
  display: flex;
  max-height: calc(100dvh - 32px);
  flex-direction: column;
}

.modal-header,
.modal-footer {
  flex: 0 0 auto;
}

.modal-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: max(15px, env(safe-area-inset-bottom));
}

.modal-footer .btn {
  margin: 0 !important;
}

.modal-header .close,
.modal-header [data-dismiss="modal"],
.modal-header [data-bs-dismiss="modal"] {
  min-width: var(--enuw-touch-target);
  min-height: var(--enuw-touch-target);
}

.offcanvas,
.drawer,
.side-panel,
.activity-feed,
.small-table-right-col {
  width: min(100%, 480px);
  max-width: 100vw;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Tablet baseline: retain dense tables inside local scrollers. */
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --enuw-screen-gutter: 18px; }

  #wrapper > .content,
  #content > .content {
    max-width: 100%;
    padding-right: var(--enuw-screen-gutter);
    padding-left: var(--enuw-screen-gutter);
  }

  #header,
  #header nav,
  #header nav > div,
  #header .navbar-right {
    min-width: 0;
    max-width: 100%;
  }

  #header #top_search {
    min-width: 0;
    max-width: min(34vw, 360px);
  }

  .table-responsive,
  .dataTables_scrollBody,
  .dt-scroll-body {
    width: 100%;
  }

  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-xxl {
    width: min(calc(100% - 36px), 960px) !important;
    max-width: calc(100vw - 36px) !important;
  }
}

/* Phone shell, controls and overlays. */
@media (max-width: 767px) {
  :root {
    --enuw-screen-gutter: 12px;
    --enuw-overlay-gutter: 8px;
  }

  html,
  body {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  @supports (overflow: clip) {
    html,
    body { overflow-x: clip !important; }
  }

  #wrapper,
  #content,
  .content-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-x: hidden !important;
  }

  #wrapper > .content,
  #content > .content,
  .content-wrapper > .content {
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--enuw-screen-gutter) + env(safe-area-inset-right)) !important;
    padding-left: calc(var(--enuw-screen-gutter) + env(safe-area-inset-left)) !important;
  }

  #header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: calc(8px + env(safe-area-inset-right)) !important;
    padding-left: calc(8px + env(safe-area-inset-left)) !important;
    overflow: visible;
  }

  #header nav,
  #header nav > div,
  #header nav > div > div.tw-flex.tw-flex-1,
  #header .navbar-right {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #header #logo,
  #header #top_search {
    display: none !important;
  }

  #header nav > div > div.tw-flex.tw-flex-1 {
    flex: 0 1 auto !important;
  }

  #header .navbar-right {
    flex: 0 1 auto !important;
    margin-left: auto !important;
  }

  #header button.hide-menu,
  #header .navbar-right > li > a {
    min-width: var(--enuw-touch-target) !important;
    min-height: var(--enuw-touch-target) !important;
  }

  #header .header-user > a > span,
  #header .header-user .tw-ml-2,
  #header .header-user .staff-name {
    display: none !important;
  }

  .form-control,
  input.form-control,
  textarea.form-control,
  select.form-control,
  .dataTables_wrapper .dataTables_length select,
  .dataTables_wrapper .dataTables_filter input,
  .bootstrap-select .bs-searchbox input,
  .select2-drop .select2-search input,
  .select2-container .select2-choice,
  .select2-container-multi .select2-choices,
  .bootstrap-select > .dropdown-toggle.btn {
    min-height: var(--enuw-touch-target) !important;
    font-size: 16px !important;
  }

  textarea.form-control { min-height: 96px !important; }

  .bootstrap-select,
  .select2-container,
  .select2-container-multi {
    width: 100% !important;
  }

  .btn:not(.btn-link),
  .btn-group > .btn,
  .table-btn,
  .bulk-actions-btn,
  .dt-buttons .dt-button,
  .toggle-small-view,
  .pagination > li > a,
  .pagination > li > span {
    min-height: var(--enuw-touch-target) !important;
  }

  .btn.btn-icon,
  .btn-circle,
  .toggle-small-view {
    min-width: var(--enuw-touch-target) !important;
  }

  .dropdown-menu,
  .bootstrap-select .dropdown-menu,
  .select2-drop,
  .select2-dropdown,
  .ui-autocomplete,
  .typeahead,
  .tt-menu,
  .daterangepicker,
  .datepicker,
  .datetimepicker,
  .colorpicker,
  .notifications-wrapper,
  .header-notifications {
    width: min(360px, calc(100vw - 16px));
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px);
  }

  .dropdown-menu > li > a,
  .bootstrap-select .dropdown-menu li > a,
  .select2-results .select2-result-label,
  .ui-autocomplete > li > a {
    display: flex;
    min-height: var(--enuw-touch-target);
    align-items: center;
    white-space: normal;
  }

  #header .dropdown-menu,
  #header .notifications-wrapper,
  #header .header-notifications {
    right: max(8px, env(safe-area-inset-right)) !important;
    left: auto !important;
  }

  .daterangepicker,
  .datepicker,
  .datetimepicker,
  .colorpicker {
    right: auto !important;
    left: 8px !important;
  }

  .daterangepicker .ranges,
  .daterangepicker .drp-calendar,
  .datepicker table,
  .datetimepicker table {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
  }

  .popover,
  .tooltip,
  #app-tooltip,
  .note-popover {
    max-width: calc(100vw - 16px) !important;
  }

  .modal-dialog,
  .modal-dialog.modal-sm,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-xxl,
  .modal-dialog.full-screen-modal,
  #usp-page-modal .modal-dialog,
  .enuw-confirm .modal-dialog,
  .enuw-copilot-assets .modal-dialog {
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }

  .modal-content,
  #usp-page-modal .modal-content,
  .enuw-confirm .modal-content,
  .enuw-copilot-assets .modal-content {
    max-height: calc(100dvh - 16px);
  }

  #usp-page-modal .usp-md-dialog,
  .enuw-confirm__dialog,
  .enuw-copilot-assets__panel {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  #usp-page-modal .usp-md-content {
    max-height: calc(100dvh - 16px);
  }

  .modal-header,
  .modal-footer { padding: 12px 16px; }
  .modal-body { padding: 16px; }

  .modal-footer .btn { min-height: var(--enuw-touch-target); }

  .offcanvas,
  .drawer,
  .side-panel,
  .activity-feed,
  .small-table-right-col {
    width: min(100%, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }

  .horizontal-scrollable-tabs {
    overflow: hidden;
  }

  .horizontal-scrollable-tabs .nav-tabs-horizontal,
  .nav-tabs {
    display: flex;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs > li {
    float: none;
    flex: 0 0 auto;
  }

  .nav-tabs > li > a {
    display: inline-flex;
    min-height: var(--enuw-touch-target);
    align-items: center;
    white-space: nowrap;
  }
}

/* Phone portrait: stack dense action and modal footers. */
@media (max-width: 479px) and (orientation: portrait) {
  ._buttons,
  .p_buttons,
  .proposal_buttons,
  .invoice-view-buttons,
  .estimate-view-buttons,
  .page-title-wrapper {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* Phone landscape: prioritize usable height and keep actions reachable. */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 600px) {
  :root { --enuw-overlay-gutter: 6px; }

  #header,
  #header nav,
  #header .navbar-right > li > a,
  #header button.hide-menu {
    min-height: var(--enuw-touch-target) !important;
  }

  #wrapper > .content,
  #content > .content,
  .content-wrapper > .content {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .modal-dialog,
  .modal-dialog.modal-sm,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-xxl,
  #usp-page-modal .modal-dialog,
  .enuw-confirm .modal-dialog,
  .enuw-copilot-assets .modal-dialog {
    width: calc(100% - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    margin: 6px auto !important;
  }

  .modal-content,
  #usp-page-modal .modal-content,
  .enuw-confirm .modal-content,
  .enuw-copilot-assets .modal-content,
  .enuw-confirm,
  .enuw-copilot-assets {
    max-height: calc(100dvh - 12px) !important;
  }

  #usp-page-modal .usp-md-dialog,
  #usp-page-modal .usp-md-content,
  .enuw-confirm__dialog,
  .enuw-copilot-assets__panel {
    max-height: calc(100dvh - 12px) !important;
  }

  .modal-header,
  .modal-footer { padding-top: 8px; padding-bottom: 8px; }
}

/* Tablet portrait. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-xxl {
    width: calc(100% - 36px) !important;
    max-width: calc(100vw - 36px) !important;
  }

  .enuw-intake-shell,
  .enuw-copilot,
  .enuw-sales-ops,
  .enuw-catalog-page {
    max-width: 100%;
  }
}

/* Tablet landscape. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  #header #top_search { max-width: min(28vw, 320px); }

  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-xxl {
    width: min(calc(100% - 48px), 1040px) !important;
    max-width: calc(100vw - 48px) !important;
  }
}

/* Desktop: containment only; component layouts keep their intended density. */
@media (min-width: 1200px) {
  #wrapper,
  #wrapper > .content,
  #content,
  .content-wrapper,
  .panel_s,
  .panel-body {
    min-width: 0;
    max-width: 100%;
  }

  .modal-dialog.modal-xl,
  .modal-dialog.modal-xxl {
    width: min(1140px, calc(100vw - 48px)) !important;
  }
}

/* Public document content uses the existing light paper palette. The global
   admin wrapper's dark background makes customer navigation unreadable. */
body.customers.viewestimate #wrapper,
body.customers.proposal-view #wrapper {
  background: transparent !important;
}

@media (pointer: coarse) {
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .dropdown-menu > li > a,
  .bootstrap-select .dropdown-menu li > a,
  .select2-results .select2-result-label,
  .pagination > li > a,
  .nav-tabs > li > a {
    min-height: var(--enuw-touch-target);
  }
}

@media (max-width: 767px) {
  html.enuw-transaction-mobile-root,
  html:has(body.enuw-transaction-mobile),
  body.enuw-transaction-mobile,
  body.viewinvoice,
  body.viewestimate,
  body.viewproposal {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  @supports (overflow: clip) {
    html.enuw-transaction-mobile-root,
    html:has(body.enuw-transaction-mobile),
    body.enuw-transaction-mobile,
    body.viewinvoice,
    body.viewestimate,
    body.viewproposal { overflow-x: clip !important; }
  }

  /* Shared transaction shell and admin header */
  body.enuw-transaction-mobile #wrapper,
  body.enuw-transaction-mobile #wrapper > .content,
  body.enuw-transaction-mobile #content,
  body.enuw-transaction-mobile .content-wrapper,
  body.enuw-transaction-mobile form._transaction_form,
  body.enuw-transaction-mobile form._invoice_form,
  body.enuw-transaction-mobile form._estimate_form,
  body.enuw-transaction-mobile form._proposal_form,
  body.enuw-transaction-mobile form.invoice-form,
  body.enuw-transaction-mobile form.estimate-form,
  body.enuw-transaction-mobile form.proposal-form,
  body.enuw-transaction-mobile .panel_s,
  body.enuw-transaction-mobile .panel-body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.enuw-transaction-mobile #wrapper,
  body.enuw-transaction-mobile #content,
  body.enuw-transaction-mobile .content-wrapper {
    margin-left: 0 !important;
    overflow-x: hidden !important;
  }

  body.enuw-transaction-mobile #wrapper > .content {
    padding: 10px !important;
  }

  body.enuw-transaction-mobile #header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    overflow: visible;
  }

  body.enuw-transaction-mobile #header nav,
  body.enuw-transaction-mobile #header nav > div,
  body.enuw-transaction-mobile #header nav > div > div.tw-flex.tw-flex-1,
  body.enuw-transaction-mobile #header .navbar-right {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.enuw-transaction-mobile #header #logo,
  body.enuw-transaction-mobile #header #top_search {
    display: none !important;
  }

  body.enuw-transaction-mobile #header nav > div > div.tw-flex.tw-flex-1 {
    flex: 0 1 auto !important;
  }

  body.enuw-transaction-mobile #header .navbar-right {
    flex: 0 1 auto !important;
    margin-left: auto !important;
  }

  body.enuw-transaction-mobile #header button.hide-menu,
  body.enuw-transaction-mobile #header .navbar-right > li > a {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.enuw-transaction-mobile #header .header-user > a > span,
  body.enuw-transaction-mobile #header .header-user .tw-ml-2,
  body.enuw-transaction-mobile #header .header-user .staff-name {
    display: none !important;
  }

  /* Page heading, status and action rows */
  body.enuw-transaction-mobile #wrapper > .content > .row,
  body.enuw-transaction-mobile #wrapper > .content > .tw-flex,
  body.enuw-transaction-mobile .page-title-wrapper,
  body.enuw-transaction-mobile .invoice-view-buttons,
  body.enuw-transaction-mobile .estimate-view-buttons,
  body.enuw-transaction-mobile .proposal_buttons,
  body.enuw-transaction-mobile ._buttons,
  body.enuw-transaction-mobile .p_buttons {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.enuw-transaction-mobile #wrapper > .content > .tw-flex,
  body.enuw-transaction-mobile .page-title-wrapper,
  body.enuw-transaction-mobile .invoice-view-buttons,
  body.enuw-transaction-mobile .estimate-view-buttons,
  body.enuw-transaction-mobile .proposal_buttons,
  body.enuw-transaction-mobile ._buttons,
  body.enuw-transaction-mobile .p_buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.enuw-transaction-mobile .page-title,
  body.enuw-transaction-mobile h1,
  body.enuw-transaction-mobile h2,
  body.enuw-transaction-mobile h3,
  body.enuw-transaction-mobile h4 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.enuw-transaction-mobile .invoice-view-buttons > *,
  body.enuw-transaction-mobile .estimate-view-buttons > *,
  body.enuw-transaction-mobile .proposal_buttons > *,
  body.enuw-transaction-mobile ._buttons > *,
  body.enuw-transaction-mobile .p_buttons > * {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.enuw-transaction-mobile .invoice-view-buttons .btn,
  body.enuw-transaction-mobile .estimate-view-buttons .btn,
  body.enuw-transaction-mobile .proposal_buttons .btn,
  body.enuw-transaction-mobile ._buttons .btn,
  body.enuw-transaction-mobile .p_buttons .btn {
    min-height: 44px !important;
    white-space: normal !important;
  }

  /* Horizontal tabs stay contained and independently scrollable. */
  body.enuw-transaction-mobile .horizontal-scrollable-tabs,
  body.enuw-transaction-mobile .nav-tabs-horizontal {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.enuw-transaction-mobile .nav-tabs {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    flex-wrap: nowrap !important;
  }

  body.enuw-transaction-mobile .nav-tabs > li {
    float: none !important;
    flex: 0 0 auto !important;
  }

  body.enuw-transaction-mobile .nav-tabs > li > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    white-space: nowrap;
  }

  /* Customer, date, address and transaction option grids */
  body.enuw-transaction-mobile form._transaction_form .row,
  body.enuw-transaction-mobile form._invoice_form .row,
  body.enuw-transaction-mobile form._estimate_form .row,
  body.enuw-transaction-mobile form._proposal_form .row {
    min-width: 0 !important;
    margin-right: -6px !important;
    margin-left: -6px !important;
  }

  body.enuw-transaction-mobile form._transaction_form .row > [class*="col-"],
  body.enuw-transaction-mobile form._invoice_form .row > [class*="col-"],
  body.enuw-transaction-mobile form._estimate_form .row > [class*="col-"],
  body.enuw-transaction-mobile form._proposal_form .row > [class*="col-"],
  body.enuw-transaction-mobile #invoice_top_info > [class*="col-"],
  body.enuw-transaction-mobile #estimate_top_info > [class*="col-"],
  body.enuw-transaction-mobile #proposal_top_info > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  body.enuw-transaction-mobile .invoice-to,
  body.enuw-transaction-mobile .estimate-to,
  body.enuw-transaction-mobile .proposal-to,
  body.enuw-transaction-mobile .billing-shipping-wrapper,
  body.enuw-transaction-mobile .transaction-address,
  body.enuw-transaction-mobile .form-group,
  body.enuw-transaction-mobile .input-group,
  body.enuw-transaction-mobile .bootstrap-select,
  body.enuw-transaction-mobile .select2-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.enuw-transaction-mobile form._transaction_form .form-control,
  body.enuw-transaction-mobile form._transaction_form input,
  body.enuw-transaction-mobile form._transaction_form select,
  body.enuw-transaction-mobile form._transaction_form textarea,
  body.enuw-transaction-mobile form._transaction_form .bootstrap-select > .btn,
  body.enuw-transaction-mobile form._transaction_form .select2-choice {
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  body.enuw-transaction-mobile form._transaction_form textarea {
    min-height: 88px !important;
    resize: vertical;
  }

  /* Proposal, estimate and invoice line items become one-column cards. */
  body.enuw-transaction-mobile .s_table,
  body.enuw-transaction-mobile .s_table.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.enuw-transaction-mobile .s_table table.items {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  body.enuw-transaction-mobile .s_table table.items thead {
    display: none !important;
  }

  body.enuw-transaction-mobile .s_table table.items tbody {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 12px;
  }

  body.enuw-transaction-mobile .s_table table.items tbody tr.item,
  body.enuw-transaction-mobile .s_table table.items tbody tr.main.enuw-custom-open {
    position: relative;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: visible !important;
    border: 1px solid #dfe4e0 !important;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(20, 28, 23, .06);
  }

  body.enuw-transaction-mobile .s_table table.items tbody tr.main:not(.enuw-custom-open) {
    display: none !important;
  }

  body.enuw-transaction-mobile .s_table table.items tbody tr.item > td,
  body.enuw-transaction-mobile .s_table table.items tbody tr.main.enuw-custom-open > td {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    white-space: normal !important;
  }

  body.enuw-transaction-mobile .s_table table.items td[data-label]::before {
    content: attr(data-label) !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #5f6962 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  body.enuw-transaction-mobile .s_table table.items td.dragger,
  body.enuw-transaction-mobile .s_table table.items td:first-child:empty {
    display: none !important;
  }

  body.enuw-transaction-mobile .s_table table.items td.enuw-row-action {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 44px !important;
    z-index: 2;
  }

  body.enuw-transaction-mobile .s_table table.items td.description {
    padding-right: 52px !important;
  }

  body.enuw-transaction-mobile .s_table table.items td.amount {
    display: flex !important;
    min-height: 44px !important;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px !important;
    border-top: 1px solid #e5e9e6 !important;
    font-size: 17px !important;
    text-align: left !important;
  }

  body.enuw-transaction-mobile .s_table table.items input,
  body.enuw-transaction-mobile .s_table table.items select,
  body.enuw-transaction-mobile .s_table table.items textarea,
  body.enuw-transaction-mobile .s_table table.items .bootstrap-select,
  body.enuw-transaction-mobile .s_table table.items .bootstrap-select > .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  body.enuw-transaction-mobile .enuw-row-thumb,
  body.enuw-transaction-mobile .enuw-line-product {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.enuw-transaction-mobile .enuw-row-thumb img,
  body.enuw-transaction-mobile .enuw-line-product img {
    flex: 0 0 66px;
    width: 66px !important;
    height: 66px !important;
    object-fit: contain;
  }

  /* Totals and notes stay within the phone width. */
  body.enuw-transaction-mobile form._transaction_form .col-md-8.col-md-offset-4,
  body.enuw-transaction-mobile form._transaction_form .col-md-6.col-md-offset-6,
  body.enuw-transaction-mobile .invoice-total,
  body.enuw-transaction-mobile .estimate-total,
  body.enuw-transaction-mobile .proposal-total,
  body.enuw-transaction-mobile .transaction-totals {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.enuw-transaction-mobile form._transaction_form .table-responsive:not(.s_table),
  body.enuw-transaction-mobile form._transaction_form .table-responsive:not(.s_table) table,
  body.enuw-transaction-mobile .transaction-totals table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    table-layout: fixed;
  }

  body.enuw-transaction-mobile form._transaction_form .table-responsive:not(.s_table) td,
  body.enuw-transaction-mobile .transaction-totals td {
    padding: 9px 6px !important;
    overflow-wrap: anywhere;
  }

  /* The save toolbar remains reachable above mobile browser chrome. */
  body.enuw-transaction-mobile {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  body.enuw-transaction-mobile .btn-bottom-toolbar {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #dfe4e0;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 -8px 22px rgba(20, 28, 23, .10);
  }

  body.enuw-transaction-mobile .btn-bottom-toolbar > *,
  body.enuw-transaction-mobile .btn-bottom-toolbar .btn-group {
    flex: 1 1 132px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.enuw-transaction-mobile .btn-bottom-toolbar .btn,
  body.enuw-transaction-mobile .btn-bottom-toolbar button,
  body.enuw-transaction-mobile .btn-bottom-toolbar input[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    white-space: normal !important;
  }

  /* Admin previews use a sidebar/main split on desktop. */
  body.enuw-transaction-mobile #invoice-preview,
  body.enuw-transaction-mobile #estimate-preview,
  body.enuw-transaction-mobile #proposal-preview,
  body.enuw-transaction-mobile .invoice-preview,
  body.enuw-transaction-mobile .estimate-preview,
  body.enuw-transaction-mobile .proposal-preview {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.enuw-transaction-mobile #invoice-preview > .row > [class*="col-"],
  body.enuw-transaction-mobile #estimate-preview > .row > [class*="col-"],
  body.enuw-transaction-mobile #proposal-preview > .row > [class*="col-"],
  body.enuw-transaction-mobile .invoice-preview > .row > [class*="col-"],
  body.enuw-transaction-mobile .estimate-preview > .row > [class*="col-"],
  body.enuw-transaction-mobile .proposal-preview > .row > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  /* Customer-facing invoice, estimate and proposal documents. */
  body.viewinvoice,
  body.viewestimate,
  body.viewproposal {
    padding: 8px 8px 72px !important;
  }

  body.viewinvoice .preview-top-wrapper,
  body.viewestimate .preview-top-wrapper,
  body.viewproposal .preview-top-wrapper {
    display: flex;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.viewinvoice .preview-top-wrapper .action-button,
  body.viewestimate .preview-top-wrapper .action-button,
  body.viewproposal .preview-top-wrapper .action-button,
  body.viewinvoice .preview-top-wrapper .btn,
  body.viewestimate .preview-top-wrapper .btn,
  body.viewproposal .preview-top-wrapper .btn {
    flex: 1 1 140px;
    min-width: 0 !important;
    min-height: 46px;
    padding-right: 12px !important;
    padding-left: 12px !important;
    white-space: normal !important;
  }

  body.viewinvoice .panel_s,
  body.viewestimate .panel_s,
  body.viewproposal .panel_s,
  body.viewinvoice .panel_s > .panel-body,
  body.viewestimate .panel_s > .panel-body,
  body.viewproposal .panel_s > .panel-body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.viewinvoice .panel_s > .panel-body,
  body.viewestimate .panel_s > .panel-body,
  body.viewproposal .panel_s > .panel-body {
    padding: 24px 14px !important;
  }

  body.viewinvoice .transaction-html-info,
  body.viewestimate .transaction-html-info,
  body.viewproposal .transaction-html-info,
  body.viewinvoice .transaction-html-info > [class*="col-"],
  body.viewestimate .transaction-html-info > [class*="col-"],
  body.viewproposal .transaction-html-info > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-wrap: anywhere;
  }

  body.viewinvoice .panel_s .table-responsive,
  body.viewestimate .panel_s .table-responsive,
  body.viewproposal .panel_s .table-responsive {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
  }

  body.viewinvoice .panel_s .table-responsive table.items,
  body.viewestimate .panel_s .table-responsive table.items,
  body.viewproposal .panel_s .table-responsive table.items {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.viewinvoice .panel_s .table-responsive table.items thead,
  body.viewestimate .panel_s .table-responsive table.items thead,
  body.viewproposal .panel_s .table-responsive table.items thead {
    display: none;
  }

  body.viewinvoice .panel_s .table-responsive table.items tbody,
  body.viewestimate .panel_s .table-responsive table.items tbody,
  body.viewproposal .panel_s .table-responsive table.items tbody {
    display: grid;
    gap: 10px;
  }

  body.viewinvoice .panel_s .table-responsive table.items tbody tr,
  body.viewestimate .panel_s .table-responsive table.items tbody tr,
  body.viewproposal .panel_s .table-responsive table.items tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(13, 13, 13, .14);
  }

  body.viewinvoice .panel_s .table-responsive table.items tbody td,
  body.viewestimate .panel_s .table-responsive table.items tbody td,
  body.viewproposal .panel_s .table-responsive table.items tbody td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  body.viewinvoice .panel_s .table-responsive table.items tbody td:nth-child(2),
  body.viewestimate .panel_s .table-responsive table.items tbody td:nth-child(2),
  body.viewproposal .panel_s .table-responsive table.items tbody td:nth-child(2) {
    grid-column: 1 / -1;
  }

  body.viewinvoice .panel_s .table-responsive table.items tbody td:nth-last-child(4)::before,
  body.viewestimate .panel_s .table-responsive table.items tbody td:nth-last-child(4)::before,
  body.viewproposal .panel_s .table-responsive table.items tbody td:nth-last-child(4)::before { content: "Quantity"; }
  body.viewinvoice .panel_s .table-responsive table.items tbody td:nth-last-child(3)::before,
  body.viewestimate .panel_s .table-responsive table.items tbody td:nth-last-child(3)::before,
  body.viewproposal .panel_s .table-responsive table.items tbody td:nth-last-child(3)::before { content: "Rate"; }
  body.viewinvoice .panel_s .table-responsive table.items tbody td:nth-last-child(2)::before,
  body.viewestimate .panel_s .table-responsive table.items tbody td:nth-last-child(2)::before,
  body.viewproposal .panel_s .table-responsive table.items tbody td:nth-last-child(2)::before { content: "Tax"; }
  body.viewinvoice .panel_s .table-responsive table.items tbody td:last-child::before,
  body.viewestimate .panel_s .table-responsive table.items tbody td:last-child::before,
  body.viewproposal .panel_s .table-responsive table.items tbody td:last-child::before { content: "Amount"; }

  body.viewinvoice .panel_s .table-responsive table.items tbody td::before,
  body.viewestimate .panel_s .table-responsive table.items tbody td::before,
  body.viewproposal .panel_s .table-responsive table.items tbody td::before {
    display: block;
    margin-bottom: 3px;
    color: #555450;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  body.viewinvoice .panel_s .col-md-6.col-md-offset-6,
  body.viewestimate .panel_s .col-md-6.col-md-offset-6,
  body.viewproposal .panel_s .col-md-6.col-md-offset-6,
  body.viewinvoice .panel_s .col-md-8.col-md-offset-4,
  body.viewestimate .panel_s .col-md-8.col-md-offset-4,
  body.viewproposal .panel_s .col-md-8.col-md-offset-4 {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.viewinvoice .panel_s .col-md-6.col-md-offset-6 table,
  body.viewestimate .panel_s .col-md-6.col-md-offset-6 table,
  body.viewproposal .panel_s .col-md-6.col-md-offset-6 table,
  body.viewinvoice .invoice-payments-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed;
  }

  body.viewinvoice .panel_s img,
  body.viewestimate .panel_s img,
  body.viewproposal .panel_s img {
    max-width: 100% !important;
    height: auto;
  }
}

@media (max-width: 380px) {
  body.enuw-transaction-mobile #wrapper > .content { padding: 8px !important; }

  body.enuw-transaction-mobile .panel-body { padding-right: 10px !important; padding-left: 10px !important; }

  body.enuw-transaction-mobile .btn-bottom-toolbar > *,
  body.enuw-transaction-mobile .btn-bottom-toolbar .btn-group,
  body.viewinvoice .preview-top-wrapper .action-button,
  body.viewestimate .preview-top-wrapper .action-button,
  body.viewproposal .preview-top-wrapper .action-button {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

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

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

  body.enuw-transaction-mobile *,
  body.viewinvoice *,
  body.viewestimate *,
  body.viewproposal * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-contrast: more) {
  .form-control,
  .bootstrap-select > .dropdown-toggle.btn,
  .select2-container .select2-choice,
  .select2-container-multi .select2-choices,
  .dropdown-menu,
  .modal-content,
  .popover,
  .table-responsive {
    border-width: 2px !important;
  }

  .btn:focus-visible,
  .form-control:focus-visible,
  .nav-tabs > li > a:focus-visible,
  .dropdown-menu > li > a:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}

@media (forced-colors: active) {
  .form-control,
  .bootstrap-select > .dropdown-toggle.btn,
  .select2-container .select2-choice,
  .select2-container-multi .select2-choices,
  .dropdown-menu,
  .modal-content,
  .popover,
  .table-responsive,
  .enuw-confirm__dialog,
  .enuw-copilot-assets__panel {
    border: 1px solid CanvasText !important;
    forced-color-adjust: auto;
  }

  .btn:focus-visible,
  .form-control:focus-visible,
  .nav-tabs > li > a:focus-visible,
  .dropdown-menu > li > a:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}