:root {
        --perpetua-bg: #f8f9fa;
        --perpetua-rule: rgba(33, 37, 41, .35);
        --perpetua-title-size: 2rem;
        --perpetua-shell-x: 1.5rem;
        --perpetua-shell-y: 1.25rem;
        --ofo-page-header-h: 52px;
        --header-h: 53px; /* height(52px) + 1px bottom border of the sticky header surface */
        --ofo-table-sticky-top: var(--header-h);
        /* OptioFlo semantic palette — one source of truth so modules
           merged from other programs share one look. */
        --ofo-primary: #212529;
        --ofo-primary-hover: #343a40;
        --ofo-primary-contrast: #ffffff;
        --ofo-border: #dee2e6;
        --ofo-row-stripe: #f8f9fa;
        --ofo-accent: #0d6efd;
        --ofo-checkbox-border: #4b5563;
        --ofo-checkbox-border-hover: #111827;
        --ofo-checkbox-fill: #212529;
        --ofo-checkbox-focus: rgba(33, 37, 41, .18);
      }

      html, body {
        height: 100%;
        overflow: hidden;
        background: var(--perpetua-bg);
      }

      body {
        display: flex;
        flex-direction: column;
      }

      .perpetua-navbar {
        flex: 0 0 auto;
        min-height: 56px;
        position: relative;
        z-index: 2147483100;
      }

      /* No-JS navbar dropdown (app loads bootstrap.min.js without Popper, so
         Bootstrap JS dropdowns cannot open; <details> needs no JS). */
      .perpetua-nav-dd {
        position: relative;
        z-index: 1;
      }
      .perpetua-nav-dd[open] {
        z-index: 2147483150;
      }
      .perpetua-nav-dd > summary {
        cursor: pointer;
        list-style: none;
        user-select: none;
      }
      .perpetua-nav-dd > summary::-webkit-details-marker { display: none; }
      .perpetua-nav-dd > summary::marker { content: ""; }
      .perpetua-nav-dd.active > summary,
      .perpetua-nav-dd[open] > summary { color: #fff; }
      .perpetua-nav-dd-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 2147483150;
        min-width: 200px;
        /* No gap between summary and menu: the menu box sits flush under the
           header so the cursor never crosses dead space (which would drop the
           hover and collapse the dropdown). Spacing is internal padding. */
        margin-top: 0;
        padding: .55rem 0 .35rem;
        background: #2b3035;
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: .375rem;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
      }
      .perpetua-nav-dd-menu a {
        display: block;
        padding: .4rem 1rem;
        color: rgba(255, 255, 255, .75);
        text-decoration: none;
        white-space: nowrap;
      }
      .perpetua-nav-dd-menu a:hover {
        background: rgba(255, 255, 255, .1);
        color: #fff;
      }
      .perpetua-badged-link,
      .perpetua-notify-link {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        position: relative;
      }
      .perpetua-nav-badge,
      .perpetua-notify-badge {
        display: none;
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 .35rem;
        border-radius: 999px;
        background: #dc3545;
        color: #fff;
        font-size: .72rem;
        font-weight: 800;
        line-height: 1.25rem;
        text-align: center;
      }
      .perpetua-nav-badge.has-unread,
      .perpetua-notify-badge.has-unread {
        display: inline-block;
      }
      .perpetua-notify-toasts {
        position: fixed;
        right: 1rem;
        top: 4.25rem;
        z-index: 2147483400 !important;
        display: flex;
        flex-direction: column;
        gap: .6rem;
        width: min(360px, calc(100vw - 2rem));
      }
      .perpetua-notify-toast {
        border: 1px solid rgba(15, 23, 42, .18);
        border-left: 4px solid #0d6efd;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 .65rem 1.5rem rgba(15, 23, 42, .22);
        padding: .75rem .85rem;
        cursor: pointer;
        animation: perpetuaToastIn .16s ease-out;
      }
      .perpetua-notify-toast.is-urgent { border-left-color: #dc3545; }
      .perpetua-notify-toast-title { font-weight: 800; color: #111827; }
      .perpetua-notify-toast-body { margin-top: .2rem; color: #374151; font-size: .9rem; }
      .perpetua-messages {
        position: fixed;
        bottom: 5.4rem;
        right: 1rem;
        z-index: 2147483400 !important;
        display: flex;
        flex-direction: column;
        gap: .55rem;
        width: min(420px, calc(100vw - 2rem));
        pointer-events: none;
      }
      .perpetua-messages .alert {
        margin: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .2);
        pointer-events: auto;
        opacity: 0;
        transform: translateY(.45rem);
        transition: opacity .28s ease, transform .28s ease;
      }
      .perpetua-messages .alert.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
      .perpetua-messages .alert.is-hiding {
        opacity: 0;
        transform: translateY(.45rem);
      }
      .perpetua-message-dismiss {
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 1.1rem;
        line-height: 1;
        padding: .1rem .15rem;
        opacity: .65;
      }
      .perpetua-message-dismiss:hover,
      .perpetua-message-dismiss:focus {
        opacity: 1;
      }
      .perpetua-notification-popup {
        position: fixed;
        z-index: 2147483300 !important;
        display: none;
        right: 1rem;
        bottom: 5.4rem;
        width: min(520px, calc(100vw - 2rem));
        height: min(680px, calc(100vh - 7rem));
      }
      .perpetua-notification-popup.is-open {
        display: block;
      }
      .perpetua-notification-window {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(15, 23, 42, .22);
        box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, .3);
      }
      .perpetua-notification-popup-head {
        height: 2.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .75rem 0 1rem;
        background: #111827;
        color: #fff;
      }
      .perpetua-notification-popup-title {
        font-weight: 800;
        font-size: .92rem;
      }
      .perpetua-notification-popup-close {
        position: absolute;
        top: .55rem;
        right: .55rem;
        z-index: 2;
        border: 0;
        background: #111827;
        color: #fff;
        font-size: 1.25rem;
        line-height: 1;
        width: 2.05rem;
        height: 2.05rem;
        border-radius: 999px;
        box-shadow: 0 .25rem .7rem rgba(15,23,42,.24);
      }
      .perpetua-notification-popup-close:hover {
        background: #0d6efd;
      }
      .perpetua-notification-frame {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        background: #fff;
      }
      .perpetua-notification-launcher {
        position: fixed;
        right: 1.15rem;
        bottom: 1.15rem;
        z-index: 2147483200 !important;
        width: 3.45rem;
        height: 3.45rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: #111827;
        color: #fff;
        box-shadow: 0 .7rem 1.6rem rgba(15, 23, 42, .28);
      }
      .perpetua-notification-launcher:hover {
        background: #0d6efd;
      }
      .perpetua-notification-launcher svg {
        width: 1.55rem;
        height: 1.55rem;
      }
      .perpetua-launcher-badge {
        position: absolute;
        top: -.25rem;
        right: -.2rem;
        display: none;
        min-width: 1.35rem;
        height: 1.35rem;
        padding: 0 .35rem;
        border-radius: 999px;
        background: #dc3545;
        color: #fff;
        font-size: .72rem;
        font-weight: 900;
        line-height: 1.35rem;
        text-align: center;
        border: 2px solid #fff;
      }
      .perpetua-launcher-badge.has-unread {
        display: inline-block;
      }
      .perpetua-global-alert {
        position: fixed;
        left: 50%;
        top: 5.25rem;
        transform: translateX(-50%);
        z-index: 2147483250 !important;
        display: none;
        width: min(520px, calc(100vw - 2rem));
        max-height: min(680px, calc(100vh - 7rem));
        border: 1px solid rgba(15,23,42,.22);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1rem 2.4rem rgba(15,23,42,.28);
        overflow: hidden;
      }
      .perpetua-global-alert.is-open { display: block; }
      .perpetua-global-alert-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .75rem .85rem;
        background: #111827;
        color: #fff;
      }
      .perpetua-global-alert-title { font-weight: 900; }
      .perpetua-global-alert-actions { display: flex; gap: .35rem; }
      .perpetua-global-alert-actions button {
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 6px;
        background: rgba(255,255,255,.08);
        color: #fff;
        min-width: 2rem;
        height: 2rem;
      }
      .perpetua-global-alert-actions button:hover { background: rgba(255,255,255,.18); }
      .perpetua-global-alert-body {
        max-height: calc(min(680px, 100vh - 7rem) - 3.5rem);
        overflow: auto;
        padding: .85rem;
        display: grid;
        gap: .55rem;
      }
      .perpetua-alert-item {
        border: 1px solid #e5e7eb;
        border-left: 4px solid #0d6efd;
        border-radius: 7px;
        padding: .65rem .75rem;
        background: #fff;
      }
      .perpetua-alert-item.is-urgent { border-left-color: #dc3545; }
      .perpetua-alert-type { font-size: .72rem; font-weight: 900; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
      .perpetua-alert-name { margin-top: .1rem; font-weight: 900; color: #111827; }
      .perpetua-alert-meta { margin-top: .12rem; color: #64748b; font-size: .82rem; }
      .perpetua-alert-message { margin-top: .3rem; color: #374151; font-size: .9rem; line-height: 1.35; }
      .perpetua-alert-link { display: inline-block; margin-top: .4rem; font-size: .82rem; font-weight: 800; color: #0d6efd; text-decoration: none; }
      .perpetua-alert-link:hover { text-decoration: underline; }
      .perpetua-alert-actions-row { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.55rem; }
      .perpetua-alert-action { border:1px solid #d8dee7; border-radius:6px; background:#fff; color:#111827; padding:.3rem .55rem; font-size:.78rem; font-weight:800; }
      .perpetua-alert-action:hover { background:#f8fafc; }
      .perpetua-alert-action.is-primary { border-color:#111827; background:#111827; color:#fff; }
      .perpetua-global-alert-minimized {
        position: fixed;
        left: 1rem;
        bottom: 1.15rem;
        z-index: 2147483150 !important;
        display: none;
        border: 0;
        border-radius: 999px;
        background: #111827;
        color: #fff;
        padding: .7rem .9rem;
        font-weight: 900;
        box-shadow: 0 .7rem 1.6rem rgba(15,23,42,.28);
      }
      .perpetua-global-alert-minimized.is-visible { display: inline-flex; }
      /* Modal/popup surfaces must beat sticky page headers and the app navbar.
         Keep toast notifications slightly higher so urgent alerts can still appear. */
      .modal-backdrop,
      .offcanvas-backdrop {
        z-index: 2147483290 !important;
      }
      .modal,
      .offcanvas,
      .order-overlay,
      .order-overlay.is-open {
        z-index: 2147483350 !important;
      }
      body.order-modal-open .select2-container,
      body.order-modal-open .select2-dropdown,
      body.order-modal-open .flatpickr-calendar,
      body.order-modal-open .ui-datepicker {
        z-index: 2147483351 !important;
      }
      @media (max-width: 620px) {
        .perpetua-notification-popup {
          right: .5rem;
          bottom: 4.7rem;
          width: calc(100vw - 1rem);
          height: min(640px, calc(100vh - 5.5rem));
        }
        .perpetua-notification-launcher {
          right: .8rem;
          bottom: .8rem;
        }
        .perpetua-messages {
          bottom: 4.7rem;
          right: .5rem;
          width: calc(100vw - 1rem);
        }
        .perpetua-global-alert {
          top: 4.5rem;
          width: calc(100vw - 1rem);
        }
      }
      @keyframes perpetuaToastIn {
        from { opacity: 0; transform: translateY(-.5rem); }
        to { opacity: 1; transform: translateY(0); }
      }
      .perpetua-nav-dd-menu .dd-sec {
        display: block;
        padding: .45rem 1rem .2rem;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: rgba(255, 255, 255, .4);
        font-weight: 600;
      }
      .perpetua-nav-dd-menu .dd-sec:not(:first-child) {
        margin-top: .25rem;
        padding-top: .5rem;
        border-top: 1px solid rgba(255, 255, 255, .08);
      }
      @media (max-width: 991.98px) {
        .perpetua-navbar .navbar-collapse {
          padding-top: .65rem;
          padding-bottom: .45rem;
        }
        .perpetua-navbar .navbar-nav {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
          gap: .35rem .5rem;
          width: 100%;
          margin-bottom: .75rem !important;
        }
        .perpetua-navbar .navbar-nav .nav-item,
        .perpetua-navbar .perpetua-nav-dd {
          min-width: 0;
          width: 100%;
        }
        .perpetua-navbar .navbar-nav .nav-link,
        .perpetua-navbar .perpetua-nav-dd > summary.nav-link {
          display: flex;
          align-items: center;
          min-height: 2.35rem;
          padding: .45rem .6rem;
          border: 1px solid rgba(255, 255, 255, .12);
          border-radius: .375rem;
          background: rgba(255, 255, 255, .04);
          white-space: nowrap;
        }
        .perpetua-navbar .navbar-nav .nav-link.active,
        .perpetua-navbar .perpetua-nav-dd.active > summary.nav-link,
        .perpetua-navbar .perpetua-nav-dd[open] > summary.nav-link {
          border-color: rgba(255, 255, 255, .28);
          background: rgba(255, 255, 255, .1);
        }
        .perpetua-nav-dd-menu {
          position: static;
          margin-top: 0;
          border: 0;
          box-shadow: none;
          background: rgba(0, 0, 0, .12);
          padding: .35rem .4rem .45rem;
          border-radius: .375rem;
          width: 100%;
        }
        .perpetua-nav-dd-menu a {
          padding: .42rem .5rem;
          white-space: normal;
        }
        .perpetua-nav-dd-menu .dd-sec {
          padding-left: .5rem;
          padding-right: .5rem;
        }
        .perpetua-navbar .navbar-text,
        .perpetua-navbar .btn {
          margin-top: .2rem;
        }
      }

      .perpetua-shell {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        /* Keep the app's left/top breathing room, but let every list page run
           tight to the right and bottom edges so scrollbars do not look inset
           or shift between Orders, Customers, Parts, Powders, and Admin. */
        padding: var(--perpetua-shell-y) 0 0 var(--perpetua-shell-x);
      }

      .perpetua-shell .perpetua-page {
        padding-right: 0 !important;
        border-bottom: 0;
      }
      .perpetua-shell .perpetua-page-body {
        min-height: 0;
        padding-bottom: 0 !important;
      }


      .perpetua-page {
        height: 100%;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0 !important;
        background: #fff;
        border: 1px solid #ced4da;
      }

      .perpetua-page-header,
      .perpetua-page-controls {
        flex: 0 0 auto;
        background: var(--perpetua-bg);
        z-index: 10;
        padding: 0;
        margin: 0;
      }

      .perpetua-page-header .row,
      .perpetua-page-header .row[class*="justify-content"] {
        --bs-gutter-x: 0 !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 0 !important;
        width: 100% !important;
      }

      .perpetua-page-header .row > [class*="col"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      .perpetua-page-header h1,
      .perpetua-page-header h2,
      .perpetua-page > h1,
      .perpetua-page > h2 {
        font-size: var(--perpetua-title-size) !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        margin: 0 .75rem .25rem 0 !important;
      }

      .perpetua-title-rule,
      .perpetua-page-header > hr,
      .perpetua-page-header hr.border-bottom,
      .perpetua-page > hr.border-bottom {
        width: 100% !important;
        margin: .15rem 0 .75rem 0 !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom-width: 2px !important;
        border-bottom-style: solid !important;
        border-bottom-color: #212529 !important;
        opacity: .35 !important;
      }

      .perpetua-page-controls {
        padding-bottom: .75rem;
      }

      .perpetua-page-controls:empty {
        display: none;
      }

      .perpetua-page-controls > * {
        margin-top: 0 !important;
        margin-bottom: .5rem !important;
      }

      .perpetua-page-controls > *:last-child {
        margin-bottom: 0 !important;
      }

      .perpetua-page-controls .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .perpetua-page-controls .nav-tabs {
        background: var(--perpetua-bg);
      }

      .perpetua-page-body {
        flex: 1 1 auto;
        min-height: 0;
        /* Keep the vertical scrollbar present for every list view so the
           available table width does not change between short and long tabs. */
        overflow-y: scroll;
        overflow-x: auto;
        scrollbar-gutter: stable;
        display: flex;
        flex-direction: column;
        padding: 0;
        scroll-padding-top: 0;
      }

      /* Prevent old templates' spacer <br> tags from creating a gap that
         disappears when scrolling, which made table headers appear to jump. */
      .perpetua-page-body > br {
        display: none !important;
      }

      .perpetua-page-body > .container,
      .perpetua-page-body > .container-fluid,
      .perpetua-page > .container,
      .perpetua-page > .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .perpetua-page-body > .row,
      .perpetua-page-body > p,
      .perpetua-page-body > form,
      .perpetua-page-body > .nav,
      .perpetua-page-body > .pagination,
      .perpetua-page-body > .btn,
      .perpetua-page-body > .alert {
        flex: 0 0 auto;
      }



      /* Admin pages use one locked shell: Admin title/tabs stay fixed and only the page body scrolls. */
      .perpetua-page > .admin-subnav-shell {
        flex: 0 0 auto;
      }

      .perpetua-page.admin-page-shell > .perpetua-page-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: scroll;
        overflow-x: auto;
        scrollbar-gutter: stable;
      }

      .perpetua-page.admin-page-shell > .perpetua-page-body > form,
      .perpetua-page.admin-page-shell > .perpetua-page-body > .tc-content {
        flex: 0 0 auto;
      }

            /* Shared table-section model:
         - the page still scrolls as one full screen
         - every table has its own paint/clipping boundary
         - sticky table headers stay pinned only while their table section is in view
         - tbody rows cannot visually bleed above the table/header/buttons */
      .table-section {
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        background: #fff;
        overflow: clip;
        overflow-clip-margin: 0;
        isolation: isolate;
        margin: 0 0 1rem 0;
      }

      @supports not (overflow: clip) {
        .table-section { overflow: hidden; }
      }

      .table-wrapper {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        overflow: visible !important;
        display: block;
        border: 1px solid #dee2e6;
        border-radius: 0;
        background: #fff;
        margin-top: 0 !important;
      }

      .table-wrapper table { margin-bottom: 0; }


      /* One-frame table/list pages: the outer page/card owns the left and right
         border. Inner title, filter, and table sections only draw horizontal
         separators so the side edge stays continuous while scrolling. */
      .perpetua-page-header,
      .perpetua-page-controls,
      .page-sticky-header {
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
      }

      .page-sticky-header {
        border-bottom: 1px solid #dee2e6 !important;
        box-shadow: none !important;
      }

      .perpetua-page .table-wrapper,
      .perpetua-page .table-section .table-wrapper,
      .perpetua-page .table-responsive {
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
      }

      .perpetua-page .table-section {
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
      }

      .list-table-wrapper {
        margin-top: 0;
      }

      .table-wrapper thead th {
        position: static;
        top: auto;
        z-index: auto;
        background: #fff;
        box-shadow: inset 0 -1px 0 #dee2e6;
      }

      /* Single page-scroll model: tables do not create nested scroll windows. */
      .perpetua-page-body .table-responsive,
      .perpetua-page-body .overflow-auto,
      .perpetua-page-body .overflow-scroll {
        overflow: visible !important;
      }

      .tab-content {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
        display: block;
      }

      .tab-pane.active,
      .tab-pane.active.show {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
        display: block;
      }

      .tab-pane:not(.active) {
        display: none !important;
      }

      .tab-pane > .table-wrapper,
      .tab-pane > .card,
      .tab-pane > .list-group {
        flex: 0 0 auto;
      }

      .tab-pane > .table-wrapper:last-child,
      .perpetua-page-body > .table-wrapper:last-child {
        flex: 0 0 auto;
      }

      /* Cross-page UI spacing pass: keeps Orders, Customers, Parts, Powders, and Admin pages visually consistent. */
      .perpetua-page .card,
      .perpetua-page .list-group,
      .perpetua-page .table-wrapper {
        box-shadow: 0 .12rem .45rem rgba(15, 23, 42, .04);
      }

      .perpetua-page .form-control,
      .perpetua-page .form-select,
      .perpetua-page .btn {
        line-height: 1.35;
      }

      /* App-wide editable field affordance: any selectable form control should
         quietly show its border on hover and use the same blue focus treatment
         the order/customer edit fields already use. */
      .perpetua-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([disabled]):not([readonly]),
      .perpetua-page select:not([disabled]):not([readonly]),
      .perpetua-page textarea:not([disabled]):not([readonly]),
      .perpetua-page .form-control:not([disabled]):not([readonly]),
      .perpetua-page .form-select:not([disabled]):not([readonly]) {
        transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
      }

      .perpetua-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([disabled]):not([readonly]):hover,
      .perpetua-page select:not([disabled]):not([readonly]):hover,
      .perpetua-page textarea:not([disabled]):not([readonly]):hover,
      .perpetua-page .form-control:not([disabled]):not([readonly]):hover,
      .perpetua-page .form-select:not([disabled]):not([readonly]):hover {
        border-color: #9ec5fe !important;
        background-color: #fff !important;
      }

      .perpetua-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([disabled]):not([readonly]):focus,
      .perpetua-page select:not([disabled]):not([readonly]):focus,
      .perpetua-page textarea:not([disabled]):not([readonly]):focus,
      .perpetua-page .form-control:not([disabled]):not([readonly]):focus,
      .perpetua-page .form-select:not([disabled]):not([readonly]):focus {
        border-color: #86b7fe !important;
        background-color: #fff !important;
        box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .13) !important;
        outline: 0 !important;
      }

      /* App-wide checkbox visibility. Keep one darker shade for unchecked
         borders and checked fills so checkboxes are readable on every page. */
      #content input[type="checkbox"] {
        accent-color: var(--ofo-checkbox-fill) !important;
      }

      #content .form-check-input[type="checkbox"] {
        border-color: var(--ofo-checkbox-border) !important;
        box-shadow: none;
      }

      #content .form-check-input[type="checkbox"]:not([role="switch"]) {
        width: 1rem;
        height: 1rem;
        border-width: 1.5px !important;
        background-color: #fff !important;
      }

      #content input[type="checkbox"]:not(.form-check-input) {
        appearance: none;
        -webkit-appearance: none;
        width: 1rem;
        height: 1rem;
        border: 1.5px solid var(--ofo-checkbox-border) !important;
        border-radius: .22rem;
        background-color: #fff;
        background-position: center;
        background-repeat: no-repeat;
        background-size: .75rem .75rem;
        cursor: pointer;
        vertical-align: -.15em;
      }

      #content .form-check-input[type="checkbox"]:checked,
      #content input[type="checkbox"]:not(.form-check-input):checked {
        background-color: var(--ofo-checkbox-fill) !important;
        border-color: var(--ofo-checkbox-fill) !important;
      }

      #content input[type="checkbox"]:not(.form-check-input):checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3.5 8.5l3 3 6-7'/%3e%3c/svg%3e");
      }

      #content .form-check-input[type="checkbox"]:hover,
      #content input[type="checkbox"]:not(.form-check-input):hover {
        border-color: var(--ofo-checkbox-border-hover) !important;
      }

      #content .form-check-input[type="checkbox"]:focus,
      #content input[type="checkbox"]:not(.form-check-input):focus {
        border-color: var(--ofo-checkbox-fill) !important;
        box-shadow: 0 0 0 .18rem var(--ofo-checkbox-focus) !important;
        outline: 0 !important;
      }

      #content input[type="checkbox"]:disabled {
        cursor: not-allowed;
        opacity: .65;
      }

      .perpetua-page .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.05rem;
      }

      .perpetua-page .table > :not(caption) > * > * {
        padding-top: .55rem;
        padding-bottom: .55rem;
        vertical-align: middle;
      }

      .perpetua-page .table thead th {
        font-size: .92rem;
        font-weight: 700;
        white-space: nowrap;
        text-transform: capitalize;
        letter-spacing: .03em;
      }

      .perpetua-page .row {
        --bs-gutter-x: 1rem;
      }



      /* Shared list-table foundation: consistent, fast-scanning list pages without page-level side scroll. */
      .perpetua-list-table,
      .perpetua-page .table.perpetua-list-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
      }

      .perpetua-list-table th,
      .perpetua-list-table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .perpetua-list-table tbody tr {
        cursor: pointer;
      }

      .perpetua-list-table tbody td {
        height: 2.65rem;
      }

      .perpetua-list-table .search-hidden-cell {
        display: none !important;
      }

      .perpetua-list-table .perpetua-search-empty-row td {
        white-space: normal;
        text-align: center;
        cursor: default;
      }

      /* List-page foundation: fixed controls + flexible table area, with sticky headers preserved. */
      .list-page {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        width: 100%;
        max-width: 100%;
      }

      .list-top {
        flex: 0 0 auto;
      }

      .list-table-wrapper .perpetua-list-table {
        margin-bottom: 0;
      }

      .perpetua-list-table,
      .perpetua-page .table.perpetua-list-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
      }

      .perpetua-list-table th,
      .perpetua-list-table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        padding: 6px 8px;
      }

      .perpetua-list-table thead {
        position: relative;
        z-index: 31;
        background: #fff;
      }

      .perpetua-list-table thead th {
        position: sticky;
        top: calc(var(--header-h, 0px) + .25rem);
        background: #fff;
        background-clip: padding-box;
        box-shadow: 0 -14px 0 14px #fff, inset 0 -1px 0 #dee2e6, 0 1px 0 #dee2e6;
      }

      .perpetua-list-table tbody td {
        height: 2.45rem;
      }


      /* Shared list column sizing so the same pages do not feel like different apps. */
      .customers-list-table th:nth-child(1), .customers-list-table td:nth-child(1) { width: 25%; }
      .customers-list-table th:nth-child(2), .customers-list-table td:nth-child(2) { width: 25%; }
      .customers-list-table th:nth-child(3), .customers-list-table td:nth-child(3) { width: 25%; }
      .customers-list-table th:nth-child(4), .customers-list-table td:nth-child(4) { width: 25%; }

      .parts-list-table th:nth-child(1), .parts-list-table td:nth-child(1) { width: 25%; }
      .parts-list-table th:nth-child(2), .parts-list-table td:nth-child(2) { width: 25%; }
      .parts-list-table th:nth-child(3), .parts-list-table td:nth-child(3) { width: 25%; }
      .parts-list-table th:nth-child(4), .parts-list-table td:nth-child(4) { width: 25%; }

      .powders-list-table { min-width: 1050px; }
      .powders-list-table th:nth-child(1), .powders-list-table td:nth-child(1) { width: 12%; }
      .powders-list-table th:nth-child(2), .powders-list-table td:nth-child(2) { width: 12%; }
      .powders-list-table th:nth-child(3), .powders-list-table td:nth-child(3) { width: 14%; }
      .powders-list-table th:nth-child(4), .powders-list-table td:nth-child(4) { width: 22%; }
      .powders-list-table th:nth-child(5), .powders-list-table td:nth-child(5) { width: 11%; }
      .powders-list-table th:nth-child(6), .powders-list-table td:nth-child(6) { width: 9%; }
      .powders-list-table th:nth-child(7), .powders-list-table td:nth-child(7) { width: 8%; }
      .powders-list-table th:nth-child(8), .powders-list-table td:nth-child(8) { width: 12%; }

      .archived-list-table th:last-child, .archived-list-table td:last-child { width: 110px; }

      .perpetua-page-body,
      .perpetua-page-controls,
      .perpetua-page-header,
      .tab-content,
      .tab-pane,
      .table-wrapper {
        max-width: 100%;
      }

      .perpetua-page .row {
        max-width: 100%;
      }

            hr.border-bottom { opacity: .35; }

    /* ── Shared locked / edit page state ── */
    /* Pages opt into this by adding the `is-page-locked` class to their form. */
    /* PerpetuaLockedEdit toggles it via the Edit / Save / Cancel buttons. */
    .is-page-locked input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]):not([type=image]),
    .is-page-locked select,
    .is-page-locked textarea {
        pointer-events: none;
        background-color: transparent !important;
        border-color: transparent !important;
        cursor: default;
        color: #212529;
        box-shadow: none !important;
    }
    .is-page-locked input[type=checkbox],
    .is-page-locked input[type=radio],
    .is-page-locked .form-check-input {
        pointer-events: none;
        opacity: .55;
        cursor: default;
    }
    .is-page-locked .select2-selection {
        pointer-events: none;
        background-color: transparent !important;
        border-color: transparent !important;
    }
    /* Locked-edit action buttons sit in page-sticky-actions; no extra layout. */

    /* ── Shared sticky page header ── */
    .page-sticky-header {
        position: sticky;
        top: 0;
        z-index: 120;
        flex: 0 0 var(--ofo-page-header-h);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .55rem .75rem;
        /* Explicit height so --header-h in :root always matches and the JS
           measurement never needs to correct a wrong initial value. */
        height: var(--ofo-page-header-h);
        min-height: var(--ofo-page-header-h);
        box-sizing: border-box;
        margin-bottom: 0;
        border: 1px solid #ced4da;
        border-radius: 0;
        background: #fff;
        box-shadow: 0 .35rem 1rem rgba(15,23,42,.08);
    }
    .page-sticky-title {
        font-weight: 800;
        font-size: 1.25rem;
        color: #212529;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .page-sticky-sub {
        font-size: .85rem;
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .page-sticky-left {
        display: flex;
        align-items: center;
        gap: .55rem;
        min-width: 0;
        min-height: 0;
    }
    .page-sticky-actions {
        display: flex;
        align-items: center;
        gap: .45rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        flex: 0 0 auto;
        min-height: 0;
    }
    .page-sticky-actions form {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin: 0 !important;
        min-height: 0;
    }
    .page-sticky-actions .form-control,
    .page-sticky-actions .form-select,
    .page-sticky-actions .btn {
        flex: 0 0 auto;
    }



      /* Pre-wrapped list pages paint in their final position before JavaScript runs.
         This removes the small one-second "fit" nudge seen on Parts and keeps
         Customers/Parts/Powders/Archived pages aligned with Orders. */
      .perpetua-page > .page-sticky-header + .table-section,
      .perpetua-page-body > .page-sticky-header + .table-section {
        margin-top: 0 !important;
      }

      .page-sticky-actions input[data-fast-search],
      .page-sticky-actions input[type="search"],
      .page-sticky-actions input[type="text"] {
        min-width: 0;
      }

      /* Shared professional list-page header: title/action area always has a
         visible separator before filters or tables, matching the Orders screen. */
      .page-sticky-header {
        border-bottom: 1px solid #dee2e6 !important;
        box-shadow: inset 0 -1px 0 #dee2e6 !important;
      }
      .page-sticky-header + .table-section,
      .page-sticky-header + .table-wrapper,
      .page-sticky-header + table {
        border-top: 0 !important;
      }
      .page-sticky-actions .form-control[type="text"],
      .page-sticky-actions .form-control[type="search"] {
        width: clamp(260px, 28vw, 440px) !important;
      }
      .page-sticky-actions .btn {
        white-space: nowrap;
      }

      .ofo-pill-nav,
      .settings-pills,
      .production-pills,
      .reports-pills,
      .finance-pills,
      .task-filter-bar {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
      }
      .ofo-pill,
      .settings-pill,
      .production-pill,
      .reports-pill,
      .finance-pill,
      .task-filter,
      .order-view-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.15rem;
        padding: .38rem .85rem;
        border: 1px solid #d3d8de;
        border-radius: 999px;
        background: #fff;
        color: #343a40;
        font-size: .875rem;
        font-weight: 650;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
      }
      .ofo-pill:hover,
      .settings-pill:hover,
      .production-pill:hover,
      .reports-pill:hover,
      .finance-pill:hover,
      .task-filter:hover,
      .order-view-pill:hover {
        border-color: #0d6efd;
        color: #0d6efd;
        text-decoration: none;
      }
      .ofo-pill.is-active,
      .settings-pill.is-active,
      .production-pill.is-active,
      .reports-pill.is-active,
      .finance-pill.is-active,
      .task-filter.is-active,
      .order-view-pill.is-active {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
      }
    /* ── Global perpetua-form: fields transparent until focused, matching order detail feel ── */
    .perpetua-form .form-control,
    .perpetua-form .form-select {
        border: 1px solid transparent;
        background-color: transparent;
        box-shadow: none;
        border-radius: .35rem;
        font-size: .9rem;
        transition: border-color .12s, background-color .12s, box-shadow .12s;
    }
    .perpetua-form .form-control:hover,
    .perpetua-form .form-select:hover {
        border-color: #ced4da;
        background-color: #fff;
    }
    .perpetua-form .form-control:focus,
    .perpetua-form .form-select:focus {
        border-color: #86b7fe;
        background-color: #fff;
        box-shadow: 0 0 0 .15rem rgba(13,110,253,.1);
        outline: 0;
    }
    /* Labels: consistent small-caps uppercase style matching orders */
    .perpetua-form label.form-label,
    .perpetua-form .form-label {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #6c757d;
        margin-bottom: .2rem;
    }
    /* Tighten field rows */
    .perpetua-form .mb-3 {
        margin-bottom: .75rem !important;
    }
    /* Error state stays visible */
    .perpetua-form .form-control.is-invalid,
    .perpetua-form .form-select.is-invalid {
        border-color: #dc3545 !important;
        background-color: #fff !important;
    }
    /* Invalid feedback visible */
    .perpetua-form .invalid-feedback {
        font-size: .78rem;
    }

    /* scroll-to-top button */
    #scroll-top-btn {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 999;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        border: 1px solid #ced4da;
        background: #fff;
        box-shadow: 0 .25rem .75rem rgba(0,0,0,.12);
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: #495057;
        transition: opacity .2s;
    }
    #scroll-top-btn.visible { display: flex; }


      /* Sticky table bleed-through fix (global)
         Chrome can paint scrolled tbody text/borders through sticky table headers,
         especially with collapsed table borders. Keep headers opaque, above tbody rows,
         and give the page sticky header an opaque cover below it so rows cannot show
         between the title/actions bar and the table header while scrolling. */

      .table-section::before {
        content: "";
        position: sticky;
        top: 0;
        display: block;
        height: 0;
        background: #fff;
        z-index: 29;
        pointer-events: none;
      }

      .table-section .table-wrapper {
        position: relative;
        z-index: 1;
      }

      .perpetua-managed-table,
      .finance-content-body table,
      .tc-content table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
      }

      .perpetua-managed-table > thead,
      .finance-content-body table > thead,
      .tc-content table > thead {
        position: relative;
        z-index: 30;
        background: #fff;
      }

      .perpetua-managed-table > thead > tr > th,
      .finance-content-body table > thead > tr > th,
      .tc-content table > thead > tr > th {
        position: sticky;
        top: var(--header-h, 0px);
        z-index: 31 !important;
        background-color: #fff !important;
        background-clip: padding-box;
        box-shadow: 0 -14px 0 14px #fff, inset 0 -1px 0 #dee2e6, 0 1px 0 #dee2e6;
      }

      .perpetua-managed-table > tbody,
      .finance-content-body table > tbody,
      .tc-content table > tbody {
        position: relative;
        z-index: 1;
      }

      .page-sticky-header {
        z-index: 120 !important;
        background-color: #fff !important;
        isolation: isolate;
      }

      /* Keep every sticky page header visually locked to the shell while the
         body scrolls. This prevents module pages from appearing to jump up a
         few pixels as rows/cards pass under the sticky edge. */
      .page-sticky-header::after {
        content: "";
        position: absolute;
        left: -1px;
        right: -1px;
        bottom: -10px;
        height: 10px;
        background: #fff;
        border-left: 1px solid #ced4da;
        border-right: 1px solid #ced4da;
        pointer-events: none;
        z-index: 1;
      }
      .page-sticky-header::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: #dee2e6;
        pointer-events: none;
        z-index: 2;
      }

      /* ============================================================
         OptioFlo cohesion layer (2026-05-18). Visual only. Modules
         pulled in from other programs (notably Finance) used Bootstrap
         blue primaries and bare tables, so they read as separate apps.
         This maps them onto the dark house style via Bootstrap 5.3
         component tokens (no !important, no specificity battles).
         Revert: delete this block + the --ofo-* tokens in :root.
         ============================================================ */
      .btn-primary {
        --bs-btn-bg: var(--ofo-primary);
        --bs-btn-border-color: var(--ofo-primary);
        --bs-btn-hover-bg: var(--ofo-primary-hover);
        --bs-btn-hover-border-color: var(--ofo-primary-hover);
        --bs-btn-active-bg: var(--ofo-primary-hover);
        --bs-btn-active-border-color: var(--ofo-primary-hover);
        --bs-btn-disabled-bg: var(--ofo-primary);
        --bs-btn-disabled-border-color: var(--ofo-primary);
      }
      .btn-outline-primary {
        --bs-btn-color: var(--ofo-primary);
        --bs-btn-border-color: var(--ofo-primary);
        --bs-btn-hover-bg: var(--ofo-primary);
        --bs-btn-hover-border-color: var(--ofo-primary);
        --bs-btn-active-bg: var(--ofo-primary);
        --bs-btn-active-border-color: var(--ofo-primary);
      }

      /* Finance tables: match .perpetua-list-table without reclassing
         dozens of templates (hairline header, zebra, even padding). */
      .finance-content-body table.table > thead > tr > th {
        background: #fff;
        border-bottom: 1px solid var(--ofo-border);
        box-shadow: inset 0 -1px 0 var(--ofo-border);
        font-weight: 600;
      }
      .finance-content-body table.table > tbody > tr:nth-of-type(2n) > * {
        background-color: var(--ofo-row-stripe);
      }
      .finance-content-body table.table > :not(caption) > * > * {
        padding: .5rem .6rem;
        vertical-align: middle;
        border-color: var(--ofo-border);
      }
      .finance-content-body table.table.table-hover > tbody > tr:hover > * {
        background-color: rgba(33, 37, 41, .055);
      }

      /* ============================================================
         Responsive layer (added 2026-05-26). Desktop UI is the design
         target; this block is only compensation for tablet (max 1024px)
         and phone (max 480px) widths where the fixed-viewport / fixed-
         column-width desktop layout otherwise cuts off content.
         Revert: delete this block down to the closing style tag.
         ============================================================ */

      /* Tablet and smaller (iPad portrait/landscape, ~768–1024px) */
      @media (hover: none) and (pointer: coarse) and (max-width: 1024px) {
        :root {
          --perpetua-shell-x: .5rem;
          --perpetua-shell-y: .5rem;
          --perpetua-title-size: 1.5rem;
        }
        .perpetua-shell { padding: var(--perpetua-shell-y) .25rem 0 var(--perpetua-shell-x); }
        .perpetua-page { border-left-width: 0; border-right-width: 0; }
        /* List/detail page bodies should still scroll internally, but allow
           horizontal scroll inside the page body so wide tables (powders,
           finance, reports) are pannable instead of clipped off-screen. */
        .perpetua-page-body { overflow-x: auto; }
        /* Sticky header: drop the fixed 52px height + nowrap so title +
           actions can wrap to two rows. The JS sets --header-h from the
           measured height, so sticky thead still tracks correctly. */
        .page-sticky-header {
          height: auto;
          flex-basis: auto;
          min-height: 52px;
          flex-wrap: wrap;
          row-gap: .35rem;
        }
        .page-sticky-left, .page-sticky-actions {
          min-width: 0;
          flex: 1 1 auto;
          flex-wrap: wrap;
        }
        .page-sticky-actions { justify-content: flex-end; }
        .page-sticky-title { font-size: 1.05rem; white-space: normal; }
        .page-sticky-sub { white-space: normal; }
        /* Let the sticky search input shrink with the screen */
        .page-sticky-actions .form-control[type="text"],
        .page-sticky-actions .form-control[type="search"] {
          width: clamp(140px, 40vw, 320px) !important;
        }
        /* Page header h1/h2 shrink + can wrap */
        .perpetua-page-header h1,
        .perpetua-page-header h2,
        .perpetua-page > h1,
        .perpetua-page > h2 {
          font-size: var(--perpetua-title-size) !important;
          white-space: normal !important;
        }
        /* List tables with table-layout:fixed squish columns into ellipses.
           Switch to auto layout + horizontal scroll inside the wrapper so
           every cell stays readable. */
        .perpetua-list-table,
        .perpetua-page .table.perpetua-list-table {
          table-layout: auto;
          min-width: 720px;
        }
        .table-wrapper,
        .perpetua-page .table-responsive {
          overflow-x: auto !important;
        }
        /* Header column nowrap is fine; cell content can wrap on narrow widths. */
        .perpetua-list-table td { white-space: normal; }
        /* Beat per-page overrides like #myTabContent .table-wrapper. The main
           element has id="content", so chaining via that ID matches the ID
           specificity of those rules and wins by source order. */
        #content .perpetua-page .table-wrapper,
        #content .perpetua-page .table-responsive {
          overflow-x: auto !important;
          overflow-y: visible !important;
          -webkit-overflow-scrolling: touch;
        }
        #content .perpetua-page .table-section {
          overflow-x: visible !important;
        }
        /* Detail-page Bootstrap rows stack instead of trying col-md side-by-side
           at sub-md widths. Bootstrap already does this <768px; widen the
           threshold so 768–1024px tablet landscape doesn't squeeze 2 cols too. */
        .perpetua-page .row > [class*="col-md-"] {
          /* No-op on widths Bootstrap already handles; tightened gutters. */
        }
        .perpetua-page .row { --bs-gutter-x: .75rem; }
      }

      /* Phone (≤480px). Drop the fixed-viewport scroll model entirely —
         on a phone the user expects natural page scroll, not a
         fixed-height inner pane. */
      @media (hover: none) and (pointer: coarse) and (max-width: 480px) {
        :root {
          --perpetua-shell-x: .35rem;
          --perpetua-shell-y: .35rem;
          --perpetua-title-size: 1.25rem;
        }
        html, body {
          height: auto;
          min-height: 100%;
          overflow: auto;
        }
        body { display: block; }
        .perpetua-shell {
          flex: 0 0 auto;
          overflow: visible;
          padding: var(--perpetua-shell-y) var(--perpetua-shell-x) 1rem;
        }
        .perpetua-page {
          height: auto;
          min-height: 0;
          overflow: visible;
        }
        .perpetua-page-body {
          overflow-y: visible !important;
          overflow-x: auto !important;
          height: auto;
        }
        /* Sticky header still useful but not pinned to the viewport (since the
           document scrolls now, sticky against the page works fine). */
        .page-sticky-header {
          padding: .5rem .55rem;
          gap: .4rem;
        }
        .page-sticky-title {
          font-size: .95rem;
          letter-spacing: .04em;
        }
        .page-sticky-actions {
          gap: .3rem;
          width: 100%;
          justify-content: flex-start;
        }
        .page-sticky-actions .form-control[type="text"],
        .page-sticky-actions .form-control[type="search"] {
          width: 100% !important;
          flex: 1 1 100%;
        }
        .page-sticky-actions .btn { padding: .3rem .55rem; }
        /* Tighter list tables; still horizontally scrollable in the wrapper. */
        .perpetua-list-table,
        .perpetua-page .table.perpetua-list-table { min-width: 560px; }
        .perpetua-list-table tbody td { height: auto; padding: .45rem .5rem; }
        /* Forms: every Bootstrap col stacks full-width on phone (covers older
           col-sm-* / col-* templates that don't already collapse). */
        .perpetua-page .row > [class*="col-"] {
          flex: 0 0 100%;
          max-width: 100%;
        }
        /* Tab pills/tabs can overflow horizontally instead of stacking ugly. */
        .perpetua-page .nav-tabs,
        .perpetua-page .nav-pills {
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }
        .perpetua-page .nav-tabs .nav-link,
        .perpetua-page .nav-pills .nav-link {
          white-space: nowrap;
        }
        /* Bigger touch targets in the navbar dropdown. */
        .perpetua-nav-dd-menu a { padding: .65rem 1rem; }
        /* Messages area: keep tap target sane. */
        .perpetua-messages .alert {
          flex-wrap: wrap;
          align-items: flex-start !important;
        }
        /* Scroll-to-top: smaller on phone so it doesn't cover content. */
        #scroll-top-btn {
          width: 2rem;
          height: 2rem;
          bottom: 1rem;
          right: 1rem;
        }
        /* Powders + any explicit min-width table: keep their min-width so they
           pan horizontally; .table-wrapper provides the overflow. */
        #content .perpetua-page .table-wrapper,
        #content .perpetua-page .table-responsive {
          overflow-x: auto !important;
          overflow-y: visible !important;
          -webkit-overflow-scrolling: touch;
        }
        #content .perpetua-page .table-section {
          overflow-x: visible !important;
        }
        /* Bootstrap helper classes for nested scroll containers. The desktop
           model disables these (single-scrollbar page); on phone, re-enable so
           wide tables and pre/code blocks can pan horizontally. */
        #content .perpetua-page .overflow-auto,
        #content .perpetua-page .overflow-scroll {
          overflow-x: auto !important;
          -webkit-overflow-scrolling: touch;
        }
        /* Tables inside Bootstrap's .table-responsive don't reliably trigger
           horizontal scroll on the wrapper (Chromium quirk with display:table
           inside overflow:auto blocks). Force fixed layout + width:100% so
           columns wrap to fit the wrapper instead of overflowing invisibly.
           Descendant (not >) because some templates nest .table-wrapper between
           .table-responsive and the table. */
        #content .perpetua-page .table-responsive table {
          table-layout: fixed;
          width: 100%;
        }
        #content .perpetua-page .table-responsive table th,
        #content .perpetua-page .table-responsive table td {
          white-space: normal;
          word-break: break-word;
        }
        /* Disable sticky thead on phone. The document is the scrolling
           ancestor now, but Bootstrap's .table-responsive (and our .perpetua-page-body
           with overflow-x:auto) is a scroll container — per CSS spec, overflow-x:auto
           promotes overflow-y to auto. That makes the sticky thead stick relative
           to the table wrapper instead of the viewport, leaving it floating
           offset by var(--header-h) in the middle of the table. Natural document
           scroll on a phone doesn't need sticky headers — let them scroll. */
        .perpetua-page thead th,
        .perpetua-page-body thead th,
        .table-wrapper thead th,
        .table-responsive thead th,
        .perpetua-list-table thead th {
          position: static !important;
          top: auto !important;
          box-shadow: inset 0 -1px 0 #dee2e6 !important;
        }
      }

      /* Shared app-table contract. Normal Django app tables get wrapped by
         wrapTables() below and receive this behavior:
         - desktop: headers stick under the current page header, then release
           when their own table ends;
         - tablet/phone/short landscape: headers scroll normally and the
           wrapper handles horizontal panning.
         Print/PDF/invoice-style tables are not marked by wrapTables(). */
      @media (min-width: 1101px) and (min-height: 561px),
             (hover: hover) and (pointer: fine) and (min-height: 561px) {
        #content .perpetua-managed-table-wrapper,
        #content .finance-content-body .table-responsive,
        #content .tc-content .table-responsive,
        #content .tc-content .table-wrapper,
        #content .tc-content .ts-scroll {
          position: relative !important;
          overflow-x: visible !important;
          overflow-y: visible !important;
          max-width: 100% !important;
        }

        #content .perpetua-managed-table,
        #content .finance-content-body table.table,
        #content .tc-content table {
          border-collapse: separate !important;
          border-spacing: 0 !important;
        }

        #content .perpetua-managed-table > thead,
        #content .perpetua-list-table > thead,
        #content .finance-content-body table.table > thead,
        #content .tc-content table > thead {
          position: relative !important;
          z-index: 30 !important;
          background: #fff !important;
        }

        #content .perpetua-managed-table > thead > tr > th,
        #content .perpetua-list-table > thead > tr > th,
        #content .finance-content-body table.table > thead > tr > th,
        #content .tc-content table > thead > tr > th {
          position: sticky !important;
          top: var(--ofo-table-sticky-top, calc(var(--header-h, 0px) + .25rem)) !important;
          z-index: 31 !important;
          background-color: #fff !important;
          background-clip: padding-box !important;
          box-shadow: 0 -14px 0 14px #fff, inset 0 -1px 0 #dee2e6, 0 1px 0 #dee2e6 !important;
        }
      }

      @media (min-width: 481px) and (max-width: 1100px), (min-width: 481px) and (max-height: 560px) {
        #content .perpetua-page > .perpetua-page-body {
          min-height: 0 !important;
          overflow-y: scroll !important;
          overflow-x: auto !important;
          scrollbar-gutter: stable;
        }
      }

      @media (hover: none) and (pointer: coarse) and (max-width: 1100px),
             (hover: none) and (pointer: coarse) and (max-height: 560px) {
        #content .perpetua-managed-table-wrapper,
        #content .finance-content-body .table-responsive,
        #content .tc-content .table-responsive,
        #content .tc-content .table-wrapper,
        #content .tc-content .ts-scroll {
          overflow-x: auto !important;
          overflow-y: visible !important;
          -webkit-overflow-scrolling: touch;
        }

        #content .perpetua-managed-table > thead,
        #content .perpetua-managed-table > thead > tr > th,
        #content .finance-content-body table.table > thead,
        #content .finance-content-body table.table > thead > tr > th,
        #content .tc-content table > thead,
        #content .tc-content table > thead > tr > th {
          position: static !important;
          top: auto !important;
          z-index: auto !important;
        }
      }

      /* Shared managed-table row contract. Applies to ordinary app data tables
         only; custom order item rows, payroll grids, print/invoice tables, and
         form-heavy cells keep their own sizing. */
      :root {
        --ofo-table-row-height: 3.65rem;
        --ofo-table-cell-line-height: 1.18;
      }

      #content .perpetua-managed-table:not(.order-items-table) > tbody > tr,
      #content .finance-content-body table.table > tbody > tr,
      #content .tc-content table:not(.pr-table) > tbody > tr {
        height: var(--ofo-table-row-height);
      }

      #content .perpetua-managed-table:not(.order-items-table) > tbody > tr > td,
      #content .finance-content-body table.table > tbody > tr > td,
      #content .tc-content table:not(.pr-table) > tbody > tr > td {
        max-height: var(--ofo-table-row-height);
        line-height: var(--ofo-table-cell-line-height);
        vertical-align: middle !important;
        overflow: hidden;
      }

      #content .perpetua-managed-table:not(.order-items-table) .perpetua-cell-text,
      #content .finance-content-body table.table .perpetua-cell-text,
      #content .tc-content table:not(.pr-table) .perpetua-cell-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: calc(2em * var(--ofo-table-cell-line-height));
        line-height: var(--ofo-table-cell-line-height);
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #content .perpetua-managed-table:not(.order-items-table) th:has(input[type="checkbox"]),
      #content .perpetua-managed-table:not(.order-items-table) td:has(input[type="checkbox"]),
      #content .finance-content-body table.table th:has(input[type="checkbox"]),
      #content .finance-content-body table.table td:has(input[type="checkbox"]),
      #content .tc-content table:not(.pr-table) th:has(input[type="checkbox"]),
      #content .tc-content table:not(.pr-table) td:has(input[type="checkbox"]) {
        text-align: center !important;
        vertical-align: middle !important;
      }

      #content .perpetua-managed-table:not(.order-items-table) th input[type="checkbox"],
      #content .perpetua-managed-table:not(.order-items-table) td input[type="checkbox"],
      #content .finance-content-body table.table th input[type="checkbox"],
      #content .finance-content-body table.table td input[type="checkbox"],
      #content .tc-content table:not(.pr-table) th input[type="checkbox"],
      #content .tc-content table:not(.pr-table) td input[type="checkbox"] {
        display: block;
        width: 1rem;
        height: 1rem;
        margin-left: auto !important;
        margin-right: auto !important;
      }