/* ── Theme variables ──────────────────────────────────── */
     :root {
       --th-bg-body: #f3f4f6;
       --th-bg-surface: #ffffff;
       --th-bg-raised: #f8fafc;
       --th-bg-sunken: #f1f5f9;
       --th-bg-input: #ffffff;
       --th-border: #e2e8f0;
       --th-border-med: #d1d5db;
       --th-border-form: #dde5ef;
       --th-text: #0f172a;
       --th-text-2: #1e293b;
       --th-text-3: #374151;
       --th-text-muted: #64748b;
       --th-text-subtle: #94a3b8;
       --th-text-inv: #ffffff;
       --th-accent: #2563eb;
       --th-accent-bg: #eff6ff;
       --th-success: #16a34a;
       --th-success-bg: #dcfce7;
       --th-error: #dc2626;
       --th-error-bg: #fee2e2;
       --th-warning: #d97706;
       --th-warning-bg: #fff7ed;
       --th-shadow: rgba(15, 23, 42, .06);
       --th-shadow-md: rgba(0, 0, 0, .10);
       --th-overlay: rgba(255, 255, 255, .92);
     }

     /* ── End theme variables ──────────────────────────────── */

     .container {
       max-width: 70%;
       margin-left: auto;
       margin-right: auto;
       padding-left: 1rem;
       padding-right: 1rem;
     }

     .container-tickets {
       max-width: 75%;
       margin-left: auto;
       margin-right: auto;
       padding-left: 1rem;
       padding-right: 1rem;
     }

     * {
       font-family: 'Roboto', sans-serif;
       font-optical-sizing: auto;
     }

     h2 {
       text-align: center;
       font-weight: 450;
     }

     h5 {
       text-align: center;
       font-size: 14pt;
       margin-bottom: 2px;
     }

     th {
       font-size: 14pt;
       text-align: center;
     }

     td {
       font-size: 14pt;
     }

     a {
       padding: 0.5rem 0.5rem;
     }

     option {
       font-size: 11pt;
     }

     .form-wrapper {
       width: 50%;
       margin-left: auto;
       margin-right: auto;
     }

     .form-block {
       background: white;
       padding: 0.75rem;
       padding-bottom: 1rem;
       border: none;
       border-radius: 8px;
       margin-bottom: 1rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .form-block label {
       display: block;
       font-size: 0.9rem;
       font-weight: 500;
       margin-bottom: 0.5rem;
     }

     .form-block select {
       background: white;
     }

     .form-block input,
     .form-block select,
     .form-block textarea {
       width: 100%;
       font-size: 12pt;
       padding: 0.75rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       border: none;
       border-radius: 4px;
       resize: none;
       box-sizing: border-box;
     }

     .form-block input:focus,
     .form-block select:focus,
     .form-block textarea:focus {
       outline: none;
       border-color: #1D6D86;
       box-shadow: 0 0 0 2px #c7dcff;
     }

     .nav-bar {
       margin-left: auto;
       margin-right: auto;
       top: 0;
       position: sticky;
       backdrop-filter: blur(10px);
       padding: 12px;
       margin-bottom: 32px;
       border-radius: 8px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       z-index: 999;
       background: white;
       text-align: center;
     }

     .nav-bar-button {
       border-radius: 6px;
       font-size: 16px;
       margin-left: 2px;
       margin-right: 2px;
       padding: 8px 16px;
       color: black;
       background-color: #F8FAFC;
       text-decoration: none;
       display: inline-block;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .nav-bar-button:hover {
       background-color: #ebf5fc;
     }

     .nav-bar-button.active {
       background-color: #1D6D86;
       color: white;
     }

     .nav-row {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 12px;
     }

     .global-top {
       width: 100%;
       padding: 0px 0px;
     }

     .global-top nav {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       gap: 0px;
       padding-left: 0;
     }

     .nav-link {
       text-decoration: none;
       color: black;
       font-size: 15px;
       display: inline-flex;
       align-items: center;
       padding: 1;
     }

     .global-logo {
       width: 34px;
       height: 34px;
       display: block;
       object-fit: cover;
       border-radius: 8px;
     }

     .breadcrumb-sep {
       margin: 0 2px;
       opacity: 0.7;
       font-weight: 400;
     }

     .nav-link:hover {
       text-decoration: underline;
     }

     .button-row {
       width: 60%;
       margin-top: 1rem;
       display: flex;
       justify-content: flex-start;
       gap: 0.5rem;
     }

     .a-button {
       display: inline-block;
       padding: 0.6rem 2rem;
       border-radius: 10px;
       border: none;
       margin-left: 2px;
       margin-right: 2px;
       background: #0b5fff;
       color: #fff;
       font-size: 14px;
       font-weight: 650;
       cursor: pointer;
       box-shadow: 0 12px 22px rgba(11, 95, 255, 0.20);
       transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease;
       cursor: pointer;
       text-decoration: none;
     }

     .a-button:hover {
       background: #064fe0;
       box-shadow: 0 14px 26px rgba(11, 95, 255, 0.26);
     }

     @media print {
       body {
         zoom: 70%;
         font-size: 12pt;
       }

       .no-print {
         display: none;
       }

       table {
         font-size: 9pt;
         width: 100%;
         border-collapse: collapse;
       }

       th,
       td {
         padding: 4px;
         border: 0.2rem solid black;
       }
     }

     .table-wrapper {
       width: 50%;
       margin-left: auto;
       margin-right: auto;
     }

     .table-wrapper-expanded {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
     }

     .proposals-header-row {
       position: relative;
       margin-bottom: 1rem;
       text-align: center;
     }

     .table-wrapper-proposals {
       width: 90%;
       margin-top: 10px;
       padding-top: 20px;
       margin-left: auto;
       margin-right: auto;
     }

     .styled-table {
       width: 100%;
       font-family: sans-serif;
       font-size: 0.9rem;
       border-collapse: separate;
       border-spacing: 0;
       border-radius: 12px;
       box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.5);
       overflow: hidden;
     }

     .styled-table th {
       font-family: "Inter", system-ui, -apple-system, sans-serif;
     }

     .styled-table th,
     .styled-table td {
       padding: 0.7rem;
       text-align: left;
       font-size: 0.9rem;
       border-spacing: 0;
       border-collapse: separate;
     }

     .styled-table td a {
       display: block;
       padding: 0;
       font-size: 0.9rem;
       margin: 0;
     }

     .styled-table th {
       background-color: white;
       font-weight: 600;
       border-bottom: 0px solid #e5e5e5;
     }

     .styled-table tbody tr.week-start td {
       border-top: 1px solid #dcdcdc;
     }

     .styled-table td[rowspan] {
       background-color: #f9f9f9;
       font-weight: 600;
       border-right: 1px solid #ddd;
       vertical-align: middle;
     }

     .styled-table th:first-child {
       border-top-left-radius: 12px;
     }

     .styled-table th:last-child {
       border-top-right-radius: 12px;
     }

     .styled-table tbody tr:last-child td:first-child {
       border-bottom-left-radius: 12px;
     }

     .styled-table tbody tr:last-child td:last-child {
       border-bottom-right-radius: 12px;
     }

     .trash-button {
       background: transparent;
       color: #901616;
       border: none;
       cursor: pointer;
       margin-top: 10px;
       padding: 0.4rem 0.6rem;
       font-size: 1rem;
       box-shadow: none;
       transition: color 0.2s ease;
       border-bottom-right-radius: 12px;
     }

     .trash-button:hover {
       background: transparent;
       color: #FF0000;
     }

     .po-line-items-table {
       width: 100%;
       border-collapse: collapse;
     }

     .po-line-items-table tbody td {
       padding: 0 0 10px;
       border: none;
     }

     .po-line-item-input {
       width: 100%;
       padding: 6px 8px;
       border: 1px solid #d1d5db;
       border-radius: 4px;
       font-size: 13px;
       box-sizing: border-box;
     }

     .po-line-items-table td.no-box {
       width: 40px;
       text-align: center;
       padding: 0 0 10px 8px;
     }

     .po-line-items-table thead th {
       text-align: left;
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: #6b7280;
       padding: 0 0 6px;
     }

     .po-line-items-table thead th.qty-col {
       text-align: center;
     }

     .po-line-items-table td.qty-col,
     .po-line-items-table th.qty-col {
       width: 70px;
       padding-left: 8px;
     }

     .po-line-item-qty-input {
       width: 100%;
       padding: 6px 8px;
       border: 1px solid #d1d5db;
       border-radius: 4px;
       font-size: 13px;
       box-sizing: border-box;
       text-align: center;
     }

     .styled-table td.no-box {
       padding: 0.25rem;
       box-shadow: none;
       display: flex;
       justify-content: center;
       align-items: center;
       border: none;
       border-radius: 0;
     }

     .shadow-row .trash-button {
       display: none;
     }

     .styled-table input,
     .styled-table select,
     .styled-table textarea {
       background: white;
       border: none;
       box-sizing: border-box;
       width: 100%;
       font-size: 12pt;
       padding: 0.55rem;
       border: none;
       border-radius: 4px;
       resize: none;
       box-sizing: border-box;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .styled-table input:focus {
       outline: none;
       box-shadow: 0 0 0 2px #c7dcff;
     }

     .styled-table input[readonly] {
       background: #f3f4f6;
       color: #4b5563;
       cursor: not-allowed;
     }

     .shadow-row {
       opacity: 0.6;
       transition: opacity 0.3s ease;
     }

     .shadow-row input {
       background-color: #f0f0f0;
       border: 1px dashed #aaa;
     }

     .shadow-row select {
       background-color: #f0f0f0;
       border: 1px dashed #aaa;
     }

     .shadow-row input:focus {
       background-color: #fff;
       border: 1px solid #ccc;
     }

     .table-wrapper-review {
       width: 50%;
       margin-left: auto;
       margin-right: auto;
     }

     .table-wrapper-review>div {
       margin-bottom: 2rem;
     }

     .review-button {
       display: flex;
       align-items: left;
       justify-content: left;
       gap: 0.5rem;
       margin: 0;
       margin-bottom: 0.75rem;
       font-size: 1.2rem;
     }

     .edit-button {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       cursor: pointer;
       background-color: white;
       border-radius: 6px;
       border: none;
       font-size: 16px;
       margin-left: 2px;
       margin-right: 2px;
       color: black;
       cursor: pointer;
       transition: background-color 0.2s ease;
       text-decoration: none;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .edit-button:hover {
       background-color: #ebf5fc;
     }

     .edit-button:active {
       background-color: #1D6D86;
     }

     .table-wrapper-completed {
       width: 80%;
       margin-left: auto;
       margin-right: auto;
     }


     .li-search {
       background: none;
       padding: 2px 4px;
       cursor: pointer;
       font-size: 14px;
       margin-bottom: 0.5rem;
       margin-right: 0.5rem;
     }

     .li-search:hover {
       background-color: #A4C4CE;
       border-radius: 3px;
     }

     .ticket-list {
       list-style: none;
       padding: 0;
       margin: 0;
     }

     .ticket-link {
       background: transparent;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-radius: 8px;
       margin-bottom: 0.2rem;
       text-decoration: none;
       color: inherit;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       font-size: 12pt;
     }

     .a-button-right {
       position: absolute;
       right: 250px;
     }

     h1 {
       display: flex;
       margin-bottom: 16px;
       margin-top: 10px;
       justify-content: center;
       align-items: center;
     }

     caption {
       background-color: white;
       font-size: 1rem;
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;
       z-index: 10;
       padding-bottom: 6px;
       text-align: left;
       padding-top: 10px;
       font-weight: 600;
       font-size: 18px;
     }

     .table-title-row th {
       background-color: white;
       font-size: 18px;
       font-weight: 600;
       text-align: left;
       padding: 10px 15px;
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;
     }

     .a-services {
       font-size: 20px;
     }


     .form-group {
       margin-bottom: 1rem;
       text-align: left;
     }

     .ampx-button {
       margin-top: 1rem;
       padding: 0.75rem 1.5rem;
       cursor: pointer;
       width: 100%;
       font-size: 1rem;
       border-radius: 4px;
       border: none;
       background-color: #007bff;
       color: white;
     }

     .table-edit-button {
       background: inherit;
       color: black;
       border: none;
       cursor: pointer;
       margin-top: 10px;
       padding: 0.4rem 0.6rem;
       font-size: 0.90rem;
       box-shadow: none;
       transition: color 0.2s ease;
     }

     .table-edit-button:hover {
       background: inherit;
       color: #FF0000;
     }

     .input-wrapper {
       position: relative;
       width: 100%;
       overflow: hidden;
       padding: 0;
       margin: 0;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
     }

     .name-input,
     .role-input {
       outline: none;
       box-shadow: none;
       border-radius: 4px;
       border: none;
     }

     .name-input:focus,
     .role-input:focus {
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
       border-bottom-left-radius: 0 !important;
       border-bottom-right-radius: 0 !important;
     }

     .name-input.no-bottom-radius,
     .role-input.no-bottom-radius {
       border-radius: 4px 4px 0 0 !important;
     }

     .suggestions-wrapper {
       position: absolute;
       top: 100%;
       background: white;
       border: none;
       border-radius: 0 0 4px 4px;
       z-index: 9999;
       max-height: 150px;
       box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3);
       overflow-y: auto;
     }

     .suggestions-wrapper::-webkit-scrollbar {
       display: none;
     }

     .suggestions-wrapper .item {
       padding: 0.5rem 0.75rem;
       cursor: pointer;
     }

     .suggestions-wrapper .item--add-new {
       color: #1a56db;
       font-weight: 500;
       border-top: 1px solid #e5e7eb;
     }

     /* Ship To dropdown (po_req_completed.html) -- a dedicated widget, not
        wired through attachFuzzy/.suggestions-wrapper, since its rows are
        richer name+address records rather than flat strings. See
        po_req_completed.html's own <script> block for the JS that builds
        these. */
     .ship-to-suggestions {
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       background: white;
       border: none;
       border-radius: 0 0 6px 6px;
       z-index: 9999;
       max-height: 320px;
       box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3);
       overflow-y: auto;
     }

     .ship-to-suggestions::-webkit-scrollbar {
       display: none;
     }

     .ship-to-suggestions .item {
       padding: 0.5rem 0.75rem;
       cursor: pointer;
       border-bottom: 1px solid #f1f5f9;
     }

     .ship-to-suggestions .item:hover,
     .ship-to-suggestions .item.highlighted {
       background: #f3f4f6;
     }

     .ship-to-suggestions .item-name {
       font-weight: 600;
       font-size: 13px;
     }

     .ship-to-suggestions .item-address {
       font-size: 12px;
       color: #6b7280;
       margin-top: 2px;
     }

     .ship-to-suggestions .item--hero {
       background: #0f5a6b;
       color: #fff;
       border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     }

     .ship-to-suggestions .item--hero .item-name {
       color: #fff;
     }

     .ship-to-suggestions .item--hero .item-address {
       color: rgba(255, 255, 255, 0.85);
     }

     .ship-to-suggestions .item--hero:hover,
     .ship-to-suggestions .item--hero.highlighted {
       background: #0c4a58;
     }

     .ship-to-suggestions .item--hero b,
     .ship-to-suggestions .item--hero .item-address b {
       color: #fff;
       text-decoration: underline;
     }

     .ship-to-suggestions .item--create-new {
       color: #1a56db;
       font-weight: 500;
       border-top: 1px solid #e5e7eb;
       border-bottom: none;
     }

     .ship-to-suggestions .item--create-new:hover,
     .ship-to-suggestions .item--create-new.highlighted {
       background: #eff6ff;
     }

     .tickets-checkbox {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }

     .tickets-header-row {
       position: relative;
       margin-bottom: 1rem;
       text-align: center;
     }

     .tickets-header-row .create-ticket-button {
       position: absolute;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
     }

     .error-message li {
       list-style: none;
       margin: 2px 0;
     }

     ul.error-message {
       list-style: none;
       padding: 2;
     }

     .input-error {
       border: 2px solid red;
       background-color: #ffe6e6;
     }

     .empty-cell {
       background-color: #f2f2f2;
     }

     .th-left-radius {
       border-top-left-radius: 8px;
     }

     .th-right-radius {
       border-top-right-radius: 8px;
     }

     .td-bottom-radius {
       border-bottom-right-radius: 8px;
     }

     .filter-bar {
       margin-bottom: 1rem;
       display: flex;
       align-items: center;
       gap: 1rem;
     }

     .filter-form label {
       font-weight: 600;
     }

     .filter-form input {
       padding: 0.2rem 0.1rem;
       font-size: 0.9rem;
     }

     .filter-form button {
       padding: 0.2rem 0.4rem;
       font-size: 0.9fr;
     }

     /* updated css */

     body {
       background-color: #f3f4f6;
       overflow-x: hidden;
     }

     .container {
       max-width: 70%;
     }

     .container-tickets {
       max-width: 75%;
     }

     .styled-table {
       border-radius: 14px;
       background: #fff;
       border: 1px solid #e6eaf0;
       box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
       overflow: hidden;
     }

     .styled-table thead th {
       background-color: #f8fafc;
       color: #353839;
       font-weight: 600;
       font-size: 0.85rem;
       text-transform: none;
       letter-spacing: 0;
       border-bottom: 1px solid #e6eaf0;
     }

     .styled-table tbody tr {
       background-color: #ffffff;
       transition: background-color 0.15s ease;
     }

     .styled-table tbody tr:hover {
       background-color: #f1f5f9;
     }

     .styled-table tbody td {
       border-bottom: none;
     }

     .styled-table td a {
       font-weight: 650;
       color: #1a4fd8;
       text-decoration: none;
     }

     .styled-table td a:hover {
       text-decoration: underline;
     }


     .styled-table th,
     .styled-table td {
       padding: 0.75rem 1rem;
     }

     .search-wrapper {
       position: relative;
     }

     .search-icon {
       position: absolute;
       left: 10px;
       top: 50%;
       transform: translateY(-50%);
       color: #9aa0a6;
       pointer-events: none;
     }

     .search-wrapper input {
       padding-left: 36px;
       width: 80%;
       font-size: 12px;
     }

     /*Login Page*/

     .login-wrapper {
       margin: 0;
       display: grid;
       padding: 24px 16px;
     }

     .login-container {
       background: rgba(255, 255, 255, 0.92);
       border: 1px solid rgba(0, 0, 0, 0.10);
       border-radius: 16px;
       box-shadow:
         0 16px 40px rgba(0, 0, 0, 0.08),
         0 1px 0 rgba(0, 0, 0, 0.04);
       backdrop-filter: blur(6px);
       max-width: 400px;
       width: 90%;
       margin-top: 5%;
       padding: 22px;
       box-sizing: border-box;
       margin-left: auto;
       margin-right: auto;
       align-content: center;
     }

     .login-logo {
       width: 300px;
       height: auto;
       margin-bottom: 1rem;
       display: block;
       margin-left: auto;
       margin-right: auto;
     }

     #login {
       display: grid;
       gap: 14px;
     }

     .form-group label {
       display: inline-block;
       margin-bottom: 6px;
       font-size: 13px;
       font-weight: 600;
       color: #222;
     }

     .form-group input {
       width: 100%;
       box-sizing: border-box;
       height: 44px;
       padding: 10px 12px;
       font-size: 14px;
       border-radius: 12px;
       border: 1px solid rgba(0, 0, 0, 0.16);
       background: #fff;
       outline: none;
       transition: box-shadow 140ms ease, border-color 140ms ease;
     }

     .form-group input:focus {
       border-color: rgba(0, 0, 0, 0.40);
       box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
     }

     .login-button {
       height: 44px;
       width: 100%;
       border: 1px solid transparent;
       border-radius: 12px;
       background: #0f4c5c;
       font-size: 14px;
       color: white;
       font-weight: 650;
       cursor: pointer;
       box-shadow: 0 12px 22px rgba(11, 95, 255, 0.20);
       transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease;
     }

     .login-button:hover {
       background: #125c6e;
       box-shadow: 0 14px 26px rgba(11, 95, 255, 0.26);
     }

     .error-message {
       margin-top: 4px;
       padding: 10px 12px;
       border-radius: 12px;
       border: 1px solid rgba(217, 48, 37, 0.25);
       background: rgba(217, 48, 37, 0.06);
       color: #b3261e;
       font-size: 13px;
       display: inline-block;
     }

     .row-link:hover {
       background: #f5f7fa;
       cursor: pointer;
     }

     .tickets-grid {
       display: flex;
       gap: 2rem;
       align-items: flex-start;
     }

     .tickets-panel {
       flex: 1;
       min-width: 0;
     }

     .panel-header {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       margin: 0 0 10px 0;
     }

     .panel-header--split {
       justify-content: space-between;
     }

     .panel-title {
       margin: 0;
       text-align: left;
     }

     .checkbox-inline {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 11.5pt;
       color: #374151;
       margin-top: 4px;
     }

     .section-subtitle {
       margin: 0 0 1rem;
       color: rgba(0, 0, 0, 0.55);
       font-size: 13px;
     }

     .pending-empty .primary {
       font-weight: 500;
     }

     .pending-empty .secondary {
       font-size: 12.5px;
       color: #8b95a1;
     }

     .top-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       position: relative;
       width: 100%;
       margin-bottom: 10px;
     }

     .left-group {
       display: flex;
       align-items: center;
     }

     .center-group {
       position: absolute;
       left: 50%;
       padding-top: 10x;
       padding-bottom: 10px;
       transform: translateX(-50%);
       display: flex;
       align-items: center;
       max-width: calc(100% - 420px);
       overflow: hidden;
     }

     .tabs {
       display: inline-flex;
       align-items: center;
       gap: 0.35rem;
       padding: 0.35rem;
       border-radius: 14px;
       overflow: hidden;
       max-width: 100%;
       overflow-x: auto;
       white-space: nowrap;
       scrollbar-width: none;
       filter: none;
       background: #ffffff;
     }

     .tabs::-webkit-scrollbar {
       display: none;
     }

     .tab-link {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 0.55rem 0.95rem;
       border-radius: 12px;
       text-decoration: none;
       font-size: 14px;
       line-height: 1;
       color: rgba(0, 0, 0, 0.72);
       transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
     }

     .tab-link:hover {
       background: rgba(0, 0, 0, 0.06);
       color: rgba(0, 0, 0, 0.88);
     }

     .tab-link.active {
       background: #0b5f73;
       color: #fff;
       box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
     }

     .job-card {
       background: #ffffff;
       border: 1px solid #e6eaf0;
       border-radius: 18px;
       box-shadow:
         0 18px 40px rgba(0, 0, 0, .08),
         0 2px 6px rgba(0, 0, 0, .04);
       padding: 26px;
       max-width: 980px;
       margin: 0 auto;
       padding: 22px 26px;
     }

     .jobs-input {
       height: 48px;
       border-radius: 12px;
       border: 1px solid #e5e7eb;
       background: #ffffff;
       box-shadow:
         inset 0 1px 0 rgba(255, 255, 255, .8),
         0 1px 2px rgba(0, 0, 0, .05);
     }

     .job-subtitle {
       margin: 0 0 1rem;
       color: rgba(0, 0, 0, 0.55);
       padding-left: 10rem;
       font-size: 14px;
     }

     /*review page*/

     .doc {
       max-width: 1050px;
       margin: 32px auto;
       padding: 32px;
       background: #fff;
       color: #111;
       font-size: 14px;
     }

     .doc-header {
       border-bottom: 2px solid #000;
       padding-bottom: 12px;
       margin-bottom: 24px;
     }

     .doc-header h1 {
       margin: 0 0 8px;
       font-size: 1.6rem;
       letter-spacing: .5px;
     }

     .doc-header__title--travel {
       margin: 0 0 8px;
       font-size: 1.6rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       color: #1a56db;
     }

     .meta {
       display: flex;
       flex-wrap: wrap;
       gap: 24px;
       font-size: 0.9rem;
     }

     .doc-section {
       margin-bottom: 28px;
     }

     .doc-section h2 {
       font-size: 1.1rem;
       margin-bottom: 10px;
       border-bottom: 1px solid #000;
       padding-bottom: 4px;
       font-weight: 500;
       letter-spacing: 0.3px;
     }

     .grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 8px 24px;
     }

     .grid div {
       line-height: 1.4;
     }

     .doc-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 0.9rem;
     }

     .doc-table th,
     .doc-table td {
       border: 1px solid #000;
       padding: 6px 8px;
       text-align: left;
     }

     .doc-table th {
       background: #f5f5f5;
       font-weight: 700;
     }

     .doc-table td:nth-child(n+3) {
       text-align: right;
       font-variant-numeric: tabular-nums;
     }

     @media print {
       body {
         background: #fff;
         margin: 0;
       }

       .doc {
         width: 8.5in;
         margin: 0 auto;
         padding: 0;
       }

       .doc-section {
         page-break-inside: avoid;
       }

       h1,
       h2 {
         page-break-after: avoid;
       }

       .no-print {
         display: none;
       }
     }

     .signature-row {
       display: none;
     }

     .signature-row td {
       padding: 28px 16px;
       vertical-align: top;
     }

     .signature-box {
       max-width: 100%;
       margin-bottom: 20px;
     }

     .sig-line {
       height: 28px;
       border-bottom: 1px solid #000;
       margin-bottom: 6px;
     }

     .sig-label {
       font-size: 0.8rem;
       color: #444;
     }

     .print-btn {
       padding: 6px 14px;
       font-size: 13px;
       font-weight: 500;
       border: 1px solid #999;
       background: #fff;
       cursor: pointer;
       border-radius: 4px;
     }

     .print-btn:hover {
       background: #d1d5db;
     }

     .review-page {
       max-width: 980px;
       margin: 0 auto;
       padding: 20px 0 60px;
       display: flex;
       flex-direction: column;
       gap: 18px;
     }

     .review-header {
       display: flex;
       align-items: flex-end;
       justify-content: space-between;
       gap: 16px;
       padding: 6px 2px 10px;
     }

     .review-title {
       margin: 0;
       font-size: 22px;
       font-weight: 650;
       letter-spacing: -0.2px;
     }

     .review-subtitle {
       margin: 6px 0 0;
       color: #6b7280;
       font-size: 13px;
     }

     .card {
       background: #fff;
       border: 1px solid #e5e7eb;
       border-radius: 14px;
       box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
       overflow: hidden;
     }

     .card-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       padding: 12px 14px;
       background: #f9fafc;
       border-bottom: 1px solid #e5e7eb;
     }

     .card-title {
       margin: 0;
       font-size: 14px;
       font-weight: 650;
       color: #111827;
     }

     .card-body {
       padding: 12px 14px;
     }

     .table {
       width: 100%;
       border-collapse: collapse;
       font-size: 13px;
     }

     .table thead th {
       text-align: left;
       font-weight: 600;
       color: #374151;
       padding: 10px 10px;
       background: #f9fafb;
       border-bottom: 1px solid #e5e7eb;
     }

     .table tbody td {
       padding: 10px 10px;
       border-bottom: 1px solid #eef2f7;
       vertical-align: top;
     }

     .table tbody tr:last-child td {
       border-bottom: none;
     }

     .table-compact thead th,
     .table-compact tbody td {
       padding: 8px 10px;
     }

     .num {
       text-align: left;
       font-variant-numeric: tabular-nums;
     }

     .label {
       font-weight: 600;
       color: #111827;
       margin-right: 6px;
     }

     .value {
       font-weight: 400;
       color: #111827;
     }

     .prose {
       font-size: 13px;
       line-height: 1.5;
       color: #111827;
       white-space: pre-wrap;
     }

     .btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 7px 12px;
       border-radius: 10px;
       border: 1px solid transparent;
       font-size: 13px;
       font-weight: 600;
       text-decoration: none;
       cursor: pointer;
     }

     .btn:hover {
       background: #125c6e;
     }

     .btn-ghost {
       padding: 6px 10px;
       border-radius: 10px;
       border: 1px solid #e5e7eb;
       background: #fff;
     }

     .btn-ghost:hover {
       background: #f3f4f6;
     }

     .btn-primary {
       background: #0f4c5c;
       color: #fff;
       border-color: #0f4c5c;
     }

     .btn-primary:hover {
       filter: brightness(0.95);
     }

     .btn-large {
       padding: 10px 16px;
       border-radius: 12px;
     }

     .alert {
       border-radius: 12px;
       padding: 12px 14px;
       border: 1px solid #fecaca;
       background: #fef2f2;
       color: #991b1b;
       font-size: 13px;
     }

     .review-footer {
       display: flex;
       justify-content: flex-end;
       padding-top: 8px;
     }

     .date-range {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 12px;
     }

     .field label {
       display: block;
       font-size: 12px;
       font-weight: 600;
       color: #374151;
       margin-bottom: 6px;
     }

     .field input[type="date"] {
       width: 30%;
       padding: 10px 12px;
       border: 1px solid #e5e7eb;
       border-radius: 10px;
       background: #fff;
     }

     .field input[type="date"]:focus {
       outline: none;
       border-color: #0f4c5c;
       box-shadow: 0 0 0 2px rgba(15, 76, 92, 0.15);
     }

     .hidden {
       display: none;
     }

     .field {
       margin-bottom: 1.25rem;
     }

     .field-group {
       margin-bottom: 1.25rem;
       padding-top: 0.25rem;
     }

     .rental-range {
       border-left: 3px solid #e5e7eb;
       padding-left: 0.75rem;
       margin-bottom: 1rem;
     }

     .empty-state {
       margin-top: 1.25rem;
       padding: 0.75rem 1rem;

       display: inline-flex;
       align-items: center;
       gap: 0.5rem;

       background: #f8fafc;
       border: 1px solid #e5e7eb;
       border-radius: 10px;

       color: #475569;
       font-size: 0.85rem;
       font-weight: 500;
     }

     .helper-text {
       margin-top: 0.5rem;
       color: #6b7280;
       font-size: 0.85rem;
     }

     .print-header {
       display: none;
     }

     .payroll-page .container {
       max-width: 95%;
     }

     .payroll-search-row {
       display: flex;
       align-items: flex-end;
       gap: 16px;
       flex-wrap: wrap;
     }

     .payroll-search-option {
       display: flex;
       flex-direction: column;
       gap: 4px;
     }

     .payroll-search-option label {
       font-size: 12px;
       font-weight: 600;
       color: #555;
     }

     .payroll-search-controls {
       display: flex;
       align-items: center;
       gap: 6px;
     }

     .payroll-search-controls input[type="date"],
     .payroll-search-controls input[type="text"] {
       width: 200px;
       padding: 8px 12px;
       border: 1px solid #e5e7eb;
       border-radius: 10px;
       background: #fff;
       font-size: 14px;
     }

     .payroll-equip-filter-row {
       margin-bottom: 12px;
     }

     .payroll-equip-filter-input {
       width: 260px;
       padding: 8px 12px;
       border: 1px solid #e5e7eb;
       border-radius: 10px;
       background: #fff;
       font-size: 14px;
     }

     .payroll-or {
       font-size: 13px;
       font-weight: 600;
       color: #aaa;
       padding-bottom: 6px;
     }

     input:disabled {
       opacity: 0.4;
       cursor: not-allowed;
     }

     .view-toggle {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 1rem;
       width: 100%;
     }

     .view-toggle>div:first-child {
       display: inline-flex;
       gap: 0.35rem;
       padding: 0.35rem;
       background: #fff;
       border-radius: 14px;
     }

     .view-toggle>div:last-child {
       display: flex;
       gap: 0.5rem;
     }

     /* Daily view: one section per job */
     .daily-job-group {
       margin-bottom: 2rem;
       max-width: 100%;
       overflow: hidden;
     }

     .daily-job-group .table-scroll {
       overflow-x: auto;
       max-width: 100%;
     }

     /* Pivot table: rows = people/items, columns = days */
     .daily-pivot-table {
       width: 100%;
       font-size: 11px;
       border-collapse: collapse;
     }

     .daily-pivot-table th,
     .daily-pivot-table td {
       font-size: 11px;
       padding: 4px 10px !important;
       white-space: nowrap;
     }

     .styled-table .pivot-job-title-row th {
       background: #0b5f73;
       color: #fff;
       font-size: 15px;
       font-weight: 700;
       padding: 6px 12px !important;
       border-radius: 8px 8px 0 0;
       text-align: left !important;
     }

     .pivot-week-label {
       font-size: 11px;
       font-weight: 400;
       opacity: 0.8;
       margin-left: 10px;
     }

     .pivot-num-col {
       width: 28px;
       min-width: 28px;
       text-align: center !important;
     }

     .pivot-row-num {
       width: 28px;
       min-width: 28px;
       text-align: center !important;
       vertical-align: top;
       font-size: 10px;
       font-weight: 700;
       color: #fff;
       background: #0b5f73 !important;
     }

     .pivot-label-col {
       width: 200px;
       min-width: 160px;
       text-align: left !important;
     }

     .pivot-day-col {
       min-width: 110px;
       text-align: center !important;
       vertical-align: top;
     }

     .pivot-date-row {
       display: flex;
       align-items: flex-end;
       gap: 4px;
       justify-content: center;
     }

     .pivot-date {
       font-size: 11px;
       font-weight: 700;
       color: #0b5f73;
     }

     .pivot-edit-btn {
       font-size: 20px;
       color: #0b5f73;
       text-decoration: none;
       line-height: 1;
       margin: 0;
       padding: 0;
       display: inline-flex;
       align-items: center;
       opacity: 0.6;
     }

     .pivot-edit-btn:hover {
       opacity: 1;
     }

     .pivot-ticket-id {
       font-size: 11px;
       color: #aaa;
       margin-top: 1px;
     }

     .pivot-description {
       white-space: normal !important;
       overflow-wrap: break-word;
       word-break: break-word;
       text-align: center;
       font-size: 11px;
       color: #555;
     }

     .pivot-section-row td {
       background: #f0f4f7;
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.06em;
       color: #555;
       padding: 3px 10px !important;
       border-top: 2px solid #d4dde5 !important;
     }

     .pivot-data-row:hover td {
       background: rgba(11, 95, 115, 0.04);
     }

     .pivot-label {
       text-align: left !important;
       vertical-align: top;
     }

     .pivot-role {
       font-size: 11px;
       color: #888;
       margin-right: 4px;
     }

     .pivot-name {
       font-size: 11px;
       color: #222;
     }

     .role-pm {
       color: #0b5f73 !important;
       font-weight: 700;
     }

     .role-pm-label {
       background-color: #e0f4f8 !important;
     }

     .role-supervisor {
       color: #6d3a00 !important;
       font-weight: 700;
     }

     .role-supervisor-label {
       background-color: #fff3e0 !important;
     }

     .role-foreman {
       color: #1a4d1a !important;
       font-weight: 700;
     }

     .role-foreman-label {
       background-color: #e8f5e9 !important;
     }

     .pivot-cell {
       text-align: center !important;
       font-size: 11px;
       vertical-align: top;
     }


     .pivot-empty {
       color: #ccc;
     }

     .pivot-sunday {
       background-color: #fde68a !important;
       border-left: 2px solid #f0c040 !important;
       border-right: 2px solid #f0c040 !important;
     }

     .pv-reg {
       color: #1a6b3a;
     }

     .pv-ot {
       color: #b45a00;
     }

     .pv-nb {
       color: #7b4ea0;
     }

     .pv-pd {
       color: #0b5f73;
     }

     /* =========================
   Print style for payroll
   ========================= */
     @media print {

       /* Page + baseline */
       @page {
         size: auto;
         margin: 0.5in;
         /* adjust if you want more/less whitespace */
       }

       html,
       body {
         background: #fff !important;
         color: #000 !important;
         -webkit-print-color-adjust: exact;
         print-color-adjust: exact;
       }

       /* Hide anything not meant for paper */
       .no-print,
       button,
       .top-row,
       .helper-text,
       .error-message {
         display: none !important;
       }

       /* Container: full width, no card look */
       .container,
       .container-tickets {
         max-width: 100% !important;
         width: 100% !important;
         margin: 0 !important;
         padding: 0 !important;
       }

       .table-card,
       .styled-table {
         box-shadow: none !important;
         border: none !important;
         border-radius: 0 !important;
         background: transparent !important;
       }

       .table-scroll {
         overflow: visible !important;
       }

       /* Print header (optional if you add it) */
       .print-header {
         display: flex !important;
         align-items: baseline;
         justify-content: space-between;
         gap: 12px;
         margin: 0 0 10px 0;
         padding: 0 0 8px 0;
         border-bottom: 2px solid #000;
       }

       .print-title {
         font-size: 14pt;
         font-weight: 700;
         margin: 0;
       }

       .print-meta {
         font-size: 9pt;
         margin: 0;
         white-space: nowrap;
       }

       /* Table: classic printable grid */
       table {
         width: 100% !important;
         border-collapse: collapse !important;
       }

       thead {
         display: table-header-group;
         /* repeat header each page */
       }

       th,
       td {
         border: 1px solid #000 !important;
         padding: 6px 8px !important;
         font-size: 9pt !important;
         line-height: 1.2 !important;
         background: transparent !important;
         color: #000 !important;
       }

       th {
         font-weight: 700 !important;
         text-align: left !important;
       }

       .num {
         text-align: right !important;
         font-variant-numeric: tabular-nums;
       }

       .mono {
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
       }

       tr,
       td,
       th {
         page-break-inside: avoid !important;
         break-inside: avoid !important;
       }

       .week-pill {
         border: none !important;
         background: transparent !important;
         padding: 0 !important;
         font-weight: 700 !important;
       }
     }

     .empty-row td {
       text-align: center;
       font-size: 0.9rem;
       color: #6b7280;
       padding: 24px 8px;
       background: #fafafa;
     }

     .empty-row td {
       color: #6b7280;
     }

     .table-card:has(.empty-row) thead th {
       color: #9ca3af;
     }

     .toolbar {
       display: flex;
       align-items: center;
       gap: 8px;
     }

     .toolbar input[type="date"] {
       flex-shrink: 0;
       width: 190px;
     }

     .btn-right {
       margin-left: auto;
     }

     .req {
       color: #dc2626;
       font-weight: 700;
       margin-left: 4px;
     }

     /* Create New Address modal (po_req_completed.html's Ship To widget). */
     .create-address-field-error {
       color: #dc2626;
       font-size: 12px;
     }

     /* ===== Board Layout (4 columns) ===== */
     /* .po-board { */
     /* display: grid; */
     /* grid-template-columns: repeat(4, minmax(260px, 1fr)); */
     /* gap: 16px; */
     /* padding: 16px; */
     /* align-items: start; */
     /* } */

     /* Responsive: 2 cols on medium, 1 col on small */
     /* @media (max-width: 1100px) { */
     /* .po-board { */
     /* grid-template-columns: repeat(2, minmax(260px, 1fr)); */
     /* } */
     /* } */

     /* @media (max-width: 640px) { */
     /* .po-board { */
     /* grid-template-columns: 1fr; */
     /* } */
     /* } */

     /* ===== Column Panel ===== */
     /* .po-col { */
     /* background: #fff; */
     /* border: 1px solid #e6e9ef; */
     /* border-radius: 12px; */
     /* overflow: hidden; */
     /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); */
     /* min-height: 220px; */
     /* } */

     /* Column header */
     /* .po-col__header { */
     /* display: flex; */
     /* justify-content: space-between; */
     /* align-items: center; */
     /* padding: 12px 12px; */
     /* background: #f7f9fc; */
     /* border-bottom: 1px solid #e6e9ef; */
     /* } */

     /* .po-col__header h3 { */
     /* margin: 0; */
     /* font-size: 14px; */
     /* font-weight: 700; */
     /* letter-spacing: 0.2px; */
     /* } */

     /* .po-col__count { */
     /* font-size: 12px; */
     /* font-weight: 700; */
     /* color: #334155; */
     /* background: #e9eef8; */
     /* border: 1px solid #d7deee; */
     /* padding: 2px 8px; */
     /* border-radius: 999px; */
     /* } */

     /* Scroll list if it grows */
     /* .po-col__list { */
     /* padding: 12px; */
     /* display: flex; */
     /* flex-direction: column; */
     /* gap: 12px; */
     /* max-height: calc(100vh - 220px); */
     /* overflow: auto; */
     /* } */

     /* ===== Card ===== */
     /* .po-card { */
     /* border: 1px solid #e6e9ef; */
     /* border-radius: 10px; */
     /* background: #fff; */
     /* padding: 12px; */
     /* display: flex; */
     /* flex-direction: column; */
     /* gap: 8px; */
     /* transition: transform 120ms ease, box-shadow 120ms ease; */
     /* } */

     /* .po-card:hover { */
     /* transform: translateY(-1px); */
     /* box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); */
     /* } */

     /* Top row */
     /* .po-card__top { */
     /* display: flex; */
     /* justify-content: space-between; */
     /* align-items: center; */
     /* gap: 10px; */
     /* } */

     /* .po-card__id { */
     /* font-weight: 800; */
     /* font-size: 13px; */
     /* color: #0f172a; */
     /* } */

     /* Title + meta */
     /* .po-card__title { */
     /* font-size: 14px; */
     /* font-weight: 700; */
     /* color: #0f172a; */
     /* } */

     /* .po-card__meta { */
     /* font-size: 12px; */
     /* color: #64748b; */
     /* display: flex; */
     /* flex-direction: column; */
     /* gap: 2px; */
     /* } */

     /* ===== Badges ===== */
     /* .po-badge { */
     /* font-size: 11px; */
     /* font-weight: 800; */
     /* padding: 4px 8px; */
     /* border-radius: 8px; */
     /* border: 1px solid transparent; */
     /* white-space: nowrap; */
     /* } */

     /* status variants */
     /* .po-badge--draft { */
     /* background: #f1f5f9; */
     /* border-color: #e2e8f0; */
     /* color: #334155; */
     /* } */

     /* .po-badge--pending { */
     /* background: #e0f2fe; */
     /* border-color: #bae6fd; */
     /* color: #075985; */
     /* } */

     /* .po-badge--completed { */
     /* background: #dcfce7; */
     /* border-color: #bbf7d0; */
     /* color: #166534; */
     /* } */

     /* .po-badge--rejected { */
     /* background: #fee2e2; */
     /* border-color: #fecaca; */
     /* color: #991b1b; */
     /* } */

     /* ===== Actions ===== */
     /* .po-card__actions { */
     /* display: flex; */
     /* gap: 8px; */
     /* margin-top: 4px; */
     /* } */

     /* Make links look like buttons (works for <a> or <button>) */
     /* .po-btn { */
     /* display: inline-flex; */
     /* align-items: center; */
     /* justify-content: center; */
     /* gap: 6px; */
     /* padding: 7px 10px; */
     /* border-radius: 8px; */
     /* font-size: 12px; */
     /* font-weight: 800; */
     /* text-decoration: none; */
     /* border: 1px solid transparent; */
     /* cursor: pointer; */
     /* user-select: none; */
     /* } */

     /* .po-btn--primary { */
     /* background: #0f4c81; */
     /* color: #fff; */
     /* } */

     /* .po-btn--primary:hover { */
     /* filter: brightness(0.95); */
     /* } */

     /* .po-btn--ghost { */
     /* background: #fff; */
     /* color: #0f172a; */
     /* border-color: #dbe3ef; */
     /* } */

     /* .po-btn--ghost:hover { */
     /* background: #f8fafc; */
     /* } */

     /* ===== Print button ===== */
     /* .po-print-btn { */
     /* background: #2563eb; */
     /* border: none; */
     /* color: white; */
     /* padding: 8px 16px; */
     /* border-radius: 6px; */
     /* font-size: 14px; */
     /* cursor: pointer; */
     /* transition: background 0.15s ease; */
     /* } */

     /* .po-print-btn:hover { */
     /* background: #1d4ed8; */
     /* } */

     /* ===== Main document container ===== */
     /* .po-doc { */
     /* max-width: 1050px; */
     /* margin: 30px auto; */
     /* background: white; */
     /* border-radius: 10px; */
     /* padding: 36px 40px; */
     /* box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); */
     /* } */

     /* ===== Header ===== */
     /* .po-doc-header { */
     /* margin-bottom: 28px; */
     /* padding-bottom: 18px; */
     /* border-bottom: 2px solid #e5e7eb; */
     /* } */

     /* ===== Meta grid ===== */
     /* .po-meta { */
     /* display: grid; */
     /* grid-template-columns: repeat(2, 1fr); */
     /* gap: 10px 30px; */
     /* font-size: 14px; */
     /* } */

     /* ===== Sections ===== */
     /* .po-section { */
     /* margin-bottom: 30px; */
     /* } */

     /* Section titles */
     /* .po-section h2 { */
     /* font-size: 16px; */
     /* font-weight: 700; */
     /* margin-bottom: 12px; */
     /* padding-bottom: 6px; */
     /* border-bottom: 1px solid #dcdcdc; */
     /* color: #374151; */
     /* } */

     /* ===== Grid layout ===== */
     /* .po-grid { */
     /* display: grid; */
     /* grid-template-columns: repeat(2, 1fr); */
     /* gap: 12px 40px; */
     /* } */

     /* Field rows */
     /* .po-grid div { */
     /* display: flex; */
     /* gap: 6px; */
     /* font-size: 14px; */
     /* } */

     /* Labels */
     /* .po-grid strong { */
     /* font-weight: 600; */
     /* color: #4b5563; */
     /* } */

     /* Notes full width */
     /* .po-grid div:last-child { */
     /* grid-column: span 2; */
     /* } */

     /* ===== Responsive ===== */
     /* @media (max-width: 850px) { */

     /* .po-meta { */
     /* grid-template-columns: 1fr; */
     /* } */

     /* .po-grid { */
     /* grid-template-columns: 1fr; */
     /* } */

     /* .po-doc { */
     /* padding: 24px; */
     /* } */
     /* } */

     /* ===== Page ===== */
     /* body { */
     /* background: #f7f8fa; */
     /* color: #191919; */
     /* } */

     /* ===== Board Layout ===== */
     .po-board {
       display: flex;
       gap: 18px;
       padding: 18px;
       align-items: flex-start;
       overflow-x: auto;
     }

     /* optional nicer scrollbar */
     .po-board::-webkit-scrollbar {
       height: 10px;
     }

     .po-board::-webkit-scrollbar-thumb {
       background: #d7dce5;
       border-radius: 999px;
     }

     /* ===== Column ===== */
     .po-col {
       flex: 0 0 320px;
       background: #f7f7f5;
       border: 1px solid #ececec;
       border-radius: 14px;
       min-height: 500px;
       box-shadow: none;
       overflow: hidden;
     }

     /* ===== Column Header ===== */
     .po-col__header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 14px 14px 10px;
       background: transparent;
       border-bottom: none;
     }

     .po-col__header h3 {
       margin: 0;
       font-size: 14px;
       font-weight: 700;
       color: #37352f;
     }

     .po-col__count {
       font-size: 12px;
       font-weight: 700;
       color: #6b7280;
       background: #ebedf0;
       border: none;
       padding: 2px 8px;
       border-radius: 999px;
     }

     /* ===== List ===== */
     .po-col__list {
       padding: 0 12px 12px;
       display: flex;
       flex-direction: column;
       gap: 10px;
       max-height: calc(100vh - 180px);
       overflow-y: auto;
     }

     /* ===== Card ===== */
     .po-card {
       border: 1px solid #e9e9e7;
       border-radius: 12px;
       background: #ffffff;
       padding: 12px;
       display: flex;
       flex-direction: column;
       gap: 8px;
       transition: box-shadow 160ms ease, transform 160ms ease;
       cursor: grab;
     }

     .po-card:hover {
       transform: translateY(-1px);
       box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
     }

     .po-card:active {
       cursor: grabbing;
     }

     /* drag state */
     .po-card.dragging {
       opacity: 0.6;
       transform: rotate(1.5deg);
       box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
     }

     /* ===== Top Row ===== */
     .po-card__top {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 10px;
     }

     .po-card__id {
       font-weight: 700;
       font-size: 13px;
       color: #2f3437;
     }

     /* ===== Title + Meta ===== */
     .po-card__title {
       font-size: 14px;
       font-weight: 600;
       color: #191919;
       line-height: 1.35;
     }

     .po-card__meta {
       font-size: 12px;
       color: #6b7280;
       display: flex;
       flex-direction: column;
       gap: 2px;
       line-height: 1.4;
     }

     /* ===== Badges ===== */
     .po-badge {
       font-size: 11px;
       font-weight: 700;
       padding: 4px 8px;
       border-radius: 999px;
       border: none;
       white-space: nowrap;
     }

     .po-badge--draft {
       background: #eef2ff;
       color: #4338ca;
     }

     .po-badge--pending {
       background: #e0f2fe;
       color: #0369a1;
     }

     .po-badge--completed {
       background: #dcfce7;
       color: #166534;
     }

     .po-badge--rejected {
       background: #fee2e2;
       color: #991b1b;
     }

     /* ===== Actions ===== */
     .po-card__actions {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 4px;
     }

     .po-card__actions form {
       display: inline-flex;
       gap: 8px;
     }

     /* ===== Buttons ===== */
     .po-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       padding: 7px 10px;
       border-radius: 8px;
       font-size: 12px;
       font-weight: 700;
       text-decoration: none;
       border: 1px solid transparent;
       cursor: pointer;
       user-select: none;
       transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
     }

     .po-btn--primary {
       background: #2f5d8a;
       color: #fff;
     }

     .po-btn--primary:hover {
       background: #244a6e;
     }

     .po-btn--ghost {
       background: #fff;
       color: #374151;
       border-color: #e5e7eb;
     }

     .po-btn--ghost:hover {
       background: #f9fafb;
     }

     /* ===== Empty State ===== */
     .po-empty {
       font-size: 13px;
       color: #6b7280;
       padding: 14px 10px;
       border: 1px dashed #d6dae1;
       border-radius: 10px;
       background: #fcfcfd;
     }

     /* ===== Responsive ===== */
     @media (max-width: 900px) {
       .po-col {
         flex: 0 0 280px;
       }
     }

     .po-board-wrapper {
       /* controls overall width */
       margin: 0 auto;
       /* centers horizontally */
       width: 100%;
     }

     /* Received column */
     .po-col--received {
       background: #f0f7ff;
       border-color: #dbeafe;
     }

     /* Drafting column */
     .po-col--drafting {
       background: #f0fdf4;
       border-color: #bbf7d0;
     }

     /* Completed column */
     .po-col--completed {
       background: #f8fafc;
       border-color: #e2e8f0;
     }

     /**/
     .po-page {
       padding: 24px 24px 40px;
     }

     .po-shell {
       max-width: 1180px;
       margin: 0 auto;
     }

     .po-head {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 16px;
       margin-bottom: 18px;
     }

     .po-eyebrow {
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: #64748b;
       margin-bottom: 6px;
     }

     .po-title {
       display: block;
       margin: 0;
       font-size: 28px;
       line-height: 1.1;
       font-weight: 800;
       color: #0f172a;
     }

     .po-head-actions {
       display: flex;
       gap: 10px;
       align-items: center;
     }

     .po-head-actions form {
       margin: 0;
     }

     .po-summary-card,
     .po-card {
       background: #ffffff;
       border: 1px solid #e2e8f0;
       border-radius: 16px;
       box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
     }

     .po-summary-card {
       padding: 18px 20px;
       margin-bottom: 18px;
     }

     .po-summary-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 18px;
       align-items: start;
     }

     .po-summary-item--wide {
       min-width: 0;
     }

     .po-card {
       padding: 0;
       overflow: hidden;
       margin-bottom: 18px;
     }

     .po-card__header {
       padding: 16px 20px;
       font-size: 15px;
       font-weight: 800;
       color: #0f172a;
       background: #f8fafc;
       border-bottom: 1px solid #e2e8f0;
     }

     .po-info-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 18px 24px;
       padding: 20px;
     }

     .po-info-grid--three {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }

     .po-info-grid--four {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }

     .po-field--full {
       grid-column: 1 / -1;
     }

     .po-label {
       font-size: 12px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       color: #64748b;
       margin-bottom: 6px;
     }

     .po-value {
       font-size: 15px;
       line-height: 1.5;
       color: #0f172a;
       word-break: break-word;
     }

     /* Struck-through prior value -> current value, shown above a field once
        a change order has altered it (see fetch_latest_change_order_diff). */
     .po-value-diff {
       font-size: 12px;
       line-height: 1.4;
       color: #b91c1c;
       margin-bottom: 4px;
     }

     .po-value-diff s {
       color: #6b7280;
       text-decoration-color: #6b7280;
     }

     .po-inline-form {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-wrap: wrap;
     }

     .po-input {
       height: 38px;
       min-width: 180px;
       padding: 0 12px;
       border: 1px solid #cbd5e1;
       border-radius: 10px;
       font-size: 14px;
       color: #0f172a;
       background: #fff;
       transition: border-color 120ms ease, box-shadow 120ms ease;
     }

     .po-input:focus {
       outline: none;
       border-color: #2563eb;
       box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
     }

     .po-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       height: 38px;
       padding: 0 14px;
       border-radius: 10px;
       border: 1px solid transparent;
       text-decoration: none;
       cursor: pointer;
       font-size: 14px;
       font-weight: 700;
       transition: all 120ms ease;
     }

     .po-btn--small {
       height: 38px;
       padding: 0 12px;
       font-size: 13px;
     }

     .po-btn--primary {
       background: #236270;
       color: #fff;
     }

     .po-btn--ghost {
       background: #fff;
       color: #334155;
       border-color: #cbd5e1;
     }

     .po-btn--ghost:hover {
       background: #f8fafc;
     }

     @media (max-width: 900px) {
       .po-head {
         flex-direction: column;
         align-items: stretch;
       }

       .po-head-actions {
         flex-wrap: wrap;
       }

       .po-summary-grid,
       .po-info-grid,
       .po-info-grid--three,
       .po-info-grid--four {
         grid-template-columns: 1fr;
       }
     }

     .ops-page {
       padding: 20px 18px 28px;
     }

     .ops-shell {
       max-width: 1800px;
       margin: 0 auto;
     }

     .ops-toolbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 18px;
     }

     .ops-kicker {
       font-size: 12px;
       font-weight: 800;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: #6b7280;
       margin-bottom: 4px;
     }

     .ops-title {
       margin: 0;
       font-size: 24px;
       font-weight: 800;
       color: #0f172a;
     }

     .lane-grid {
       display: grid;
       grid-template-columns: repeat(6, minmax(300px, 1fr));
       gap: 18px;
       align-items: start;
     }

     /* Procurement Queue click-through table redesign */
     .procure-board {
       display: flex;
       align-items: flex-start;
       gap: 24px;
     }

     .procure-table-area {
       flex: 1;
       min-width: 0;
     }

     .procure-table-panel {
       background: #ffffff;
       border: 1px solid #eef1f6;
       border-top: 2px solid #e2e8f0;
       border-radius: 14px;
       box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
       overflow: hidden;
     }

     .procure-table-panel--pending-ext {
       border-top-color: color-mix(in srgb, #fb923c 50%, white);
     }

     .procure-table-panel--received {
       border-top-color: color-mix(in srgb, #38bdf8 50%, white);
     }

     .procure-table-panel--drafting {
       border-top-color: color-mix(in srgb, #475569 50%, white);
     }

     .procure-table-panel--rejected {
       border-top-color: color-mix(in srgb, #ec4899 50%, white);
     }

     .procure-table-panel--completed {
       border-top-color: color-mix(in srgb, #3b82f6 50%, white);
     }

     .procure-table-panel--approved {
       border-top-color: color-mix(in srgb, #22c55e 50%, white);
     }

     @keyframes procure-panel-in {
       from {
         opacity: 0;
         transform: translateY(4px);
       }

       to {
         opacity: 1;
         transform: translateY(0);
       }
     }

     .procure-table-panel--enter {
       animation: procure-panel-in 0.2s ease;
     }

     .procure-table-panel__header {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 16px 20px;
       border-bottom: 1px solid #f1f5f9;
     }

     .procure-table-panel__header h2 {
       margin: 0;
       font-size: 15px;
       font-weight: 700;
       color: #172033;
     }

     .procure-table-panel .csv-table-wrap {
       border: none;
       border-radius: 0;
     }

     .procure-table {
       table-layout: auto;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       font-size: 0.85rem;
     }

     .procure-table thead th {
       position: static;
       background: transparent;
       color: #94a3b8;
       font-size: 10.5px;
       font-weight: 700;
       letter-spacing: 0.06em;
       padding: 10px 20px;
       border-bottom: 1px solid #f1f5f9;
       border-right: none;
     }

     .procure-table tbody td {
       padding: 11px 20px;
       border-bottom: 1px solid #f8fafc;
       border-right: none;
       vertical-align: middle;
     }

     .procure-table tbody tr:nth-child(even) {
       background: transparent;
     }

     .procure-table tbody tr:hover {
       background: #f8fafc;
     }

     .procure-table tbody tr:last-child td {
       border-bottom: none;
     }

     .procure-table .csv-table__empty {
       padding: 32px 20px;
       color: #94a3b8;
       font-size: 13px;
     }

     .procure-table th:nth-child(1),
     .procure-table td:nth-child(1) {
       width: 12%;
     }

     .procure-table th:nth-child(2),
     .procure-table td:nth-child(2) {
       width: 14%;
     }

     .procure-table th:nth-child(3),
     .procure-table td:nth-child(3) {
       width: 38%;
     }

     .procure-table th:nth-child(4),
     .procure-table td:nth-child(4) {
       width: 14%;
     }

     .procure-table th:nth-child(5),
     .procure-table td:nth-child(5) {
       width: 14%;
     }

     .procure-table th.procure-table__actions-col,
     .procure-table td.csv-table__actions-cell {
       width: 1%;
       white-space: nowrap;
     }

     .procure-table__actions {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-wrap: wrap;
     }

     .procure-table__link {
       color: #1a56db;
       font-weight: 700;
       text-decoration: none;
     }

     .procure-table__link:hover {
       text-decoration: underline;
     }

     .procure-table__inline-form {
       display: inline-flex;
       align-items: center;
       gap: 6px;
     }

     .procure-table__inline-input {
       padding: 5px 8px;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       font-size: 12px;
       width: 110px;
     }

     .procure-table__toggle {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 0;
       border: none;
       background: none;
       cursor: pointer;
       font-family: inherit;
       font-size: 12px;
       font-weight: 600;
       color: #6b7280;
       white-space: nowrap;
     }

     .procure-table__toggle i {
       font-size: 0.65rem;
       color: #7e22ce;
       transition: transform 0.15s;
     }

     .procure-table__toggle.is-open i {
       transform: rotate(90deg);
     }

     .procure-table__detail-row td {
       background: #fafafa;
       padding: 10px 16px;
     }

     .procure-badge--pending-ext {
       display: inline-flex;
       align-items: center;
       margin-left: 6px;
       padding: 2px 8px;
       border-radius: 999px;
       background: #fffbeb;
       color: #92400e;
       border: 1px solid #fde68a;
       font-size: 10px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.03em;
       white-space: nowrap;
       vertical-align: middle;
     }

     .procure-badge--pending-change-order {
       display: inline-flex;
       align-items: center;
       margin-left: 6px;
       padding: 2px 8px;
       border-radius: 999px;
       background: #faf5ff;
       color: #6b21a8;
       border: 1px solid #e9d5ff;
       font-size: 10px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.03em;
       white-space: nowrap;
       vertical-align: middle;
     }

     .procure-table__link--disabled {
       color: #9ca3af;
       font-weight: 700;
       cursor: not-allowed;
     }

     .procure-table__steps-list {
       display: flex;
       flex-direction: column;
       gap: 6px;
       margin: 0;
       padding: 0 0 0 20px;
       font-size: 12px;
     }

     .procure-table__step {
       display: flex;
       align-items: center;
       gap: 10px;
       color: #9ca3af;
     }

     .procure-table__step--current {
       color: #111827;
       font-weight: 600;
     }

     .procure-table__step-tag {
       font-size: 11px;
       font-weight: 500;
       color: #9ca3af;
     }

     .procure-table__step-tag--current {
       color: #15803d;
       font-weight: 700;
     }

     .procure-table .csv-table__row--recorded {
       background: #f0fdf4;
     }

     .procure-rail {
       display: flex;
       flex-direction: column;
       gap: 2px;
       width: 200px;
       flex-shrink: 0;
       padding: 6px;
       background: #ffffff;
       border: 1px solid #eef1f6;
       border-radius: 14px;
     }

     .procure-rail__new {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 10px;
       border-radius: 9px;
       background: #0f5a6b;
       color: #fff;
       text-decoration: none;
       font-size: 13.5px;
       font-weight: 700;
       transition: background 0.15s ease;
     }

     .procure-rail__new i {
       font-size: 12px;
     }

     .procure-rail__new:hover {
       background: #0c4854;
     }

     .procure-rail__divider {
       height: 1px;
       background: #eef1f6;
       margin: 4px 2px 6px;
     }

     .procure-rail__item {
       position: relative;
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 8px;
       border-radius: 9px;
       border: none;
       background: transparent;
       cursor: pointer;
       text-align: left;
       transition: background 0.12s ease;
     }

     .procure-rail__item:hover {
       background: #f8fafc;
     }

     .procure-rail__item--active {
       background: #eef2ff;
     }

     .procure-rail__item--active::before {
       content: '';
       position: absolute;
       left: 0;
       top: 4px;
       bottom: 4px;
       width: 3px;
       border-radius: 2px;
       background: #4338ca;
     }

     .procure-rail__dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       flex-shrink: 0;
     }

     .procure-rail__label {
       flex: 1;
       min-width: 0;
       font-size: 13.5px;
       font-weight: 500;
       color: #94a3b8;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .procure-rail__item--active .procure-rail__label {
       color: #1e1b4b;
       font-weight: 700;
     }

     .procure-rail__count {
       min-width: 17px;
       height: 16px;
       padding: 0 4px;
       border-radius: 999px;
       background: #f1f5f9;
       color: #94a3b8;
       font-size: 10px;
       font-weight: 600;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
     }

     .procure-rail__item--active .procure-rail__count {
       background: transparent;
       color: #1e1b4b;
       font-weight: 700;
       font-size: 12px;
     }

     .procure-rail__dot--pending-ext {
       background: #fb923c;
     }

     .procure-rail__dot--change-orders {
       background: #a855f7;
     }

     .procure-rail__dot--received {
       background: #38bdf8;
     }

     .procure-rail__dot--drafting {
       background: #475569;
     }

     .procure-rail__dot--rejected {
       background: #ec4899;
     }

     .procure-rail__dot--completed {
       background: #3b82f6;
     }

     .procure-rail__dot--approved {
       background: #22c55e;
     }

     @media (max-width: 900px) {
       .procure-board {
         flex-direction: column;
       }

       .procure-rail {
         width: 100%;
         flex-direction: row;
         flex-wrap: wrap;
       }

       .procure-rail__item {
         flex: 1 1 auto;
       }

       .procure-rail__new {
         flex: 1 1 100%;
       }

       .procure-rail__divider {
         display: none;
       }
     }

     .lane {
       background: #ffffff;
       border: 1px solid #dde4ee;
       border-radius: 18px;
       min-height: 520px;
       box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
       overflow: hidden;
     }

     .lane--requested {
       background: linear-gradient(to bottom, #f3e8ff 0, #f3e8ff 78px, #ffffff 78px, #ffffff 100%);
     }

     .lane--received {
       background: linear-gradient(to bottom, #eef5ff 0, #eef5ff 78px, #ffffff 78px, #ffffff 100%);
     }

     .lane--rejected {
       background: linear-gradient(to bottom,
           #ffeaea 0,
           #ffeaea 78px,
           #ffffff 78px,
           #ffffff 100%);
     }

     .lane--drafting {
       background: linear-gradient(to bottom,
           #ffe9d6 0,
           #ffe9d6 78px,
           #ffffff 78px,
           #ffffff 100%);
     }

     .lane--completed {
       background: linear-gradient(to bottom, #f3f8f4 0, #f3f8f4 78px, #ffffff 78px, #ffffff 100%);
     }

     .lane--approved {
       background: linear-gradient(to bottom, #f5f3ff 0, #f5f3ff 78px, #ffffff 78px, #ffffff 100%);
     }

     .lane--issued {
       background: linear-gradient(to bottom, #f9fafb 0, #f9fafb 78px, #ffffff 78px, #ffffff 100%);
     }

     .lane__top {
       padding: 16px 16px 10px;
     }

     .lane__title-wrap {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
     }

     .lane__title {
       margin: 0;
       font-size: 18px;
       font-weight: 800;
       color: #172033;
     }

     .lane__pill {
       min-width: 28px;
       height: 28px;
       padding: 0 8px;
       border-radius: 999px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.85);
       border: 1px solid #d9e2ec;
       font-size: 13px;
       font-weight: 800;
       color: #334155;
     }

     .lane__accent {
       margin-top: 10px;
       height: 4px;
       border-radius: 999px;
     }

     .lane--rejected .lane__accent {
       background: red;
     }

     .lane--requested .lane__accent {
       background: #a855f7;
     }

     .lane--received .lane__accent {
       background: #3b82f6;
     }

     .lane--drafting .lane__accent {
       background: #F86939;
     }

     .lane--completed .lane__accent {
       background: #22c55e;
     }

     .lane--approved .lane__accent {
       background: #8b5cf6;
     }

     .lane--issued .lane__accent {
       background: #6b7280;
     }

     .lane__body {
       padding: 12px 14px 16px;
       display: flex;
       flex-direction: column;
       gap: 14px;
       max-height: calc(100vh - 220px);
       overflow-y: auto;
     }

     .ticket-card {
       background: #ffffff;
       border: 1px solid #e2e8f0;
       border-radius: 16px;
       padding: 14px;
       box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
       transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
     }

     .ticket-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
       border-color: #cfd8e3;
     }

     .ticket-card__head {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 12px;
       margin-bottom: 10px;
     }

     .ticket-card__job {
       font-size: 15px;
       font-weight: 800;
       color: #111827;
       line-height: 1.3;
     }

     .ticket-card__name {
       font-size: 18px;
       font-weight: 300;
       color: #0f172a;
       line-height: 1.25;
       margin-bottom: 14px;
       letter-spacing: -0.01em;
     }

     .ticket-card__meta {
       display: flex;
       column-gap: 16px;
       row-gap: 4px;
       flex-wrap: wrap;
       font-size: 13px;
       color: #64748b;
       margin-bottom: 10px;
     }

     .ticket-card__meta-row {
       display: flex;
       gap: 4px;
       align-items: center;
     }

     .ticket-card__meta-label {
       font-weight: 600;
       color: #94a3b8;
       padding-bottom: 4px;
     }

     .ticket-card__meta-value {
       color: #334155;
       padding-bottom: 4px;
     }

     .ticket-card__footer {
       display: flex;
       align-items: center;
       justify-content: flex-start;
     }

     .ticket-card__footer--stack {
       align-items: stretch;
     }

     .inline-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
     }

     .inline-actions,
     .ticket-card__footer form {
       margin: 0;
     }

     .ticket-state {
       display: inline-flex;
       align-items: center;
       height: 26px;
       padding: 0 10px;
       border-radius: 999px;
       font-size: 10px;
       font-weight: 700;
       white-space: nowrap;
     }

     .ticket-state--rejected {
       background: #e8efff;
       color: red;
     }

     .ticket-state--requested {
       background: #f3e8ff;
       color: #7e22ce;
     }

     .ticket-state--received {
       background: #e8efff;
       color: #3156d3;
     }

     .ticket-state--drafting {
       background: #e0f2fe;
       color: #0369a1;
     }

     .ticket-state--completed {
       background: #dcfce7;
       color: #166534;
     }

     .ticket-state--approved {
       background: #ede9fe;
       color: #6d28d9;
     }

     .ticket-state--issued {
       background: #e5e7eb;
       color: #374151;
     }

     .action-chip {
       height: 36px;
       padding: 0 14px;
       border-radius: 10px;
       border: 1px solid transparent;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       font-size: 13px;
       font-weight: 800;
       text-decoration: none;
       transition: all 120ms ease;
     }

     .action-chip--primary {
       background: #0f5a6b;
       color: #ffffff;
     }

     .action-chip--primary:hover {
       background: #105261;
     }

     .action-chip--submit-green {
       background: #16a34a;
       color: #ffffff;
       font-size: 16px;
       font-weight: 700;
       padding: 14px 32px;
       border-radius: 12px;
     }

     .action-chip--submit-green:hover {
       background: #15803d;
     }

     .action-chip--neutral {
       background: #ffffff;
       color: #334155;
       border-color: #cbd5e1;
     }

     .action-chip--cancel {
       background: #ffffff;
       color: darkred;
       border-color: #FF6C71;
     }

     .action-chip--neutral:hover {
       background: #f8fafc;
     }

     .action-chip--success {
       background: #ecfdf3;
       color: #166534;
       border-color: #bbf7d0;
     }

     .action-chip--success:hover {
       background: #dcfce7;
     }

     .action-chip--disabled {
       background: #f1f5f9;
       color: #9ca3af;
       border-color: #e2e8f0;
       cursor: not-allowed;
     }

     .lane-empty {
       border: 1px dashed #cbd5e1;
       border-radius: 14px;
       background: #f8fafc;
       color: #64748b;
       padding: 18px 14px;
       font-size: 14px;
       text-align: center;
     }

     @media (max-width: 1180px) {
       .lane-grid {
         grid-template-columns: 1fr;
       }

       .lane {
         min-height: auto;
       }

       .lane__body {
         max-height: none;
       }
     }

     .ticket-card__job-wrap {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-wrap: wrap;
       flex: 1;
     }

     .ticket-flag {
       display: inline-flex;
       align-items: center;
       height: 22px;
       padding: 0 8px;
       border-radius: 999px;
       background: #fff7ed;
       color: #c2410c;
       border: 1px solid #fdba74;
       font-size: 11px;
       font-weight: 800;
       white-space: nowrap;
     }

     .ext-badge {
       display: inline-flex;
       align-items: center;
       height: 20px;
       padding: 0 7px;
       border-radius: 999px;
       background: #fef3c7;
       color: #92400e;
       border: 1px solid #fcd34d;
       font-size: 10px;
       font-weight: 700;
       white-space: nowrap;
       letter-spacing: 0.03em;
       text-decoration: none;
       cursor: pointer;
       transition: background 0.15s;
     }

     .ext-badge:hover {
       background: #fde68a;
     }

     .ticket-card--updated {
       border-color: #fdba74;
       box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.18), 0 10px 24px rgba(15, 23, 42, 0.06);
     }

     .po-page-v2 {
       background: #f3f5f9;
       min-height: 100vh;
       color: #182033;
     }

     .po-shell-v2 {
       padding: 14px 18px 28px;
     }

     .po-topbar-v2 {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 16px;
       margin-bottom: 22px;
     }

     .po-topbar-v2__action {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       background: transparent;
       color: #0f5a6b;
       border: 1.5px solid #0f5a6b;
       text-decoration: none;
       font-weight: 600;
       font-size: 13px;
       padding: 9px 16px;
       border-radius: 8px;
       transition: background 0.15s ease, color 0.15s ease;
     }

     .po-topbar-v2__action i {
       font-size: 12px;
     }

     .po-topbar-v2__action:hover {
       background: #0f5a6b;
       color: #fff;
     }

     .po-main-v2 {
       max-width: 1750px;
       margin: 0 auto;
     }

     .po-board-v2 {
       display: grid;
       grid-template-columns: 1fr;
       gap: 28px;
       align-items: start;
     }

     .po-panel-v2 {
       background: #eef2f7;
       border: 1px solid #d7dfeb;
       border-radius: 22px;
       overflow: hidden;
       box-shadow: 0 8px 24px rgba(19, 35, 67, 0.06);
     }

     .po-panel-v2__form {
       margin: 0;
     }

     .po-panel-v2__header {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 16px;
       padding: 22px 22px 14px;
     }

     .po-panel-v2__eyebrow {
       font-size: 12px;
       font-weight: 800;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       color: #68748d;
       margin-bottom: 4px;
     }

     .po-panel-v2__title {
       margin: 0;
       font-size: 22px;
       line-height: 1.15;
       font-weight: 800;
       color: #182033;
     }

     .po-panel-v2__count {
       min-width: 44px;
       height: 30px;
       padding: 0 12px;
       border-radius: 999px;
       background: #f8fafc;
       border: 1px solid #cfd7e3;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-weight: 800;
       color: #33415c;
     }

     .po-table-v2__item {
       white-space: nowrap;
     }

     .po-table-v2__date {
       white-space: nowrap;
     }

     .po-panel-v2__toolbar {
       padding: 0 22px 14px;
     }

     .po-panel-v2__accent {
       height: 4px;
       margin: 0 22px 18px;
       border-radius: 999px;
     }

     .po-panel-v2__accent--drafts {
       background: #3b82f6;
     }

     .po-panel-v2__accent--submitted {
       background: #20b3e6;
     }

     .po-search-v2 {
       position: relative;
       width: 100%;
       max-width: 280px;
     }

     .po-search-v2__icon {
       position: absolute;
       left: 12px;
       top: 50%;
       transform: translateY(-50%);
       fill: #5e6a84;
       pointer-events: none;
     }

     .po-search-v2__input {
       width: 60%;
       height: 32px;
       border-radius: 12px;
       border: 1px solid #d5dde8;
       background: #fff;
       padding: 0 14px 0 30px;
       font-size: 14px;
       color: #1c2740;
       box-shadow: 0 3px 8px rgba(20, 34, 66, 0.06);
     }

     .po-search-v2__input:focus {
       outline: none;
       border-color: #6fb7ff;
       box-shadow: 0 0 0 3px rgba(111, 183, 255, 0.18);
     }

     .po-table-wrap-v2 {
       padding: 0 22px 22px;
     }

     .po-table-v2 {
       border-spacing: 0;
       background: #fff;
       border: 1px solid #dbe3ee;
       border-radius: 18px;
       overflow: hidden;
       width: 100%;
       table-layout: fixed;
       border-collapse: collapse;
     }

     .po-table-v2 th:nth-child(1),
     .po-table-v2 td:nth-child(1) {
       width: 35%;
     }

     .po-table-v2 th:nth-child(2),
     .po-table-v2 td:nth-child(2) {
       width: 18%;
       white-space: nowrap;
     }

     .po-table-v2 th:nth-child(3),
     .po-table-v2 td:nth-child(3) {
       width: 12%;
     }

     .po-table-v2 th:nth-child(4),
     .po-table-v2 td:nth-child(4) {
       width: 18%;
     }

     .po-table-v2 th:nth-child(5),
     .po-table-v2 td:nth-child(5) {
       width: 12%;
     }

     .po-table-v2 th:nth-child(6),
     .po-table-v2 td:nth-child(6) {
       width: 5%;
       text-align: center;
     }

     .po-table-v2__head th {
       background: #f6f8fb;
       color: #40506b;
       font-size: 12.5px;
       font-weight: 800;
       text-align: left;
       padding: 14px 16px;
       border-bottom: 1px solid #e2e8f0;
     }

     .po-table-v2__body td {
       padding: 14px 16px;
       font-size: 12.5px;
       color: #1e293b;
       border-bottom: 1px solid #edf2f7;
       vertical-align: middle;
     }

     .po-table-v2__body tr:last-child td {
       border-bottom: none;
     }

     .po-table-v2__row:hover td {
       background: #fafcff;
     }

     .po-table-v2__row {
       font-size: 12.5px;
     }

     .po-table-v2__link {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       display: inline-block;
       max-width: 280px;
     }

     .po-table-v2__link:hover {
       text-decoration: underline;
     }

     .po-table-v2__job {
       font-weight: 700;
     }

     .po-table-v2__edit-col,
     .po-table-v2__edit {
       text-align: center;
     }

     .po-pill-v2 {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-height: 28px;
       padding: 1px 8px;
       border-radius: 999px;
       font-size: 12px;
       font-weight: 800;
       white-space: nowrap;
       font-size: 12.5 px;
     }

     .po-pill-v2--completed {
       background: #dcfce7;
       color: #166534;
     }

     .po-pill-v2--received {
       background: #f0f7ff;
       border-color: #dbeafe;
     }

     .po-pill-v2--drafting {
       background: #ffe9d6;
       color: #F86939;
     }

     .po-pill-v2--muted {
       background: #eef2f7;
       color: #667085;
     }

     .po-edit-btn-v2 {
       width: 30px;
       height: 30px;
       border-radius: 10px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: #2563eb;
       text-decoration: none;
       transition: transform 0.15s ease, background 0.15s ease;
     }

     .po-empty-v2 {
       text-align: left;
       padding: 24px 18px !important;
     }

     .po-empty-v2__title {
       font-weight: 800;
       color: #1f2937;
       margin-bottom: 6px;
     }

     .po-empty-v2__text {
       color: #7b879c;
       font-size: 14px;
     }

     .po-error-v2 {
       margin-top: 18px;
       background: #fef2f2;
       border: 1px solid #fecaca;
       color: #991b1b;
       border-radius: 14px;
       padding: 12px 14px;
       font-weight: 600;
     }

     @media (max-width: 1100px) {
       .po-board-v2 {
         grid-template-columns: 1fr;
       }
     }

     @media (max-width: 640px) {
       .po-shell-v2 {
         padding: 12px;
       }

       .po-topbar-v2 {
         flex-direction: column;
         align-items: stretch;
       }

       .po-topbar-v2__action {
         width: 100%;
       }

       .po-panel-v2__header,
       .po-panel-v2__toolbar,
       .po-table-wrap-v2 {
         padding-left: 14px;
         padding-right: 14px;
       }

       .po-panel-v2__accent {
         margin-left: 14px;
         margin-right: 14px;
       }

       .po-table-v2__head th,
       .po-table-v2__body td {
         padding: 12px 10px;
         font-size: 13px;
       }
     }

     .po-form-shell {
       max-width: 1100px;
       margin: 28px auto 48px;
       padding: 0 16px;
     }

     .po-form-v2 {
       background: #eef3f8;
       border: 1px solid #d8e1ec;
       border-radius: 24px;
       padding: 28px 30px 32px;
       box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
     }

     .po-form-header {
       text-align: center;
       margin-bottom: 20px;
     }

     .po-form-title {
       margin: 0 0 8px;
       font-size: 28px;
       line-height: 1.1;
       font-weight: 800;
       color: #111827;
     }

     .po-form-sub {
       margin-bottom: 6px;
       font-size: 15px;
       color: #5f6b7a;
     }

     .po-section {
       margin-top: 28px;
       padding-top: 22px;
       border-top: 1px solid #dde5ef;
     }

     .po-section:first-of-type {
       margin-top: 0;
       padding-top: 0;
       border-top: none;
     }

     .po-section-title {
       margin: 0 0 18px;
       text-align: center;
       font-size: 16px;
       font-weight: 800;
       color: #182033;
     }

     .po-section-hint {
       margin: -10px 0 14px;
       font-size: 12px;
       color: #64748b;
       text-align: center;
     }

     .po-grid-1 {
       display: grid;
       grid-template-columns: 1fr;
       gap: 18px;
     }

     .po-grid-2,
     .po-grid-3,
     .po-grid-4 {
       display: grid;
       gap: 18px 16px;
     }

     .po-grid-2 {
       grid-template-columns: 1fr 1fr;
     }

     .po-grid-3 {
       grid-template-columns: repeat(3, 1fr);
     }

     .po-grid-4 {
       grid-template-columns: repeat(4, 1fr);
     }

     .po-field {
       display: flex;
       flex-direction: column;
     }

     .po-field-full {
       margin-top: 18px;
     }

     .po-field--half {
       max-width: calc(50% - 8px);
     }

     .po-field label {
       margin-bottom: 8px;
       font-size: 13px;
       font-weight: 700;
       color: #1f2937;
     }

     .po-field-hint {
       display: block;
       margin-top: 4px;
       font-size: 11px;
       color: #6b7280;
     }

     .po-field input,
     .po-field select,
     .po-field textarea {
       width: 100%;
       border: 1px solid #cad5e3;
       background: #fff;
       border-radius: 12px;
       padding: 12px 14px;
       font-size: 14px;
       color: #111827;
       box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
       transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
       box-sizing: border-box;
     }

     .po-field input,
     .po-field select {
       min-height: 46px;
     }

     .po-field input[type="checkbox"] {
       -webkit-appearance: checkbox;
       appearance: checkbox;
       all: revert;
       width: 18px;
       height: 18px;
       accent-color: #0b5f73;
       cursor: pointer;
     }

     .po-field textarea {
       min-height: 112px;
       resize: vertical;
     }

     .po-field input:focus,
     .po-field select:focus,
     .po-field textarea:focus {
       outline: none;
       border-color: #67aaf9;
       box-shadow: 0 0 0 4px rgba(103, 170, 249, 0.16);
     }

     .po-field input::placeholder,
     .po-field textarea::placeholder {
       color: #8a94a6;
     }


     .po-field--reason {
       display: none;
     }

     .po-field--reason.po-field--reason-visible {
       display: flex;
     }

     .po-template-field.po-field--reason-visible {
       display: block;
     }

     .rental-reconcile__steps {
       display: flex;
       flex-direction: column;
       gap: 12px;
     }

     .rental-reconcile__step {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 12px;
       padding: 14px 18px;
       border: 1px solid #d1d5db;
       border-radius: 8px;
       background: #fff;
     }

     .rental-reconcile__step--locked {
       opacity: 0.55;
       background: #f9fafb;
     }

     .rental-reconcile__step-label {
       font-size: 14px;
       font-weight: 600;
       color: #172033;
     }

     .rental-reconcile__step-hint {
       font-size: 12px;
       color: #6b7280;
       font-style: italic;
     }

     .rental-reconcile__step-form {
       display: flex;
       align-items: center;
       gap: 8px;
     }

     .rental-reconcile__step-form input[type="text"] {
       padding: 7px 10px;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       font-size: 13px;
       width: 160px;
     }

     .po-form-actions {
       margin-top: 30px;
       padding-top: 22px;
       border-top: 1px solid #dde5ef;
       display: flex;
       align-items: center;
     }

     .po-form-actions__spacer {
       flex: 1;
     }

     .po-form-actions__right {
       flex: 1;
       display: flex;
       justify-content: flex-end;
     }

     .po-btn-v2 {
       border: none;
       border-radius: 12px;
       padding: 12px 18px;
       font-size: 14px;
       font-weight: 700;
       cursor: pointer;
       transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
     }

     .po-btn-v2:hover {
       transform: translateY(-1px);
     }

     .po-btn-v2--secondary {
       background: #e8eef5;
       color: #243244;
       border: 1px solid #ced8e5;
     }

     .po-btn-v2--secondary:hover {
       background: #dde7f1;
     }

     .po-btn-v2--primary {
       background: #145d6f;
       color: white;
       box-shadow: 0 8px 18px rgba(20, 93, 111, 0.16);
     }

     .po-btn-v2--primary:hover {
       background: #0f5161;
     }

     .po-error-v2 {
       margin-top: 14px;
       padding: 12px 14px;
       border-radius: 12px;
       background: #fef2f2;
       border: 1px solid #fecaca;
       color: #991b1b;
       font-size: 14px;
       font-weight: 600;
     }

     @media (max-width: 820px) {

       .po-grid-2,
       .po-grid-3,
       .po-grid-4 {
         grid-template-columns: 1fr;
       }

       .po-field--half {
         max-width: 100%;
       }

       .po-form-v2 {
         padding: 22px 18px 24px;
       }

       .po-form-title {
         font-size: 24px;
       }

       .po-form-actions {
         flex-direction: column;
       }

       .po-btn-v2 {
         width: 100%;
       }
     }

     .po-grid-1 {
       display: grid;
       grid-template-columns: 1fr;
       gap: 18px;
     }

     .po-grid-2 {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 18px;
     }

     .po-field input,
     .po-field select {
       width: 100%;
     }

     .hidden {
       display: none;
     }

     .po-file-row {
       display: flex;
       align-items: center;
       gap: 12px;
       width: 100%;
     }

     .po-file-input {
       flex: 1;
       min-width: 0;
     }

     .po-file-row .po-btn {
       flex: 0 0 auto;
       white-space: nowrap;
     }

     .po-table-v2 {
       width: 100%;
       table-layout: fixed;
       border-collapse: collapse;
     }

     .po-table-v2 th,
     .po-table-v2 td {
       padding: 16px 18px;
       text-align: left;
       vertical-align: middle;
       box-sizing: border-box;
     }

     /* Submitted table column widths */
     .po-panel-v2--submitted .po-table-v2 th:nth-child(1),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(1) {
       width: 13%;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(2),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(2) {
       width: 9%;
       white-space: nowrap;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(3),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(3) {
       width: 6%;
       white-space: nowrap;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(4),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(4) {
       width: 9%;
       white-space: nowrap;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(5),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(5) {
       width: 10%;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(6),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(6) {
       width: 11%;
       text-align: center;
       white-space: nowrap;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(7),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(7) {
       width: 8%;
       text-align: center;
       white-space: nowrap;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(8),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(8) {
       width: 6%;
       text-align: center;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(9),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(9) {
       width: 8%;
       text-align: center;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(10),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(10) {
       width: 4%;
       text-align: center;
     }

     .po-panel-v2--submitted .po-table-v2 th:nth-child(11),
     .po-panel-v2--submitted .po-table-v2 td:nth-child(11) {
       width: 6%;
       text-align: center;
     }

     /* Keep item links neat */
     .po-table-v2__link {
       display: inline-block;
       max-width: 100%;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       font-size: 12.5px;
     }

     /* Job number stays on one line */
     .po-table-v2__item {
       font-size: 12.5px;
       white-space: nowrap;
     }

     /* Status cell and pill */
     .po-table-v2__status {
       white-space: nowrap;
     }

     .po-pill-v2 {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       white-space: nowrap;
       padding: 6px 10px;
       line-height: 1;
       letter-spacing: 0;
     }

     .po-table-v2__link {

       font-size: 12.5px;
       /* font-size: 13px; */
       font-weight: 600;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       display: inline-block;
       max-width: 100%;
     }

     .po-table-v2 {
       font-size: 13px;
     }

     .po-table-v2 th {
       /* font-size: 13px; */
       font-size: 12.5px;
       font-weight: 600;
       color: #4b5b70;
     }

     th,
     td {
       font-size: 12.5px;
     }

     .po-table-v2 {
       width: 100%;
       table-layout: fixed;
       border-collapse: collapse;
     }

     /* Item */
     .po-table-v2 th:nth-child(1),
     .po-table-v2 td:nth-child(1) {
       width: 35%;
     }

     /* Job No */
     .po-table-v2 th:nth-child(2),
     .po-table-v2 td:nth-child(2) {
       width: 16%;
       white-space: nowrap;
     }

     /* PO No */
     .po-table-v2 th:nth-child(3),
     .po-table-v2 td:nth-child(3) {
       width: 16%;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     /* Date */
     .po-table-v2 th:nth-child(4),
     .po-table-v2 td:nth-child(4) {
       width: 14%;
       white-space: nowrap;
     }

     /* Status */
     .po-table-v2 th:nth-child(5),
     .po-table-v2 td:nth-child(5) {
       width: 12%;
     }

     /* Edit icon */
     .po-table-v2 th:nth-child(6),
     .po-table-v2 td:nth-child(6) {
       width: 7%;
       text-align: center;
     }

     .po-table-v2__link {
       display: inline-block;
       max-width: 100%;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .po-pill-v2 {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       white-space: nowrap;
     }

     .po-panel-v2--drafts .po-table-v2 {
       width: 100%;
       table-layout: fixed;
     }

     .po-panel-v2--drafts .po-table-v2 th:nth-child(1),
     .po-panel-v2--drafts .po-table-v2 td:nth-child(1) {
       width: 52%;
     }

     .po-panel-v2--drafts .po-table-v2 th:nth-child(2),
     .po-panel-v2--drafts .po-table-v2 td:nth-child(2) {
       width: 24%;
       white-space: nowrap;
     }

     .po-panel-v2--drafts .po-table-v2 th:nth-child(3),
     .po-panel-v2--drafts .po-table-v2 td:nth-child(3) {
       width: 24%;
       white-space: nowrap;
     }

     .po-panel-v2--drafts .po-table-v2__link {
       display: inline-block;
       max-width: 100%;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .po-panel-v2--drafts .po-table-v2 th:nth-child(1),
     .po-panel-v2--drafts .po-table-v2 td:nth-child(1) {
       width: 45%;
     }

     .po-panel-v2__toolbar {
       display: flex;
       gap: 12px;
       /* space between search boxes */
       align-items: center;
     }

     /* Toolbar layout */
     .po-panel-v2__toolbar {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 8px;
     }

     /* Search box */
     .po-search-v2 {
       display: flex;
       align-items: center;
       padding: 3px 8px;
       height: 30px;
       max-width: 200px;
     }

     /* Icon */
     .po-search-v2__icon {
       margin-right: 4px;
       opacity: 0.6;
       transform: scale(0.85);
     }

     /* Input */
     .po-search-v2__input {
       outline: none;
       font-size: 12px;
       width: 100%;
     }

     /* Button */
     .po-btn-v2 {
       height: 30px;
       padding: 0 12px;
       font-size: 12px;
       font-weight: 600;
       cursor: pointer;
     }

     .po-btn-v2:hover {
       background: #e3eaf3;
     }

     .po-upload {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-top: 4px;
     }

     .po-upload input[type="file"] {
       font-size: 14px;
       border: 1px solid #d6dce5;
       border-radius: 8px;
       padding: 6px 10px;
       background: #fff;
     }

     .po-upload input[type="file"]::file-selector-button {
       background: #eef3f9;
       border: 1px solid #d6dce5;
       border-radius: 6px;
       padding: 6px 12px;
       cursor: pointer;
     }

     .po-upload input[type="file"]::file-selector-button:hover {
       background: #e4ecf7;
     }

     .po-card .po-info-grid {
       min-height: 72px;
     }

     .po-data-input {
       height: 38px;
       width: 100%;
       padding: 0 12px;
       border: 1px solid #cbd5e1;
       border-radius: 10px;
       font-size: 14px;
       color: #0f172a;
       background: #fff;
       transition: border-color 120ms ease, box-shadow 120ms ease;
     }

     .approval-board {
       padding: 24px;
     }

     .approval-board__header {
       margin-bottom: 20px;
     }

     .approval-board__title {
       margin: 0;
       font-size: 1.5rem;
       font-weight: 700;
       color: #1f2937;
     }

     .approval-board__subtitle {
       margin: 6px 0 0;
       font-size: 0.95rem;
       color: #6b7280;
     }

     .approval-card {
       width: 320px;
       min-height: 340px;
       display: flex;
       flex-direction: column;
       padding: 18px;
       border-radius: 18px;
       background: linear-gradient(180deg, #2d2a63 0%, #25224f 100%);
       border: 1px solid rgba(255, 255, 255, 0.08);
       box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
       flex: 0 0 calc((100% - 64px) / 5);
       min-width: 0;
       max-width: none;
       color: #f8fafc;
     }

     .approval-grid {
       display: flex;
       flex-wrap: wrap;
       gap: 14px;
       align-items: flex-start;
     }

     .approval-grid {
       display: flex;
       flex-wrap: wrap;
       gap: 16px;
       align-items: flex-start;
     }

     .approval-card {
       flex: 0 0 calc((100% - 64px) / 5);
       min-width: 220px;
     }

     .approval-card__top {
       display: flex;
       flex-direction: column;
       gap: 4px;
     }

     .approval-card__customer {
       font-size: 0.82rem;
       font-weight: 800;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       color: #f97316;
     }

     .approval-card__date {
       font-size: 0.78rem;
       color: rgba(255, 255, 255, 0.72);
     }

     .approval-card__items {
       margin-bottom: 18px;
     }

     .approval-card__items-label {
       margin-bottom: 6px;
       font-size: 0.72rem;
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.62);
     }

     .approval-card__items-value {
       font-size: 0.84rem;
       line-height: 1.5;
       color: #f8fafc;
       white-space: pre-line;
     }

     .approval-card__financials {
       display: flex;
       flex-direction: column;
       gap: 8px;
       margin-top: auto;
       padding-top: 14px;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
     }

     .approval-card__financial-row {
       display: flex;
       justify-content: space-between;
       gap: 12px;
     }

     .approval-card__label {
       font-size: 0.78rem;
       color: rgba(255, 255, 255, 0.72);
     }

     .approval-card__value {
       font-size: 0.8rem;
       font-weight: 700;
       color: #ffffff;
       text-align: right;
     }

     .approval-card__actions {
       margin-top: 18px;
     }

     .approval-card__btn {
       width: 100%;
       border: 0;
       border-radius: 12px;
       padding: 8px 12px;
       font-size: 0.78rem;
       font-weight: 600;
       cursor: pointer;
       color: #ffffff;
       background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
       box-shadow: 0 6px 16px rgba(249, 115, 22, 0.28);
     }

     .approval-card__btn:hover {
       filter: brightness(1.05);
     }

     .approval-board__empty {
       padding: 20px;
       border-radius: 14px;
       background: #f8fafc;
       color: #64748b;
       border: 1px dashed #cbd5e1;
     }

     .approval-board {
       padding: 12px 16px;
       width: 100%;
       max-width: none;
     }

     .approval-grid {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 14px;
       width: 100%;
     }

     .approval-card {
       width: 100%;
       min-width: 0;
       min-height: 320px;
       box-sizing: border-box;
     }

     .approval-card {
       width: 100%;
       max-width: 260px;
       /* shrink cards */
       min-height: 320px;
       margin: 0 auto;
       /* keeps them centered in grid cell */
     }

     .approval-grid {
       display: grid;
       grid-template-columns: repeat(5, 260px);
       gap: 16px;
     }

     .approval-grid {
       display: grid;
       grid-template-columns: repeat(6, minmax(240px, 260px));
       gap: 16px;
       align-items: stretch;
       /* important */
     }

     .approval-grid {
       display: grid;
       grid-template-columns: repeat(6, 260px);
       gap: 18px;
       justify-content: center;
       /* centers the whole row */
     }

     /* ===== LANE HEADER (less space) ===== */
     .lane__top {
       margin-bottom: 6px;
     }

     .lane__title {
       font-size: 0.82rem;
       font-weight: 800;
     }

     .lane__pill {
       height: 22px;
       min-width: 22px;
       font-size: 0.7rem;
     }

     /* ===== CARD ===== */
     .ticket-card {
       padding: 8px 9px;
       border-radius: 12px;
       box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
     }

     /* Header row */
     .ticket-card__head {
       margin-bottom: 5px;
     }

     /* Job ID */
     .ticket-card__job {
       font-size: 0.78rem;
       font-weight: 800;
     }

     /* Updated flag */
     .ticket-flag {
       font-size: 0.6rem;
       padding: 2px 5px;
     }

     /* Main text */
     .ticket-card__name {
       font-size: 0.72rem;
       margin-bottom: 6px;
       line-height: 1.2;
     }

     /* Meta */
     .ticket-card__meta-row {
       font-size: 0.68rem;
     }

     .ticket-card__meta {
       margin-bottom: 6px;
     }

     /* Footer */
     .ticket-card__footer {
       margin-top: 4px;
     }

     /* ===== BUTTONS (BIG IMPACT) ===== */
     .action-chip {
       height: 26px;
       padding: 0 8px;
       font-size: 0.68rem;
       border-radius: 8px;
     }

     /* Reduce spacing between buttons */
     .ticket-card__footer form,
     .inline-actions {
       gap: 4px;
     }

     /* ===== LANE BODY ===== */
     .lane__body {
       gap: 8px;
     }

     /* ===== EMPTY STATE ===== */
     .lane-empty {
       padding: 10px;
       font-size: 0.75rem;
     }

     .lane-grid {
       display: grid;
       grid-template-columns: repeat(6, minmax(180px, 1fr));
       gap: 10px;
     }

     .switch {
       position: relative;
       display: inline-block;
       width: 38px;
       height: 20px;
     }

     .switch input {
       opacity: 0;
       width: 0;
       height: 0;
     }

     .slider {
       position: absolute;
       cursor: pointer;
       inset: 0;
       background-color: #e5e7eb;
       border-radius: 999px;
       transition: 0.2s;
     }

     .slider::before {
       content: "";
       position: absolute;
       height: 14px;
       width: 14px;
       left: 3px;
       top: 3px;
       background-color: white;
       border-radius: 50%;
       transition: 0.2s;
     }

     .switch input:checked+.slider {
       background-color: #22c55e;
     }

     .switch input:checked+.slider::before {
       transform: translateX(18px);
     }

     .switch {
       position: relative;
       display: inline-block;
       width: 38px;
       height: 20px;
     }

     .switch input {
       opacity: 0;
       width: 0;
       height: 0;
     }

     .slider {
       position: absolute;
       inset: 0;
       background: #e5e7eb;
       border-radius: 999px;
       transition: 0.2s;
       cursor: pointer;
     }

     .slider::before {
       content: "";
       position: absolute;
       height: 14px;
       width: 14px;
       left: 3px;
       top: 3px;
       background: white;
       border-radius: 50%;
       transition: 0.2s;
     }

     .switch input:checked+.slider {
       background: #3b82f6;
       /* blue */
     }

     .switch input:checked+.slider::before {
       transform: translateX(18px);
     }

     .recorded-toggle {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-top: 6px;
     }

     .recorded-label {
       font-size: 10px;
       font-weight: 600;
       color: #6b7280;
     }

     .approval-card--recorded {
       box-shadow: 0 0 0 2px #bfdbfe inset;
     }

     .ticket-card--recorded {
       box-shadow: 0 0 0 2px #bfdbfe inset;
     }

     .approval-badge {
       font-size: 10px;
       padding: 2px 6px;
       border-radius: 999px;
       background: #dcfce7;
       color: #166534;
       font-weight: 600;
     }

     .approval-card__top {
       display: flex;
       justify-content: space-between;
       gap: 10px;
     }

     .approval-badge {
       position: absolute;
       top: 10px;
       right: 10px;

       display: inline-flex;
       align-items: center;

       padding: 4px 10px;
       border-radius: 999px;

       background: #dff7e7;
       color: #166534;

       font-size: 11px;
       font-weight: 700;
       line-height: 1;
       white-space: nowrap;
     }

     .approval-card {
       position: relative;
     }

     .switch {
       position: relative;
       display: inline-block;
       width: 38px;
       height: 20px;
     }

     .switch input {
       opacity: 0;
       width: 0;
       height: 0;
     }

     .slider {
       position: absolute;
       inset: 0;
       background: #e5e7eb;
       border-radius: 999px;
       transition: 0.2s;
       cursor: pointer;
     }

     .slider::before {
       content: "";
       position: absolute;
       height: 14px;
       width: 14px;
       left: 3px;
       top: 3px;
       background: white;
       border-radius: 50%;
       transition: 0.2s;
     }

     .switch input:checked+.slider {
       background: #22c55e;
     }

     .switch input:checked+.slider::before {
       transform: translateX(18px);
     }

     .ticket-card__priority {
       margin-top: 10px;
       padding-top: 10px;
       border-top: 1px solid #e5e7eb;
     }

     .ticket-card__priority-label {
       font-size: 12px;
       font-weight: 800;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: #334155;
       margin-bottom: 8px;
     }

     .priority-group {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
     }

     .priority-chip {
       position: relative;
       display: inline-flex;
     }

     .priority-chip input {
       position: absolute;
       opacity: 0;
       pointer-events: none;
     }

     .priority-chip span {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-height: 32px;
       padding: 0 12px;
       border-radius: 999px;
       border: 1px solid #d6dbe4;
       background: #ffffff;
       color: #334155;
       font-size: 13px;
       font-weight: 700;
       cursor: pointer;
       transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
     }

     .priority-chip input:checked+span {
       box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.06) inset;
     }

     .priority-chip--normal input:checked+span {
       background: #eef2f7;
       border-color: #cbd5e1;
       color: #1e293b;
     }

     .priority-chip--urgent input:checked+span {
       background: #fff4e5;
       border-color: #f5b66f;
       color: #9a3412;
     }

     .priority-chip--very-urgent input:checked+span {
       background: #fee2e2;
       border-color: #f87171;
       color: #991b1b;
     }

     .ticket-card__priority {
       margin-top: 10px;
       padding-top: 10px;
       border-top: 1px solid #e5e7eb;
     }

     .ticket-card__priority-label {
       margin-bottom: 8px;
       font-size: 11px;
       font-weight: 800;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: #334155;
     }

     .priority-group {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
     }

     .priority-option {
       position: relative;
       display: inline-flex;
     }

     .priority-option input {
       position: absolute;
       opacity: 0;
       pointer-events: none;
     }

     .priority-option span {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-height: 24px;
       padding: 0 10px;
       border-radius: 999px;
       border: 1px solid rgba(15, 90, 107, 0.12);
       background: #fff;
       color: #334155;
       font-size: 11px;
       font-weight: 600;
       line-height: 1;
       cursor: pointer;
       white-space: nowrap;
       transition: all 0.18s ease;
     }

     .priority-option input:checked+span {
       box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.06) inset;
     }

     .priority-option--normal input:checked+span {
       background: #eef2f7;
       border-color: #cbd5e1;
       color: #1e293b;
     }

     .priority-option--urgent input:checked+span {
       background: #fff4e5;
       border-color: #f5b66f;
       color: #9a3412;
     }

     .priority-option--very-urgent input:checked+span {
       background: #fee2e2;
       border-color: #f87171;
       color: #991b1b;
     }

     .approval-card--urgent {
       border-left: 4px solid #fb923c;
     }

     .approval-card--very-urgent {
       border-left: 4px solid #ef4444;
     }

     .priority-badge {
       position: absolute;
       top: 10px;
       left: 10px;
       padding: 3px 8px;
       border-radius: 999px;
       font-size: 10px;
       font-weight: 700;
     }

     .priority-badge--urgent {
       background: #fff4e5;
       color: #9a3412;
     }

     .priority-badge--very-urgent {
       background: #fee2e2;
       color: #991b1b;
     }

     .approval-card {
       position: relative;
       border: 1px solid #2f356d;
       border-left: 1px solid #2f356d;
       border-radius: 18px;
       overflow: hidden;
     }

     .approval-card--urgent {
       border-left: 4px solid #fb923c;
       box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.20);
     }

     .approval-card--very-urgent {
       border-left: 4px solid #ef4444;
       box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.22);
     }

     .approval-card--prechcked {
       border-left: 4px solid #ef4444;
       box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.22);
     }

     .approval-card__top {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 12px;
       margin-bottom: 8px;
     }

     .approval-card__top-left,
     .approval-card__top-right {
       display: flex;
       align-items: center;
       gap: 8px;
       min-height: 24px;
     }

     .priority-badge,
     .approval-badge {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 4px 10px;
       border-radius: 999px;
       font-size: 11px;
       font-weight: 700;
       line-height: 1;
       white-space: nowrap;
     }

     .priority-badge--urgent {
       background: #fff4e5;
       color: #9a3412;
     }

     .priority-badge--very-urgent {
       background: #fee2e2;
       color: #991b1b;
     }

     .approval-badge {
       background: #dff7e7;
       color: #166534;
     }

     .approval-card__customer {
       font-weight: 800;
       color: #ffffff;
       line-height: 1.35;
     }

     .approval-card__top {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 8px;
       /* was too large */
       min-height: 0;
     }

     .approval-card__top-left,
     .approval-card__top-right {
       display: flex;
       align-items: center;
       gap: 6px;
       min-height: 0;
       /* remove forced tall row */
     }

     .priority-badge,
     .approval-badge {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 3px 8px;
       /* smaller */
       border-radius: 999px;
       font-size: 10px;
       /* smaller */
       font-weight: 700;
       line-height: 1;
       white-space: nowrap;
     }

     .approval-card__actions {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 10px;
     }

     .approval-card__btn--reject {
       background: #fef2f2;
       color: #b91c1c;
       border: 1px solid #fecaca;
     }

     .approval-card__btn--reject:hover {
       background: #fee2e2;
     }

     .approval-card__btn--approve {
       background: #ecfdf5;
       color: #047857;
       border: 1px solid #a7f3d0;
     }

     .approval-card__btn--approve:hover {
       background: #d1fae5;
     }

     .approval-card__actions form {
       margin: 0;
     }

     .approval-card__actions--single {
       grid-template-columns: 1fr;
     }

     .approval-card__btn {
       width: 100%;
       min-height: 44px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       border-radius: 12px;
       border: 1px solid #dbe3ee;
       background: #ffffff;
       color: #111827;
       font-size: 0.9rem;
       font-weight: 700;
       padding: 10px 14px;
       cursor: pointer;
       transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease;
       box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     }

     .approval-card__btn:hover {
       transform: translateY(-1px);
       box-shadow: 0 6px 14px rgba(16, 24, 40, 0.08);
     }

     .approval-card__btn svg {
       width: 16px;
       height: 16px;
       flex-shrink: 0;
     }

     .approval-card__btn--approve {
       background: #ecfdf3;
       border-color: #b7ebc6;
       color: #166534;
     }

     .approval-card__btn--approve:hover {
       background: #ddfbe8;
       border-color: #92ddb0;
     }

     .approval-card__btn--reject {
       background: #fef2f2;
       border-color: #fecaca;
       color: #b42318;
     }

     .approval-card__btn--reject:hover {
       background: #fee2e2;
       border-color: #fca5a5;
     }

     .approval-card__btn--issue {
       background: #eff6ff;
       border-color: #bfdbfe;
       color: #1d4ed8;
     }

     .approval-card__btn--issue:hover {
       background: #dbeafe;
       border-color: #93c5fd;
     }

     .priority-badge {
       display: inline-flex;
       align-items: center;
       width: fit-content;
       border-radius: 999px;
       padding: 5px 10px;
       font-size: 12px;
       font-weight: 800;
       letter-spacing: 0.02em;
     }

     .priority-badge--urgent {
       background: #fff7e6;
       color: #b45309;
       border: 1px solid #fde7b3;
     }

     .priority-badge--very-urgent {
       background: #fef2f2;
       color: #b42318;
       border: 1px solid #fecaca;
     }

     .approval-board__empty {
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 160px;
       background: #ffffff;
       border: 1px dashed #d7dfeb;
       border-radius: 18px;
       color: #667085;
       font-size: 15px;
       font-weight: 600;
     }

     .action-chip {
       height: 24px;
       padding: 0 10px;
       border-radius: 999px;
       border: 1px solid rgba(15, 90, 107, 0.12);

       display: inline-flex;
       align-items: center;
       justify-content: center;

       cursor: pointer;

       font-size: 11px;
       font-weight: 600;
       letter-spacing: 0.2px;

       text-decoration: none;

       transition: all 140ms ease;
     }

     .action-chip--primary {
       background: #e6f4f7;
       color: #0f5a6b;
       border: 1px solid rgba(15, 90, 107, 0.15);

       box-shadow: none;
     }

     /* Hover */
     .action-chip--primary:hover {
       background: #d8edf2;
       color: #0d4e5d;
       transform: translateY(-1px);
     }

     /* Active */
     .action-chip--primary:active {
       transform: translateY(0);
       background: #cfe6ec;
     }

     .switch {
       position: relative;
       display: inline-block;
       width: 34px;
       height: 18px;
     }

     .switch input {
       opacity: 0;
       width: 0;
       height: 0;
     }

     .slider {
       position: absolute;
       inset: 0;
       background-color: #e5e7eb;
       border-radius: 999px;
       transition: all 180ms ease;
     }

     .slider::before {
       content: "";
       position: absolute;
       height: 14px;
       width: 14px;
       left: 2px;
       top: 2px;

       background: #ffffff;
       border-radius: 50%;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

       transition: all 180ms ease;
     }

     /* Checked state */
     .switch input:checked+.slider {
       background: #137a8f;
     }

     .switch input:checked+.slider::before {
       transform: translateX(16px);
     }

     /* Subtle hover */
     .switch:hover .slider {
       background: #d1d5db;
     }

     .switch input:checked:hover+.slider {
       background: #116b7d;
     }

     .ticket-card__footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
     }

     .recorded-toggle {
       display: flex;
       align-items: center;
       gap: 8px;

       font-size: 11px;
       font-weight: 600;
       color: #6b7280;
     }

     .form-label {
       display: flex;
       flex-direction: column;
       gap: 4px;

       font-size: 12.5px;
       font-weight: 700;
       color: #172033;
     }

     .form-hint {
       font-size: 11px;
       font-weight: 500;
       color: #667085;
     }

     .req {
       color: #dc2626;
       margin-left: 2px;
     }

     .form-label {
       display: flex;
       flex-direction: column;
       gap: 4px;
     }

     .form-label__top {
       display: inline-flex;
       align-items: center;
       gap: 4px;

       font-size: 12.5px;
       font-weight: 700;
       color: #172033;
     }

     .req {
       color: #dc2626;
       font-size: 12px;
     }

     .form-hint {
       font-size: 11px;
       font-weight: 500;
       color: #667085;
     }

     /* PAGE */
     .approval-board {
       padding: 20px 24px;
       background: #f4f7fb;
     }

     .approval-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(260px, 260px));
       gap: 18px;
     }

     /* CARD */
     .approval-card {
       background: #ffffff;
       border: 1px solid #dbe3ef;
       border-radius: 18px;
       padding: 14px;
       min-height: 330px;

       display: flex;
       flex-direction: column;
       gap: 12px;

       box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
       transition: all 0.15s ease;
     }

     .approval-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
     }

     /* URGENCY LEFT BORDER */
     .approval-card--urgent {
       border-left: 4px solid #f59e0b;
     }

     .approval-card--very-urgent {
       border-left: 4px solid #ef4444;
     }

     /* TOP */
     .approval-card__top {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
     }

     .approval-card__top-left {
       display: flex;
       flex-direction: column;
       gap: 4px;
     }

     /* TEXT */
     .approval-card__customer {
       font-size: 0.95rem;
       font-weight: 800;
       color: #0f172a;
     }

     .approval-card__date {
       font-size: 0.8rem;
       font-weight: 600;
       color: #64748b;
     }

     .approval-card__job {
       font-size: 0.9rem;
       font-weight: 800;
       color: #1e293b;
     }

     .approval-card__vendor {
       font-size: 0.85rem;
       font-weight: 600;
       color: #475569;
       margin-bottom: 6px;
     }

     /* BADGES */
     .priority-badge {
       display: inline-flex;
       align-items: center;
       padding: 4px 10px;
       border-radius: 999px;
       font-size: 0.7rem;
       font-weight: 800;
       width: fit-content;
     }

     .priority-badge--urgent {
       background: #fff7ed;
       color: #c2410c;
       border: 1px solid #fdba74;
     }

     .priority-badge--very-urgent {
       background: #fef2f2;
       color: #b91c1c;
       border: 1px solid #fca5a5;
     }

     /* ITEMS */
     .approval-card__items-label {
       font-size: 0.7rem;
       font-weight: 800;
       color: #64748b;
       text-transform: uppercase;
       margin-bottom: 4px;
     }

     .approval-card__items-value {
       font-size: 0.85rem;
       color: #0f172a;
     }

     /* FINANCIALS */
     .approval-card__financials {
       margin-top: auto;
       padding-top: 10px;
       border-top: 1px solid #e6ecf3;
       display: grid;
       gap: 6px;
     }

     .approval-card__financial-row {
       display: flex;
       justify-content: space-between;
     }

     .approval-card__label {
       font-size: 0.72rem;
       font-weight: 800;
       color: #64748b;
       text-transform: uppercase;
     }

     .approval-card__value {
       font-size: 0.85rem;
       font-weight: 800;
       color: #0f172a;
     }

     /* ACTIONS */
     .approval-card__actions {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 10px;
       margin-top: 10px;
     }

     .approval-card__actions--single {
       grid-template-columns: 1fr;
     }

     .approval-card__btn {
       width: 100%;
       min-height: 38px;
       border-radius: 10px;
       font-size: 0.82rem;
       font-weight: 800;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       cursor: pointer;
       border: 1px solid transparent;
       transition: all 0.15s ease;
     }

     /* BUTTONS */
     .approval-card__btn--reject {
       background: #fff1f2;
       color: #be123c;
       border: 1px solid #fecdd3;
     }

     .approval-card__btn--reject:hover {
       background: #ffe4e6;
     }

     .approval-card__btn--approve {
       background: #2563eb;
       color: #ffffff;
     }

     .approval-card__btn--approve:hover {
       background: #1d4ed8;
     }

     .approval-card__btn--issue {
       background: #2563eb;
       color: #ffffff;
     }

     .approval-card__btn--issue:hover {
       background: #1d4ed8;
     }

     /* EMPTY */
     .approval-board__empty {
       background: #ffffff;
       border: 1px dashed #cbd5e1;
       color: #64748b;
       border-radius: 16px;
       padding: 24px;
       text-align: center;
       font-weight: 700;
     }

     .approval-card__top {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 6px;
       margin-bottom: 6px;
       /* reduces space below header */
     }

     .approval-card__top-left {
       display: flex;
       flex-direction: column;
       gap: 2px;
       /* tighter spacing */
     }

     .approval-card__customer {
       font-size: 0.9rem;
       font-weight: 800;
       margin: 0;
       /* remove default spacing */
     }

     .approval-card__date {
       font-size: 0.8rem;
       color: #64748b;
       margin: 0;
       line-height: 1.2;
     }

     .approval-card__job {
       margin-top: 4px;
       margin-bottom: 2px;
     }

     .approval-card__vendor {
       margin: 0;
     }

     .approval-card__header {
       display: flex;
       flex-direction: column;
       gap: 2px;
       margin-bottom: 6px;
     }

     .approval-card {
       background: #ffffff;
       border: 1px solid #dbe3ef;
       border-radius: 18px;
       padding: 14px;
       display: flex;
       flex-direction: column;
       gap: 8px;
       box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
     }

     .approval-card--urgent {
       border-left: 4px solid #f59e0b;
     }

     .approval-card--very-urgent {
       border-left: 4px solid #ef4444;
     }

     .approval-card__top {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
       margin-bottom: 2px;
     }

     .approval-card__meta {
       display: flex;
       flex-direction: column;
       gap: 2px;
     }

     .priority-badge {
       display: inline-flex;
       align-items: center;
       padding: 4px 10px;
       border-radius: 999px;
       font-size: 0.7rem;
       font-weight: 800;
       line-height: 1;
       width: fit-content;
     }

     .priority-badge--urgent {
       background: #fff7ed;
       color: #c2410c;
       border: 1px solid #fdba74;
     }

     .priority-badge--very-urgent {
       background: #fef2f2;
       color: #b91c1c;
       border: 1px solid #fca5a5;
     }

     .approval-card__customer {
       font-size: 0.92rem;
       font-weight: 800;
       color: #334155;
       line-height: 1.2;
       margin: 0;
     }

     .approval-card__date {
       font-size: 0.8rem;
       font-weight: 700;
       color: #64748b;
       line-height: 1.2;
       margin: 0;
     }

     .approval-card__job {
       font-size: 0.95rem;
       font-weight: 800;
       color: #1e293b;
       line-height: 1.15;
       margin: 0;
     }

     .approval-card__vendor {
       font-size: 0.85rem;
       font-weight: 700;
       color: #475569;
       line-height: 1.15;
       margin: 0 0 2px 0;
     }

     .approval-card__items {
       margin-top: 2px;
     }

     .approval-card__items-label {
       font-size: 0.7rem;
       font-weight: 800;
       color: #64748b;
       text-transform: uppercase;
       margin-bottom: 4px;
     }

     .approval-card__items-value {
       font-size: 0.85rem;
       color: #0f172a;
     }

     .approval-card__financials {
       margin-top: 8px;
       padding-top: 10px;
       border-top: 1px solid #e6ecf3;
       display: grid;
       gap: 6px;
     }

     .approval-card__financial-row {
       display: flex;
       justify-content: space-between;
     }

     .approval-card__label {
       font-size: 0.72rem;
       font-weight: 800;
       color: #64748b;
       text-transform: uppercase;
     }

     .approval-card__value {
       font-size: 0.85rem;
       font-weight: 800;
       color: #0f172a;
     }

     .approval-card {
       background: #ffffff;
       border: 1px solid #dbe3ef;
       border-radius: 18px;
       padding: 14px;
       display: flex;
       flex-direction: column;
       gap: 8px;
       box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
     }

     .approval-card--urgent {
       border-left: 4px solid #f59e0b;
     }

     .approval-card--very-urgent {
       border-left: 4px solid #ef4444;
     }

     .approval-card__top {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
       margin-bottom: 2px;
     }

     .approval-card__meta {
       display: flex;
       flex-direction: column;
       gap: 2px;
     }

     .priority-badge {
       display: inline-flex;
       align-items: center;
       padding: 4px 10px;
       border-radius: 999px;
       font-size: 0.7rem;
       font-weight: 800;
       line-height: 1;
       width: fit-content;
     }

     .approval-card__top-right {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 4px 10px;
       border-radius: 999px;
       font-size: 0.7rem;
       font-weight: 800;
       line-height: 1;
       width: fit-content;
       min-height: 24px;
     }

     .priority-badge--urgent {
       background: #fff7ed;
       color: #c2410c;
       border: 1px solid #fdba74;
     }

     .priority-badge--very-urgent {
       background: #fef2f2;
       color: #b91c1c;
       border: 1px solid #fca5a5;
     }

     .approval-badge {
       background: #dff7e7;
       color: #166534;
       border: 1px solid #a2d7b5;
       font-size: 11px;
       font-weight: 700;
       line-height: 1;
       white-space: nowrap;
       flex: 0 0 auto;
       display: inline-flex;
       align-items: center;
       padding: 4px 10px;
       border-radius: 999px;
       font-size: 0.7rem;
       font-weight: 800;
       line-height: 1;
       width: fit-content;
     }

     .approval-card__customer {
       font-size: 0.92rem;
       font-weight: 800;
       color: #334155;
       line-height: 1.2;
       margin: 0;
     }

     .approval-card__date {
       font-size: 0.8rem;
       font-weight: 700;
       color: #64748b;
       line-height: 1.2;
       margin: 0;
     }

     .approval-card__job {
       font-size: 0.95rem;
       font-weight: 800;
       color: #1e293b;
       line-height: 1.15;
       margin: 0;
     }

     .approval-card__vendor {
       font-size: 0.85rem;
       font-weight: 700;
       color: #475569;
       line-height: 1.15;
       margin: 0 0 2px 0;
     }

     .approval-card__items {
       margin-top: 2px;
     }

     .approval-card__items-label {
       font-size: 0.7rem;
       font-weight: 800;
       color: #64748b;
       text-transform: uppercase;
       margin-bottom: 4px;
     }

     .approval-card__items-value {
       font-size: 0.85rem;
       color: #0f172a;
     }

     .approval-card__financials {
       margin-top: 8px;
       padding-top: 10px;
       border-top: 1px solid #e6ecf3;
       display: grid;
       gap: 6px;
     }

     .approval-card__financial-row {
       display: flex;
       justify-content: space-between;
     }

     .approval-card__label {
       font-size: 0.72rem;
       font-weight: 800;
       color: #64748b;
       text-transform: uppercase;
     }

     .approval-card__value {
       font-size: 0.85rem;
       font-weight: 800;
       color: #0f172a;
     }

     .approval-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(260px, 260px));
       gap: 18px;
       align-items: stretch;
       /* 🔥 important */
     }

     .approval-card__actions {
       margin-top: auto;
       /* 🔥 anchors buttons */
     }

     .approval-card {
       height: 100%;
       /* 🔥 key */
       display: flex;
       flex-direction: column;
     }

     .approval-card {
       min-height: 340px;
     }

     .approval-card__body {
       display: flex;
       flex-direction: column;
       gap: 8px;
     }

     .approval-card__financials {
       margin-top: auto;
       /* 🔥 THIS is the magic */
     }

     .approval-card__actions {
       margin-top: 10px;
     }

     .approval-card__top {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 12px;
     }

     .approval-card__top-left,
     .approval-card__top-right {
       display: flex;
       align-items: center;
       gap: 8px;
     }

     .approval-card__date {
       margin: 0;
     }

     .approval-card__date {
       margin-top: -10px;
     }

     body {
       background-color: #f5f7fb;
       /* clean light gray */
     }

     .approval-card__top {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 4px;
     }

     .approval-card__top-left,
     .approval-card__top-right {
       margin: 0;
       padding: 0;
     }

     .priority-badge,
     .approval-badge {
       margin: 0;
     }

     .approval-card__date,
     .approval-card__customer,
     .approval-card__top p,
     .approval-card__top h1,
     .approval-card__top h2,
     .approval-card__top h3,
     .approval-card__top h4,
     .approval-card__top h5,
     .approval-card__top h6 {
       margin: 0;
     }

     .hidden {
       display: none;
     }

     .reject-reason textarea {
       width: 100%;
       min-height: 80px;
       margin-top: 8px;
       padding: 8px;
       border-radius: 8px;
       border: 1px solid #d1d5db;
     }

     .reject-reason {
       display: flex;
       flex-direction: column;
       gap: 10px;
       margin-top: 10px;
     }

     .reject-reason textarea {
       width: 100%;
       min-height: 100px;
       padding: 10px;
       border-radius: 10px;
       border: 1px solid #d1d5db;
       resize: vertical;
       box-sizing: border-box;
     }

     .approval-card__btn--reject {
       align-self: flex-start;
       /* prevents stretching weirdly */
     }

     .reject-reason {
       display: block;
       margin-top: 12px;
     }

     .reject-reason textarea {
       display: block;
       width: 100%;
       min-height: 110px;
       padding: 12px;
       margin-bottom: 12px;

       border: 1px solid #d1d5db;
       border-radius: 10px;
       box-sizing: border-box;

       font-size: 14px;
       resize: vertical;
     }

     /* Force button BELOW and full width */
     .reject-reason .approval-card__btn--reject {
       display: block;
       width: 100%;
       text-align: center;
     }

     .reject-form {
       display: flex;
       flex-direction: column;
       gap: 12px;
     }

     .reject-reason textarea {
       width: 100%;
       min-height: 100px;
       padding: 10px;
       border-radius: 10px;
       border: 1px solid #d1d5db;
       box-sizing: border-box;
     }

     .reject-reason button {
       width: 100%;
     }

     .approval-card__actions {
       margin-top: 14px;
     }

     .approval-card__action-row {
       display: flex;
       gap: 10px;
       align-items: stretch;
     }

     .reject-form,
     .approve-form {
       flex: 1 1 0;
       margin: 0;
     }

     .reject-form>.approval-card__btn,
     .approve-form>.approval-card__btn {
       width: 100%;
     }

     .reject-reason {
       margin-top: 12px;
       width: 100%;
     }

     .reject-reason textarea {
       display: block;
       width: 100%;
       min-height: 110px;
       padding: 12px;
       margin: 0 0 10px 0;
       border: 1px solid #d1d5db;
       border-radius: 12px;
       box-sizing: border-box;
       resize: vertical;
       font: inherit;
     }

     .reject-reason .approval-card__btn {
       width: 100%;
     }

     .approval-card__btn--reject {
       align-self: stretch;
     }

     .reject-form {
       width: 100%;
     }

     .reject-reason {
       display: none;
       margin-top: 10px;
       width: 100%;
     }

     .reject-reason textarea {
       display: block;
       width: 100%;
       min-height: 80px;
       padding: 12px;
       border: 1px solid #d1d5db;
       border-radius: 12px;
       box-sizing: border-box;
       resize: vertical;
       margin-bottom: 12px;
       font-size: 12px;
     }

     .reject-reason .approval-card__btn {
       display: block;
       width: 100%;
     }

     .approval-card__actions {
       display: flex;
       flex-direction: column;
       gap: 12px;
     }

     .approval-card__actions>form {
       width: 100%;
     }

     .po-attachments {
       display: grid;
       gap: 18px;
     }

     .po-attachment-card {
       border: 1px solid #22324a;
       border-radius: 16px;
       background: #0f1724;
       padding: 18px;
     }

     .po-attachment-top {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 16px;
       flex-wrap: wrap;
     }

     .po-attachment-info {
       min-width: 0;
     }

     .po-attachment-label {
       font-size: 15px;
       font-weight: 600;
       color: #e5eefc;
       margin-bottom: 6px;
     }

     .po-attachment-status {
       font-size: 14px;
       font-weight: 600;
       margin-bottom: 4px;
     }

     .po-attachment-status--attached {
       color: #7dd3fc;
     }

     .po-attachment-status--missing {
       color: #94a3b8;
     }

     .po-attachment-name {
       font-size: 13px;
       color: #9fb3c8;
     }

     .po-attachment-actions {
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
     }

     .po-attachment-upload {
       margin-top: 14px;
       padding-top: 14px;
       border-top: 1px solid #1c2940;
     }

     .po-attachment-upload label {
       display: block;
       margin-bottom: 8px;
       font-size: 13px;
       font-weight: 600;
       color: #cbd5e1;
     }

     .po-attachment-help {
       margin-top: 8px;
       font-size: 12px;
       color: #8ea3ba;
     }

     .po-file-input {
       width: 100%;
     }

     .po-attachments {
       display: grid;
       gap: 18px;
     }

     .po-attachment-card {
       border: 1px solid #e2e8f0;
       border-radius: 14px;
       background: #ffffff;
       padding: 18px;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
     }

     .po-attachment-top {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 16px;
       flex-wrap: wrap;
     }

     .po-attachment-label {
       font-size: 15px;
       font-weight: 600;
       color: #1e293b;
       margin-bottom: 6px;
     }

     .po-attachment-status {
       font-size: 14px;
       font-weight: 600;
       margin-bottom: 4px;
     }

     .po-attachment-status--attached {
       color: #2563eb;
     }

     .po-attachment-status--missing {
       color: #64748b;
     }

     .po-attachment-name {
       font-size: 13px;
       color: #64748b;
     }

     .po-attachment-actions {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
     }

     /* Upload section */
     .po-attachment-upload {
       margin-top: 14px;
       padding-top: 14px;
       border-top: 1px solid #f1f5f9;
     }

     .po-attachment-upload label {
       display: block;
       margin-bottom: 6px;
       font-size: 13px;
       font-weight: 600;
       color: #334155;
     }

     .po-attachment-help {
       margin-top: 6px;
       font-size: 12px;
       color: #64748b;
     }

     /* File input (cleaner) */
     .po-file-input {
       width: 100%;
       padding: 8px;
       border: 1px solid #e2e8f0;
       border-radius: 8px;
       background: #f8fafc;
       font-size: 13px;
     }

     .po-attachments {
       display: grid;
       gap: 18px;
     }

     .po-attachment-card {
       border: 1px solid #e2e8f0;
       border-radius: 16px;
       background: #ffffff;
       padding: 20px;
       box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
     }

     .po-attachment-top {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 16px;
       flex-wrap: wrap;
       margin-bottom: 12px;
     }

     .po-attachment-info {
       min-width: 0;
       flex: 1;
     }

     .po-attachment-label {
       font-size: 15px;
       font-weight: 700;
       color: #1e293b;
       margin-bottom: 6px;
     }

     .po-attachment-status {
       font-size: 14px;
       font-weight: 600;
       margin-bottom: 4px;
     }

     .po-attachment-status--attached {
       color: #1d4ed8;
     }

     .po-attachment-status--missing {
       color: #64748b;
     }

     .po-attachment-name {
       font-size: 13px;
       line-height: 1.5;
       color: #64748b;
     }

     .po-attachment-actions {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
     }

     .po-attachment-upload {
       margin-top: 4px;
       padding-top: 14px;
       border-top: 1px solid #e5e7eb;
     }

     .po-attachment-upload label {
       display: block;
       margin-bottom: 8px;
       font-size: 13px;
       font-weight: 600;
       color: #334155;
     }

     .po-attachment-help {
       margin-top: 8px;
       font-size: 12px;
       color: #64748b;
     }

     .po-file-input {
       width: 100%;
       padding: 10px 12px;
       border: 1px solid #dbe3ee;
       border-radius: 10px;
       background: #f8fafc;
       font-size: 13px;
       color: #334155;
       box-sizing: border-box;
     }

     .po-file-input:hover {
       border-color: #cbd5e1;
       background: #f1f5f9;
     }

     .action-chip-pdf {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-height: 36px;
       padding: 0 14px;
       border-radius: 999px;
       font-size: 13px;
       font-weight: 600;
       text-decoration: none;
       transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
     }

     .action-chip-pdf--primary {
       background: #2563eb;
       color: #ffffff;
       border: 1px solid #2563eb;
     }

     .action-chip-pdf--primary:hover {
       background: #1d4ed8;
       border-color: #1d4ed8;
     }

     .action-chip-pdf--neutral {
       background: #f8fafc;
       color: #334155;
       border: 1px solid #dbe3ee;
     }

     .action-chip-pdf--neutral:hover {
       background: #eef2f7;
       border-color: #cbd5e1;
     }

     @media (max-width: 640px) {
       .po-attachment-top {
         flex-direction: column;
         align-items: stretch;
       }

       .po-attachment-actions {
         width: 100%;
       }

       .po-attachment-actions .action-chip {
         flex: 1;
       }
     }

     body.po-page-light {
       margin: 0;
       background: #f4f6f8;
       color: #1f2937;
       font-family: Arial, Helvetica, sans-serif;
     }

     .po-template-wrap {
       padding: 18px 22px 28px;
     }

     .po-template-card {
       background: #fff;
       border: 1px solid #d7dde5;
       box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     }

     .po-template-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 12px 16px;
       border-bottom: 1px solid #d7dde5;
       background: #fafbfc;
     }

     .po-template-title {
       font-size: 18px;
       font-weight: 500;
       color: #111827;
     }

     .po-template-title-group {
       display: flex;
       align-items: center;
       gap: 10px;
     }

     .po-status-badge {
       display: inline-flex;
       align-items: center;
       padding: 3px 10px;
       border-radius: 999px;
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.03em;
       white-space: nowrap;
     }

     .po-status-badge--pending {
       background: #dbeafe;
       color: #1e40af;
     }

     .po-status-badge--received {
       background: #e0f2fe;
       color: #075985;
     }

     .po-status-badge--approved {
       background: #dcfce7;
       color: #166534;
     }

     .po-status-badge--revise {
       background: #fce7f3;
       color: #9d174d;
     }

     .po-status-badge--neutral {
       background: #f1f5f9;
       color: #475569;
     }

     .po-template-repeat-btn {
       height: 32px;
       padding: 0 12px;
       border: 1px solid #cfd6df;
       background: #fff;
       color: #1f2937;
       border-radius: 3px;
       font-size: 13px;
       cursor: pointer;
     }

     .po-template-repeat-btn:hover {
       background: #f8fafc;
     }

     .po-template-body {
       padding: 18px 16px 8px;
     }

     .po-template-grid {
       display: grid;
       gap: 18px 26px;
       margin-bottom: 18px;
     }

     .po-template-grid--2 {
       grid-template-columns: 1fr 1fr;
     }

     .po-template-grid--3 {
       grid-template-columns: 1fr 1fr 2fr;
     }

     .po-template-grid--4 {
       grid-template-columns: 1fr 1fr 1fr 1fr;
     }

     .po-template-grid--textarea {
       align-items: start;
     }

     .po-template-field {
       min-width: 0;
     }

     .po-template-field label {
       display: block;
       margin-bottom: 7px;
       font-size: 13px;
       font-weight: 600;
       color: #1f2937;
     }

     .req {
       color: #c62828;
     }

     .po-template-field input,
     .po-template-field select,
     .po-template-field textarea {
       width: 100%;
       box-sizing: border-box;
       border: 1px solid #cfd6df;
       border-radius: 2px;
       background: #fff;
       color: #111827;
       font-size: 14px;
       padding: 8px 10px;
       outline: none;
       transition: border-color 0.15s ease, box-shadow 0.15s ease;
     }

     .po-template-field input,
     .po-template-field select {
       height: 32px;
     }

     .po-template-field textarea {
       min-height: 84px;
       resize: vertical;
       line-height: 1.45;
     }

     .po-template-field input:focus,
     .po-template-field select:focus,
     .po-template-field textarea:focus {
       border-color: #0070d2;
       box-shadow: 0 0 0 1px #0070d2;
     }

     .po-template-checkline {
       display: flex;
       align-items: center;
       gap: 8px;
       height: 32px;
     }

     .po-check-label {
       margin: 0;
       font-size: 14px;
       font-weight: 400;
       color: #374151;
     }

     .po-template-inline-check {
       display: flex;
       align-items: center;
       gap: 14px;
     }

     .po-template-inline-check>input[type="text"] {
       flex: 1;
     }

     .po-template-inline-option {
       display: inline-flex !important;
       align-items: center;
       gap: 8px;
       margin: 0 !important;
       font-size: 14px !important;
       font-weight: 400 !important;
       white-space: nowrap;
       color: #374151 !important;
     }

     .po-template-inline-option input {
       width: auto;
       height: auto;
       margin: 0;
     }

     .po-template-counter {
       margin-top: 6px;
       font-size: 12px;
       color: #0ea5e9;
     }

     .po-template-subsection {
       margin-top: 20px;
       border-top: 1px solid #e5e7eb;
       padding-top: 18px;
     }

     .po-template-subsection-title {
       margin-bottom: 12px;
       font-size: 14px;
       font-weight: 700;
       color: #111827;
     }

     .po-template-attach-box {
       border: 1px solid #d7dde5;
       background: #fcfcfd;
       border-radius: 2px;
       padding: 12px;
     }

     .po-template-attach-meta {
       margin-bottom: 10px;
     }

     .po-template-attach-label {
       font-size: 13px;
       font-weight: 700;
       color: #111827;
       margin-bottom: 4px;
     }

     .po-template-attach-status {
       font-size: 13px;
       margin-bottom: 6px;
     }

     .po-template-attach-status--ok {
       color: #0f766e;
     }

     .po-template-attach-status--missing {
       color: #b45309;
     }

     .po-template-attach-actions {
       display: flex;
       gap: 12px;
     }

     .po-template-attach-actions a {
       font-size: 13px;
       color: #0070d2;
       text-decoration: none;
     }

     .po-template-attach-actions a:hover {
       text-decoration: underline;
     }

     .po-template-action-bar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       margin-top: 16px;
       padding: 14px 20px;
       background: #fff;
       border: 1px solid #d7dde5;
       border-radius: 8px;
       box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     }

     .po-template-action-bar__status {
       font-size: 13px;
       font-weight: 700;
       letter-spacing: 0.02em;
       text-transform: uppercase;
       color: #64748b;
     }

     .po-template-action-bar__actions {
       display: flex;
       gap: 10px;
     }

     .po-template-btn--cancel {
       background: #fff;
       color: darkred;
       border-color: #ff6c71;
     }

     .po-template-btn--cancel:hover {
       background: #fff5f5;
     }

     .po-template-footer {
       display: flex;
       justify-content: flex-end;
       gap: 10px;
       padding: 14px 16px;
       border-top: 1px solid #d7dde5;
       background: #fafbfc;
     }

     .po-template-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       box-sizing: border-box;
       min-width: 88px;
       height: 34px;
       padding: 0 16px;
       border-radius: 18px;
       font-size: 14px;
       cursor: pointer;
       border: 1px solid transparent;
       text-decoration: none;
     }

     .po-template-btn--ghost {
       background: #fff;
       color: #1f2937;
       border-color: #cfd6df;
     }

     .po-template-btn--ghost:hover {
       background: #f9fafb;
     }

     .po-template-btn--primary {
       background: #12a150;
       color: #fff;
       border-color: #12a150;
     }

     .po-template-btn--primary:hover {
       background: #0f8a45;
       border-color: #0f8a45;
     }

     @media (max-width: 1200px) {
       .po-template-grid--4 {
         grid-template-columns: 1fr 1fr;
       }

       .po-template-grid--3 {
         grid-template-columns: 1fr 1fr;
       }
     }

     @media (max-width: 760px) {

       .po-template-grid--2,
       .po-template-grid--3,
       .po-template-grid--4 {
         grid-template-columns: 1fr;
       }

       .po-template-inline-check {
         flex-direction: column;
         align-items: stretch;
       }

       .po-template-footer {
         flex-direction: column-reverse;
       }

       .po-template-btn {
         width: 100%;
       }
     }

     .po-template-grid--1 {
       grid-template-columns: 1fr;
     }

     .hidden {
       display: none !important;
     }

     .po-template-delivery-row {
       display: grid;
       grid-template-columns: 1fr;
       margin-bottom: 18px;
     }

     .po-template-delivery-row .po-template-field {
       min-width: 0;
     }

     .hidden {
       display: none !important;
     }

     body.po-page-light {
       margin: 0;
       background: #f4f6f8;
       color: #1f2937;
       font-family: Arial, Helvetica, sans-serif;
     }

     .po-template-wrap {
       padding: 18px 22px 28px;
     }

     .po-template-card {
       background: #fff;
       border: 1px solid #d7dde5;
       box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     }

     .po-template-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 12px 16px;
       border-bottom: 1px solid #d7dde5;
       background: #fafbfc;
     }

     .po-template-title {
       font-size: 18px;
       font-weight: 500;
       color: #111827;
     }

     .po-template-body {
       padding: 18px 16px 8px;
     }

     .po-template-grid {
       display: grid;
       gap: 18px 26px;
       margin-bottom: 18px;
     }

     .po-template-grid--1 {
       grid-template-columns: 1fr;
     }

     .po-template-grid--2 {
       grid-template-columns: 1fr 1fr;
     }

     .po-template-grid--3 {
       grid-template-columns: 1fr 1fr 1fr;
     }

     .po-template-grid--4 {
       grid-template-columns: repeat(4, 1fr);
     }

     .po-template-grid--textarea {
       align-items: start;
     }

     .po-template-field,
     .po-field,
     .field {
       min-width: 0;
     }

     .po-template-field label,
     .po-field label,
     .field label {
       display: block;
       margin-bottom: 7px;
       font-size: 13px;
       font-weight: 600;
       color: #1f2937;
     }

     .req {
       color: #c62828;
     }

     .po-template-field input,
     .po-template-field select,
     .po-template-field textarea,
     .po-field input,
     .po-field select,
     .po-field textarea,
     .field input,
     .field select,
     .field textarea {
       width: 100%;
       box-sizing: border-box;
       border: 1px solid #cfd6df;
       border-radius: 2px;
       background: #fff;
       color: #111827;
       font-size: 14px;
       padding: 8px 10px;
       outline: none;
       transition: border-color 0.15s ease, box-shadow 0.15s ease;
     }

     .po-template-field input,
     .po-template-field select,
     .po-field input,
     .po-field select,
     .field input,
     .field select {
       min-height: 36px;
     }

     .po-template-field textarea,
     .po-field textarea,
     .field textarea {
       min-height: 96px;
       resize: vertical;
       line-height: 1.45;
     }

     .po-template-field input:focus,
     .po-template-field select:focus,
     .po-template-field textarea:focus,
     .po-field input:focus,
     .po-field select:focus,
     .po-field textarea:focus,
     .field input:focus,
     .field select:focus,
     .field textarea:focus {
       border-color: #0070d2;
       box-shadow: 0 0 0 1px #0070d2;
     }

     .po-template-delivery-row {
       display: grid;
       grid-template-columns: 1fr;
       margin-bottom: 18px;
     }

     .po-template-subsection {
       margin-top: 18px;
       padding-top: 4px;
     }

     .po-template-subsection-title {
       margin-bottom: 12px;
       font-size: 14px;
       font-weight: 700;
       color: #111827;
     }

     .po-template-attachments-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
     }

     .po-template-attach-card {
       border: 1px solid #d7dde5;
       background: #fcfcfd;
       border-radius: 3px;
       padding: 14px;
       display: flex;
       flex-direction: column;
       gap: 14px;
       min-width: 0;
     }

     .po-template-attach-card__top {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 14px;
     }

     .po-template-attach-card__info {
       min-width: 0;
     }

     .po-template-attach-card__label {
       font-size: 13px;
       font-weight: 700;
       color: #111827;
       margin-bottom: 4px;
     }

     .po-template-attach-card__status {
       font-size: 13px;
       font-weight: 600;
       margin-bottom: 4px;
     }

     .po-template-attach-card__status--attached {
       color: #0f766e;
     }

     .po-template-attach-card__status--missing {
       color: #b45309;
     }

     .po-template-attach-card__name {
       font-size: 13px;
       color: #4b5563;
       line-height: 1.4;
     }

     .po-template-attach-card__actions {
       flex-shrink: 0;
     }

     .po-template-link-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-height: 32px;
       padding: 0 12px;
       border: 1px solid #cfd6df;
       background: #fff;
       color: #2563eb;
       text-decoration: none;
       border-radius: 3px;
       font-size: 13px;
       font-weight: 600;
     }

     .po-template-link-btn:hover {
       background: #f8fafc;
     }

     .po-template-attach-card__upload label {
       display: block;
       margin-bottom: 7px;
       font-size: 13px;
       font-weight: 600;
       color: #1f2937;
     }

     .po-template-attach-card__help {
       margin-top: 8px;
       font-size: 12px;
       color: #6b7280;
     }

     .po-file-input {
       width: 100%;
       box-sizing: border-box;
       border: 1px solid #cfd6df;
       background: #fff;
       border-radius: 2px;
       padding: 8px 10px;
       font-size: 13px;
     }

     .po-template-footer {
       display: flex;
       justify-content: flex-end;
       gap: 10px;
       padding: 14px 16px;
       border-top: 1px solid #d7dde5;
       background: #fafbfc;
     }

     .po-template-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       box-sizing: border-box;
       min-width: 88px;
       height: 34px;
       padding: 0 16px;
       border-radius: 18px;
       font-size: 14px;
       cursor: pointer;
       border: 1px solid transparent;
       text-decoration: none;
     }

     .po-template-btn--ghost {
       background: #fff;
       color: #1f2937;
       border-color: #cfd6df;
     }

     .po-template-btn--ghost:hover {
       background: #f9fafb;
     }

     .po-template-btn--primary {
       background: #12a150;
       color: #fff;
       border-color: #12a150;
     }

     .po-template-btn--primary:hover {
       background: #0f8a45;
       border-color: #0f8a45;
     }

     @media (max-width: 1100px) {
       .po-template-grid--4 {
         grid-template-columns: 1fr 1fr;
       }

       .po-template-grid--3 {
         grid-template-columns: 1fr 1fr;
       }

       .po-template-attachments-grid {
         grid-template-columns: 1fr;
       }
     }

     @media (max-width: 760px) {

       .po-template-grid--1,
       .po-template-grid--2,
       .po-template-grid--3,
       .po-template-grid--4 {
         grid-template-columns: 1fr;
       }

       .po-template-attach-card__top,
       .po-template-footer,
       .po-template-header {
         flex-direction: column;
         align-items: stretch;
       }

       .po-template-btn {
         width: 100%;
       }
     }

     .po-template-grid--align-end {
       align-items: end;
     }

     .po-template-field,
     .po-field,
     .field {
       min-width: 0;
     }

     .po-template-field label,
     .po-field label,
     .field label {
       display: block;
       margin-bottom: 7px;
       font-size: 13px;
       font-weight: 600;
       color: #1f2937;
     }

     .po-template-field input,
     .po-template-field select,
     .po-template-field textarea,
     .po-field input,
     .po-field select,
     .po-field textarea,
     .field input,
     .field select,
     .field textarea {
       width: 100%;
       box-sizing: border-box;
       border: 1px solid #cfd6df;
       border-radius: 2px;
       background: #fff;
       color: #111827;
       font-size: 14px;
       padding: 8px 10px;
       outline: none;
       transition: border-color 0.15s ease, box-shadow 0.15s ease;
     }

     .po-template-field input,
     .po-template-field select,
     .po-field input,
     .po-field select,
     .field input,
     .field select {
       min-height: 42px;
     }

     .po-template-field input[type="date"],
     .po-field input[type="date"],
     .field input[type="date"] {
       min-height: 42px;
       padding: 8px 12px;
     }

     .po-template-field input:focus,
     .po-template-field select:focus,
     .po-template-field textarea:focus,
     .po-field input:focus,
     .po-field select:focus,
     .po-field textarea:focus,
     .field input:focus,
     .field select:focus,
     .field textarea:focus {
       border-color: #0070d2;
       box-shadow: 0 0 0 1px #0070d2;
     }

     .po-template-grid--header {
       display: grid;
       grid-template-columns: 320px 320px minmax(260px, 1fr);
       gap: 18px 26px;
       margin-bottom: 18px;
       align-items: end;
     }

     .po-template-field input[type="date"],
     .po-template-field select,
     .po-template-field input[type="text"] {
       min-height: 42px;
     }

     .po-template-field input[type="date"] {
       padding: 8px 12px;
     }

     .po-template-grid--3-equal {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 18px 26px;
       margin-bottom: 18px;
       align-items: end;
     }

     .ticket-print-page {
       page-break-before: always;
       break-before: page;
     }

     .ticket-print-page:first-child {
       page-break-before: auto;
       break-before: auto;
     }

     input[type="checkbox"] {
       appearance: none;
       -webkit-appearance: none;
       width: 16px;
       height: 16px;
       border: 1.5px solid #cbd5e1;
       border-radius: 4px;
       background-color: #fff;
       cursor: pointer;
       display: inline-block;
       position: relative;
     }

     /* checked state */
     input[type="checkbox"]:checked {
       background-color: #0f766e;
       border-color: #0f766e;
     }

     /* checkmark */
     input[type="checkbox"]:checked::after {
       content: "";
       position: absolute;
       left: 4px;
       top: 1px;
       width: 4px;
       height: 8px;
       border: solid #fff;
       border-width: 0 2px 2px 0;
       transform: rotate(45deg);
     }

     /* remove ALL focus shadows */
     input[type="checkbox"]:focus,
     input[type="checkbox"]:focus-visible {
       outline: none;
       box-shadow: none;
     }

     /* disabled */
     input[type="checkbox"]:disabled {
       opacity: 0.5;
       cursor: not-allowed;
     }

     .po-template-field input.billing-format-radio,
     .po-field input.billing-format-radio,
     .field input.billing-format-radio,
     input.billing-format-radio {
       appearance: none;
       -webkit-appearance: none;
       width: 16px;
       height: 16px;
       min-height: 0;
       box-sizing: border-box;
       border: 1.5px solid #cbd5e1;
       border-radius: 50%;
       background: #fff;
       padding: 0;
       cursor: pointer;
       display: inline-block;
       position: relative;
       margin: 0;
       flex: none;
     }

     .po-template-field input.billing-format-radio:checked,
     input.billing-format-radio:checked {
       border-color: #0f766e;
     }

     .po-template-field input.billing-format-radio:checked::after,
     input.billing-format-radio:checked::after {
       content: "";
       position: absolute;
       top: 3px;
       left: 3px;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background-color: #0f766e;
     }

     .po-template-field input.billing-format-radio:focus,
     .po-template-field input.billing-format-radio:focus-visible,
     input.billing-format-radio:focus,
     input.billing-format-radio:focus-visible {
       outline: none;
       box-shadow: none;
     }

     .panel-actions .filters--inline {
       display: flex;
       align-items: center;
       gap: 1rem;
     }

     .checkbox-inline {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 0.95rem;
       color: #374151;
     }

     .panel-actions .po-btn {
       height: 36px;
       padding: 0 0.9rem;
       font-size: 0.9rem;
     }

     .po-btn:disabled {
       opacity: 0.5;
       cursor: not-allowed;
     }

     .panel-header--split {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
       margin-bottom: 0.85rem;
     }

     .panel-actions {
       display: flex;
       align-items: center;
       gap: 0.85rem;
       flex-wrap: nowrap;
     }

     .checkbox-inline {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       margin: 0;
       font-size: 0.95rem;
       color: #374151;
       white-space: nowrap;
     }

     .checkbox-inline span {
       white-space: nowrap;
     }

     .panel-actions .po-btn {
       height: 38px;
       padding: 0 1rem;
       border-radius: 12px;
       font-size: 0.92rem;
       font-weight: 700;
       white-space: nowrap;
     }

     .po-btn:disabled {
       opacity: 0.55;
       cursor: not-allowed;
       box-shadow: none;
     }

     @media (max-width: 900px) {
       .panel-header--split {
         flex-direction: column;
         align-items: flex-start;
       }

       .panel-actions {
         width: 100%;
         justify-content: flex-start;
         flex-wrap: wrap;
       }
     }

     .tickets-grid {
       display: grid;
       grid-template-columns: 1fr 1.2fr;
       gap: 1.5rem;

       /* THIS is the fix */
       align-items: start;
     }

     .tickets-grid {
       display: flex;
       gap: 1.5rem;

       /* THIS is the fix */
       align-items: flex-start;
     }

     .panel-header {
       margin-bottom: 0.5rem;
     }

     .card {
       margin-top: 0;
     }

     /* wrapper */
     .search-wrapper {
       position: relative;
       width: 100%;
       max-width: 320px;
     }

     /* input */
     .search-wrapper input {
       width: 100%;
       height: 40px;
       padding: 0 0.9rem 0 2.3rem;

       border: 1px solid #e2e8f0;
       border-radius: 12px;

       background: #f8fafc;
       color: #111827;
       font-size: 0.95rem;

       outline: none;
       transition: all 0.2s ease;
     }

     /* placeholder */
     .search-wrapper input::placeholder {
       color: #94a3b8;
     }

     /* focus state (subtle, no glow) */
     .search-wrapper input:focus {
       background: #ffffff;
       border-color: #0f766e;
     }

     /* icon */
     .search-wrapper .search-icon {
       position: absolute;
       left: 0.75rem;
       top: 50%;
       transform: translateY(-50%);
       fill: #94a3b8;
       width: 14px;
       height: 14px;
       pointer-events: none;
     }

     /* slight hover polish */
     .search-wrapper input:hover {
       border-color: #cbd5e1;
     }

     /* optional: make it align nicely with header */
     .card-toolbar {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       padding: 0.75rem 1rem;
       border-bottom: 1px solid #eef2f7;
     }

     /* =====================================================
        MODERN PO REDESIGN — all six improvements
        ===================================================== */

     /* 1. COLLAPSIBLE LANES
        -------------------------------------------------- */
     .lane__toggle {
       background: none;
       border: none;
       cursor: pointer;
       color: #64748b;
       font-size: 18px;
       line-height: 1;
       padding: 2px 4px;
       border-radius: 6px;
       transition: transform 200ms ease, color 150ms ease;
       flex-shrink: 0;
     }

     .lane__toggle:hover {
       color: #334155;
     }

     .lane--collapsed .lane__toggle {
       transform: rotate(-90deg);
     }

     .lane--collapsed .lane__body {
       display: none;
     }

     .lane--collapsed .lane__accent {
       margin-bottom: 0;
     }

     .lane--collapsed {
       min-height: auto;
     }

     /* 2. STATUS PILLS WITH COLORED DOTS
        -------------------------------------------------- */
     .po-pill-v2 {
       gap: 6px;
     }

     .po-pill-v2::before {
       content: '';
       display: inline-block;
       width: 7px;
       height: 7px;
       border-radius: 50%;
       flex-shrink: 0;
     }

     .po-pill-v2--completed::before {
       background: #16a34a;
     }

     .po-pill-v2--received::before {
       background: #3b82f6;
     }

     .po-pill-v2--drafting::before {
       background: #f86939;
     }

     .po-pill-v2--muted::before {
       background: #94a3b8;
     }

     .ticket-state {
       gap: 5px;
     }

     .ticket-state::before {
       content: '';
       display: inline-block;
       width: 6px;
       height: 6px;
       border-radius: 50%;
       flex-shrink: 0;
     }

     .ticket-state--requested::before {
       background: #a855f7;
     }

     .ticket-state--received::before {
       background: #3b82f6;
     }

     .ticket-state--drafting::before {
       background: #f86939;
     }

     .ticket-state--completed::before {
       background: #16a34a;
     }

     .ticket-state--approved::before {
       background: #8b5cf6;
     }

     .ticket-state--issued::before {
       background: #6b7280;
     }

     .ticket-state--rejected::before {
       background: #ef4444;
     }

     /* 3. STICKY FORM NAV SIDEBAR
        -------------------------------------------------- */
     .po-form-layout {
       display: grid;
       grid-template-columns: 180px 1fr;
       gap: 28px;
       max-width: 1100px;
       margin: 28px auto 48px;
       padding: 0 16px;
       align-items: start;
     }

     .po-form-nav {
       position: sticky;
       top: 80px;
       background: #fff;
       border: 1px solid #e2e8f0;
       border-radius: 16px;
       padding: 16px 12px;
       box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
     }

     .po-form-nav__title {
       font-size: 11px;
       font-weight: 800;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: #94a3b8;
       padding: 0 8px;
       margin-bottom: 10px;
     }

     .po-form-nav__link {
       display: block;
       padding: 8px 10px;
       border-radius: 10px;
       font-size: 13px;
       font-weight: 600;
       color: #475569;
       text-decoration: none;
       transition: background 120ms ease, color 120ms ease;
       margin-bottom: 2px;
     }

     .po-form-nav__link:hover {
       background: #f1f5f9;
       color: #1e293b;
     }

     .po-form-nav__link.is-active {
       background: #0f5a6b;
       color: #fff;
     }

     @media (max-width: 860px) {
       .po-form-layout {
         grid-template-columns: 1fr;
       }

       .po-form-nav {
         display: none;
       }
     }

     /* 4. IMPROVED EMPTY STATES
        -------------------------------------------------- */
     .lane-empty {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 8px;
       padding: 28px 14px;
     }

     .lane-empty__icon {
       width: 36px;
       height: 36px;
       color: #cbd5e1;
     }

     .lane-empty__text {
       font-size: 13px;
       color: #94a3b8;
       font-weight: 600;
     }

     .po-empty-v2 {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
     }

     .po-empty-v2__icon {
       width: 32px;
       height: 32px;
       color: #cbd5e1;
       margin-bottom: 4px;
     }

     /* 6. TABLE CARD-LIST ROWS
        -------------------------------------------------- */
     .po-table-v2__body tr {
       transition: box-shadow 120ms ease, transform 120ms ease;
     }

     .po-table-v2__row:hover td {
       background: #f5f9ff;
     }

     .po-table-v2__row:hover {
       box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
       position: relative;
       z-index: 1;
     }

     .po-table-v2__status {
       font-size: 12px;
     }

     .po-edit-btn-v2 {
       width: 30px;
       height: 30px;
       background: #f1f5f9;
       border-radius: 8px;
     }

     .po-edit-btn-v2:hover {
       background: #dbeafe;
       color: #1d4ed8;
     }

     /* ── po_confirm page ─────────────────────────────────── */
     .po-alert {
       padding: 12px 16px;
       border-radius: 8px;
       margin-bottom: 16px;
       font-size: 14px;
     }

     .po-alert--error {
       background: #fef2f2;
       color: #b91c1c;
       border: 1px solid #fecaca;
     }

     .po-alert--success {
       background: #f0fdf4;
       color: #15803d;
       border: 1px solid #bbf7d0;
     }

     .po-alert--warning {
       background: #fffbeb;
       color: #92400e;
       border: 1px solid #fde68a;
     }

     .po-alert--warning a {
       color: #92400e;
       font-weight: 700;
     }

     .po-head-meta {
       display: flex;
       gap: 0;
       margin-top: 4px;
       font-size: 13px;
       color: #64748b;
     }

     .po-head-meta span::before {
       content: '·';
       margin-left: 6px;
       margin-right: 6px;
     }

     .po-head-meta span:first-child::before {
       content: '';
       margin-left: 0;
       margin-right: 0;
     }

     /* Receipt status radio cards */
     .po-confirm-radio-group {
       display: flex;
       gap: 12px;
       flex-wrap: nowrap;
     }

     .po-confirm-radio {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 14px 18px;
       border: 2px solid #e2e8f0;
       border-radius: 10px;
       cursor: pointer;
       transition: border-color 0.15s, background 0.15s;
       background: #fff;
       flex: 1;
       min-width: 0;
     }

     .po-confirm-radio input[type="radio"] {
       display: none;
     }

     .po-confirm-radio:hover {
       border-color: #94a3b8;
     }

     .po-confirm-radio--active {
       border-color: #2563eb;
       background: #eff6ff;
     }

     .po-confirm-radio-icon {
       font-size: 20px;
       line-height: 1;
     }

     .po-confirm-radio-icon--received {
       color: #16a34a;
     }

     .po-confirm-radio-icon--partial {
       color: #d97706;
     }

     .po-confirm-radio-icon--not-received {
       color: #dc2626;
     }

     .po-confirm-radio-label {
       font-size: 14px;
       font-weight: 500;
       color: #1e293b;
     }

     /* Completed toggle */
     .po-confirm-toggle-row {
       padding: 4px 0;
     }

     .po-confirm-toggle {
       display: inline-flex;
       align-items: center;
       gap: 12px;
       cursor: pointer;
     }

     .po-confirm-toggle input[type="checkbox"] {
       display: none;
     }

     .po-confirm-toggle-track {
       position: relative;
       width: 44px;
       height: 24px;
       background: #cbd5e1;
       border-radius: 9999px;
       transition: background 0.2s;
       flex-shrink: 0;
     }

     .po-confirm-toggle input:checked+.po-confirm-toggle-track {
       background: #2563eb;
     }

     .po-confirm-toggle-thumb {
       position: absolute;
       top: 3px;
       left: 3px;
       width: 18px;
       height: 18px;
       background: #fff;
       border-radius: 50%;
       transition: transform 0.2s;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     }

     .po-confirm-toggle input:checked~.po-confirm-toggle-track .po-confirm-toggle-thumb,
     .po-confirm-toggle input:checked+.po-confirm-toggle-track .po-confirm-toggle-thumb {
       transform: translateX(20px);
     }

     .po-confirm-toggle-text {
       font-size: 14px;
       font-weight: 500;
       color: #1e293b;
     }

     #partial-return-section {
       margin-top: 20px;
     }

     .po-confirm-shell {
       max-width: 1650px;
     }

     #rental-details-section .po-section {
       border-top: 1px solid #dde5ef;
       margin-top: 28px;
       padding-top: 22px;
     }

     #rentalDetailsTable input[type="date"] {
       width: auto;
       max-width: 140px;
     }

     /* Delivery / Return two-column layout */
     .po-confirm-cols {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0 32px;
       align-items: start;
       margin-top: 28px;
     }

     .po-confirm-cols--full {
       grid-template-columns: minmax(0, 480px);
       justify-content: center;
     }

     .po-confirm-cols--full .po-confirm-left {
       grid-column: 1;
     }

     @media (max-width: 768px) {
       .po-confirm-cols {
         grid-template-columns: 1fr;
       }
     }

     .po-confirm-left {
       grid-column: 1;
     }

     .po-confirm-right {
       grid-column: 2;
     }

     #partial-delivery-section,
     #partial-return-section {
       grid-column: 1 / -1;
       margin-top: 28px;
       padding-top: 22px;
       border-top: 1px solid #dde5ef;
     }

     #partial-delivery-section {
       grid-row: 3;
     }

     #partial-return-section {
       grid-row: 4;
     }

     .po-confirm-partial-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0 32px;
       align-items: start;
     }

     @media (max-width: 768px) {
       .po-confirm-partial-row {
         grid-template-columns: 1fr;
       }
     }

     /* Uploaded docs list */
     .po-confirm-docs-columns {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 24px;
       align-items: start;
     }

     .po-confirm-docs-columns--full {
       grid-template-columns: minmax(0, 480px);
       justify-content: center;
     }

     @media (max-width: 640px) {
       .po-confirm-docs-columns {
         grid-template-columns: 1fr;
       }
     }

     .po-confirm-docs-col {
       text-align: center;
     }

     .po-confirm-docs-col .po-file-input {
       width: auto;
       display: inline-block;
     }

     .po-confirm-docs-list {
       text-align: left;
     }

     .po-confirm-docs-col-label {
       font-size: 15px;
       font-weight: 700;
       color: #0f172a;
       margin-bottom: 12px;
       text-align: center;
     }

     .po-confirm-docs-list {
       margin-top: 16px;
       border: 1px solid #e2e8f0;
       border-radius: 10px;
       overflow: hidden;
     }

     .po-confirm-docs-header {
       padding: 10px 16px;
       background: #f8fafc;
       font-size: 12px;
       font-weight: 600;
       color: #64748b;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       border-bottom: 1px solid #e2e8f0;
     }

     .po-confirm-doc-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       border-bottom: 1px solid #f1f5f9;
     }

     .po-confirm-doc-row:last-child {
       border-bottom: none;
     }

     .po-confirm-doc-info {
       display: flex;
       flex-direction: column;
       gap: 2px;
       min-width: 0;
     }

     .po-confirm-doc-name {
       font-size: 13px;
       font-weight: 500;
       color: #1e293b;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .po-confirm-doc-meta {
       font-size: 11px;
       color: #94a3b8;
     }

     /* po_incomplete */
     .po-incomplete-shell {
       max-width: 1500px;
     }

     .po-incomplete-heading-row {
       display: flex;
       align-items: flex-end;
       gap: 16px;
       padding-bottom: 4px;
     }

     .po-incomplete-count {
       display: inline-flex;
       align-items: center;
       background: #fee2e2;
       color: #dc2626;
       font-size: 12px;
       font-weight: 700;
       padding: 4px 12px;
       border-radius: 20px;
       letter-spacing: 0.03em;
       margin-bottom: 6px;
     }

     .po-incomplete-table-wrap {
       margin-top: 8px;
       border: 1px solid #e2e8f0;
       border-radius: 10px;
       overflow: hidden;
     }

     .po-incomplete-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 13px;
     }

     .po-incomplete-table thead tr {
       background: #f8fafc;
       border-bottom: 1px solid #e2e8f0;
     }

     .po-incomplete-table thead th {
       padding: 10px 16px;
       text-align: left;
       font-size: 11px;
       font-weight: 600;
       color: #64748b;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       white-space: nowrap;
     }

     .po-incomplete-table tbody tr {
       border-bottom: 1px solid #f1f5f9;
       transition: background 0.1s;
     }

     .po-incomplete-table tbody tr:last-child {
       border-bottom: none;
     }

     .po-incomplete-table tbody tr:hover {
       background: #f8fafc;
     }

     .po-incomplete-table td {
       padding: 13px 16px;
       color: #1e293b;
       vertical-align: middle;
     }

     .po-incomplete-td--po {
       font-weight: 600;
       white-space: nowrap;
     }

     .po-incomplete-td--job {
       white-space: nowrap;
       color: #475569;
     }

     .po-incomplete-td--vendor {
       color: #475569;
       max-width: 220px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }

     .po-incomplete-td--type {
       white-space: nowrap;
       color: #64748b;
       font-size: 12px;
     }

     .po-incomplete-td--action {
       text-align: right;
       white-space: nowrap;
     }

     .po-incomplete-empty {
       padding: 56px 32px;
       text-align: center;
       color: #94a3b8;
       font-size: 14px;
     }

     .po-incomplete-empty-icon {
       font-size: 28px;
       color: #16a34a;
       margin-bottom: 10px;
     }

     .po-incomplete-complete-btn {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       padding: 5px 12px;
       border: 1.5px solid #16a34a;
       border-radius: 20px;
       background: #fff;
       color: #16a34a;
       font-size: 12px;
       font-weight: 600;
       cursor: pointer;
       white-space: nowrap;
       transition: background 0.15s, color 0.15s;
     }

     .po-incomplete-complete-btn:hover {
       background: #16a34a;
       color: #fff;
     }

     .po-incomplete-open-btn {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       padding: 5px 14px;
       border-radius: 6px;
       background: #1a2a4a;
       color: #fff;
       font-size: 12px;
       font-weight: 600;
       text-decoration: none;
       white-space: nowrap;
       transition: background 0.15s;
     }

     .po-incomplete-open-btn:hover {
       background: #243a63;
     }

     .po-incomplete-search-form {
       margin: 0 0 20px 0;
     }

     .po-incomplete-search-row {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       align-items: flex-end;
     }

     .po-incomplete-search-field {
       display: flex;
       flex-direction: column;
       gap: 4px;
       flex: 1 1 160px;
       min-width: 140px;
     }

     .po-incomplete-search-label {
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: #6b7280;
     }

     .po-incomplete-search-input {
       padding: 7px 10px;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       font-size: 13px;
       color: #111827;
       background: #fff;
       outline: none;
       transition: border-color 0.15s;
     }

     .po-incomplete-search-input:focus {
       border-color: #2d4a8a;
       box-shadow: 0 0 0 2px rgba(45, 74, 138, 0.12);
     }

     /* The submitted-date range is two inputs presented as ONE field: the box,
        the border and the focus ring live on the wrapper, and the inputs
        inside are stripped bare. Two separately bordered controls under two
        labels read as two unrelated filters, when they are two ends of a
        single one.

        They stay two native date inputs rather than one parsed text field --
        that keeps each end's picker, its locale-formatted display, and the
        start_date / end_date parameters the handler already reads, so this is
        a presentation change only.

        The wrapper needs a wider basis than a plain field: it holds two date
        inputs, and at 160px they would each be too narrow to show mm/dd/yyyy. */
     .po-search-field--range {
       flex: 1 1 300px;
       min-width: 260px;
     }

     .po-search-range {
       display: flex;
       align-items: center;
       gap: 4px;
       padding: 0 8px;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       background: #fff;
       transition: border-color 0.15s;
     }

     .po-search-range:focus-within {
       border-color: #2d4a8a;
       box-shadow: 0 0 0 2px rgba(45, 74, 138, 0.12);
     }

     .po-search-range__input {
       flex: 1 1 0;
       min-width: 0;
       padding: 7px 0;
       border: none;
       outline: none;
       background: none;
       font-family: inherit;
       font-size: 13px;
       color: #111827;
     }

     .po-search-range__sep {
       color: #9ca3af;
       font-size: 13px;
     }

     .po-incomplete-search-actions {
       display: flex;
       gap: 8px;
       align-items: flex-end;
       padding-bottom: 1px;
     }

     .po-incomplete-search-btn {
       padding: 7px 18px;
       background: #2d4a8a;
       color: #fff;
       border: none;
       border-radius: 6px;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.15s;
     }

     .po-incomplete-search-btn:hover {
       background: #243a63;
     }

     .po-incomplete-clear-btn {
       padding: 7px 14px;
       background: #f3f4f6;
       color: #374151;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       font-size: 13px;
       font-weight: 500;
       text-decoration: none;
       cursor: pointer;
       transition: background 0.15s;
     }

     .po-incomplete-clear-btn:hover {
       background: #e5e7eb;
     }

     .po-status-chip {
       display: inline-block;
       padding: 3px 10px;
       border-radius: 20px;
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 0.03em;
     }

     .po-status-chip--received {
       background: #dcfce7;
       color: #16a34a;
     }

     .po-status-chip--partial {
       background: #fef9c3;
       color: #a16207;
     }

     .po-status-chip--not-received {
       background: #fee2e2;
       color: #dc2626;
     }

     .po-status-chip--on-rent {
       background: #e0f2fe;
       color: #0369a1;
     }

     .po-status-chip--none {
       color: #94a3b8;
       background: none;
       padding: 0;
     }

     /* Rental extension columns & inline form */
     .po-table-v2__ext-count {
       text-align: center;
       white-space: nowrap;
     }

     .po-extend-btn {
       background: none;
       border: 1px solid #3b82f6;
       color: #3b82f6;
       border-radius: 4px;
       padding: 2px 10px;
       font-size: 0.78rem;
       cursor: pointer;
       font-weight: 500;
       transition: background 0.15s, color 0.15s;
     }

     .po-extend-btn:hover {
       background: #3b82f6;
       color: #fff;
     }

     /* Rental tracker table column widths (13 columns) */
     .rental-tracker-wrap .csv-table th:nth-child(1),
     .rental-tracker-wrap .csv-table td:nth-child(1) {
       width: 8%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(2),
     .rental-tracker-wrap .csv-table td:nth-child(2) {
       width: 8%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(3),
     .rental-tracker-wrap .csv-table td:nth-child(3) {
       width: 8%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(4),
     .rental-tracker-wrap .csv-table td:nth-child(4) {
       width: 7%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(5),
     .rental-tracker-wrap .csv-table td:nth-child(5) {
       width: 10%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(6),
     .rental-tracker-wrap .csv-table td:nth-child(6) {
       width: 8%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(7),
     .rental-tracker-wrap .csv-table td:nth-child(7) {
       width: 8%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(8),
     .rental-tracker-wrap .csv-table td:nth-child(8) {
       width: 8%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(9),
     .rental-tracker-wrap .csv-table td:nth-child(9) {
       width: 9%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(10),
     .rental-tracker-wrap .csv-table td:nth-child(10) {
       width: 6%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(11),
     .rental-tracker-wrap .csv-table td:nth-child(11) {
       width: 7%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(12),
     .rental-tracker-wrap .csv-table td:nth-child(12) {
       width: 8%;
     }

     .rental-tracker-wrap .csv-table th:nth-child(13),
     .rental-tracker-wrap .csv-table td:nth-child(13) {
       width: 5%;
     }

     /* Sticky header + frozen first two columns (Customer, Job ID) --
        scoped to this page's table only, .csv-table itself stays untouched
        for every other page that reuses it. */
     .rental-tracker-wrap {
       max-height: 72vh;
       overflow: auto;
     }

     .rental-tracker-wrap .csv-table thead th {
       position: sticky;
       top: 0;
       z-index: 3;
     }

     .rental-tracker-wrap .csv-table th:nth-child(1),
     .rental-tracker-wrap .csv-table td:nth-child(1) {
       position: sticky;
       left: 0;
       z-index: 1;
     }

     .rental-tracker-wrap .csv-table th:nth-child(2),
     .rental-tracker-wrap .csv-table td:nth-child(2) {
       position: sticky;
       left: 8%;
       z-index: 1;
     }

     /* Customer and Job ID are sticky (pinned during horizontal scroll), so
        they cannot be transparent -- rows would scroll visibly underneath
        them. They used to carry their own colours for that: white, plus a
        repeated copy of the zebra stripe, plus a separate hover shade. Three
        chances to drift from the row they belong to, and they did -- the
        pinned columns read as a different table.

        `background: inherit` takes the row's own computed background instead,
        so band, hover and any future row state apply to these cells
        automatically and cannot disagree. It stays opaque because every row
        now carries an explicit PO band colour. */
     .rental-tracker-wrap .csv-table td:nth-child(1),
     .rental-tracker-wrap .csv-table td:nth-child(2) {
       background: inherit;
     }

     .rental-tracker-wrap .csv-table thead th:nth-child(1),
     .rental-tracker-wrap .csv-table thead th:nth-child(2) {
       z-index: 4;
       background: #f3f5f7;
     }

     /* Softer borders, a more visible hover, a touch more breathing room,
        and a smaller base font than the shared .csv-table default -- scoped
        here so other pages that reuse .csv-table are unaffected. */
     .rental-tracker-wrap .csv-table {
       font-size: 0.7rem;
     }

     .rental-tracker-wrap .csv-table thead th {
       font-size: 0.62rem;
       border-bottom-color: #e2e8f0;
       border-right-color: #eef1f6;
     }

     .rental-tracker-wrap .csv-table tbody td {
       padding: 8px 9px;
       border-bottom-color: #eef1f6;
       border-right-color: #eef1f6;
     }

     .rental-tracker-wrap .csv-table tbody tr:hover {
       background: #eff6ff;
     }

     .rt-filterable-cell {
       cursor: pointer;
     }

     .rt-filterable-cell:hover {
       text-decoration: underline;
       color: #2563eb;
     }

     /* Excel-style column sort/filter header (rt-col) */
     .rt-col__head {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 4px;
     }

     .rt-col__label {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }

     .rt-col__menu-btn {
       flex: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 16px;
       height: 16px;
       padding: 0;
       border: none;
       border-radius: 3px;
       background: transparent;
       color: #9ca3af;
       cursor: pointer;
       font-size: 9px;
     }

     .rt-col__menu-btn:hover,
     .rt-col__menu-btn:focus-visible {
       background: #e5e7eb;
       color: #374151;
     }

     .rt-col__menu-btn.is-active {
       color: #2563eb;
     }

     .rt-filter-popover {
       position: fixed;
       z-index: 500;
       width: 220px;
       background: #fff;
       border: 1px solid #d1d5db;
       border-radius: 8px;
       box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       font-size: 0.78rem;
       color: #1f2937;
       overflow: hidden;
     }

     .rt-filter-popover__sort {
       display: flex;
       flex-direction: column;
       padding: 4px;
       border-bottom: 1px solid #e5e7eb;
     }

     .rt-filter-popover__sort-btn {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 6px 8px;
       border: none;
       background: transparent;
       text-align: left;
       border-radius: 5px;
       cursor: pointer;
       font-size: 0.78rem;
       color: #1f2937;
     }

     .rt-filter-popover__sort-btn:hover {
       background: #eff6ff;
     }

     .rt-filter-popover__sort-btn.is-active {
       color: #2563eb;
       font-weight: 600;
     }

     .rt-filter-popover__search {
       padding: 6px 8px;
       border-bottom: 1px solid #e5e7eb;
     }

     .rt-filter-popover__search input {
       width: 100%;
       box-sizing: border-box;
       padding: 5px 7px;
       border: 1px solid #d1d5db;
       border-radius: 5px;
       font-size: 0.76rem;
     }

     .rt-filter-popover__list {
       max-height: 190px;
       overflow-y: auto;
       padding: 4px 8px;
     }

     .rt-filter-popover__option {
       display: flex;
       align-items: center;
       gap: 7px;
       padding: 3px 0;
       font-size: 0.76rem;
       cursor: pointer;
     }

     .rt-filter-popover__option input {
       margin: 0;
     }

     .rt-filter-popover__option span {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }

     .rt-filter-popover__option--select-all {
       border-bottom: 1px solid #eef1f6;
       margin-bottom: 3px;
       padding-bottom: 6px;
       font-weight: 600;
     }

     .rt-filter-popover__empty {
       padding: 8px 0;
       color: #9ca3af;
       font-size: 0.74rem;
     }

     .rt-filter-popover__actions {
       display: flex;
       gap: 6px;
       padding: 8px;
       border-top: 1px solid #e5e7eb;
     }

     .rt-filter-popover__actions button {
       flex: 1;
       padding: 6px 0;
       border-radius: 5px;
       border: 1px solid #d1d5db;
       background: #fff;
       font-size: 0.76rem;
       cursor: pointer;
     }

     .rt-filter-popover__actions button.rt-filter-popover__apply {
       background: #2563eb;
       border-color: #2563eb;
       color: #fff;
       font-weight: 600;
     }

     .rt-filter-popover__actions button:hover {
       filter: brightness(0.97);
     }

     .rental-tracker__group-toggle {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 0;
       border: none;
       background: none;
       cursor: pointer;
       font-family: inherit;
       font-size: inherit;
       color: inherit;
       text-align: left;
     }

     .rental-tracker__group-toggle i {
       font-size: 0.65rem;
       color: #7e22ce;
       transition: transform 0.15s;
     }

     .rental-tracker__group-toggle.is-open i {
       transform: rotate(90deg);
     }

     .rental-tracker__group-hint-btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 0;
       border: none;
       background: none;
       cursor: pointer;
       font-family: inherit;
       font-size: 11px;
       color: #111827;
       white-space: nowrap;
     }

     .rental-tracker__group-hint-btn i {
       font-size: 0.65rem;
       color: #7e22ce;
       transition: transform 0.15s;
     }

     .rental-tracker__group-hint-btn.is-open i {
       transform: rotate(90deg);
     }

     .rental-tracker__group-count {
       color: #6b7280;
       font-size: 0.65rem;
     }

     .rental-tracker__child-row .rental-tracker__item-cell {
       padding-left: 20px;
       color: #6b7280;
     }

     /* ── Banding by PO ───────────────────────────────────────────────────
        Every row of one PO shares a background; the next PO gets the other
        one. That replaces per-row zebra striping, which sliced a multi-item
        PO into alternating stripes and made its rows read as unrelated.

        The band is set on the ROW only. The sticky Customer/Job ID cells pick
        it up through `background: inherit` (see the note above
        .csv-table td:nth-child(1)), so there is exactly one declaration per
        band and the pinned columns cannot drift from the rest of the row.

        The selectors carry the extra .rental-tracker-wrap .csv-table
        qualification to outrank .csv-table tbody tr:nth-child(even)'s zebra
        rule, which is declared later in this file -- without it every other
        row would silently fall back to the stripe colour. */
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--po-0 {
       background: #ffffff;
     }

     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--po-1 {
       background: #e8edf3;
     }

     /* Hover has to out-rank the band rules above: the generic row-hover rule
        is declared earlier at identical specificity, so without naming the
        band class it would lose and hovering would do nothing. */
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--po-0:hover,
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--po-1:hover {
       background: #e0ecff;
     }

     /* The group summary row sits inside its PO's band but reads as a header
        for the items beneath it. */
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__group-summary {
       font-weight: 600;
     }


     .rental-tracker__more-details-toggle {
       display: flex;
       align-items: center;
       gap: 8px;
       margin: 6px 0 4px;
       padding: 0;
       border: none;
       background: none;
       color: #7e22ce;
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       cursor: pointer;
     }

     .rental-tracker__more-details-toggle:hover {
       color: #6b21a8;
       text-decoration: underline;
     }

     .rental-tracker__more-details-toggle i {
       transition: transform 0.15s;
     }

     .rental-tracker__more-details-toggle i.is-open {
       transform: rotate(90deg);
     }

     .rental-tracker-wrap td:last-child {
       text-align: center;
     }

     .rental-tracker__top-actions {
       display: flex;
       align-items: center;
       gap: 10px;
     }

     .rental-tracker__header {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 16px;
       margin-bottom: 16px;
     }

     .rental-tracker__subtitle {
       margin: 4px 0 0;
       color: #64748b;
       font-size: 13px;
     }

     .rental-tracker__summary-cards {
       display: grid;
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 12px;
       margin-bottom: 16px;
     }

     .rental-tracker__card {
       display: block;
       padding: 14px 16px;
       background: #fff;
       border: 1px solid #eef1f6;
       border-radius: 10px;
       text-decoration: none;
       transition: border-color 0.15s, box-shadow 0.15s;
     }

     .rental-tracker__card:hover {
       border-color: #cbd5e1;
       box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
     }

     .rental-tracker__card-value {
       font-size: 26px;
       font-weight: 700;
       color: #111827;
       font-variant-numeric: tabular-nums;
     }

     .rental-tracker__card-label {
       margin-top: 2px;
       color: #64748b;
       font-size: 12px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.04em;
     }

     .rental-tracker__card--overdue .rental-tracker__card-value {
       color: #b91c1c;
     }

     .rental-tracker__card--due-soon .rental-tracker__card-value {
       color: #b45309;
     }

     .rental-tracker__card--missing .rental-tracker__card-value {
       color: #475569;
     }

     .rental-tracker-asset-input {
       width: 100%;
       min-width: 0;
       box-sizing: border-box;
       padding: 3px 6px;
       border: 1px solid #d1d5db;
       border-radius: 4px;
       font-size: 0.7rem;
       font-family: inherit;
       color: #1f2937;
       background: #fff;
     }

     .rental-tracker-asset-input:focus {
       outline: none;
       border-color: #2563eb;
       box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
     }

     .rental-tracker-date-input {
       width: 100%;
       min-width: 0;
       box-sizing: border-box;
       padding: 3px 4px;
       border: 1px solid #d1d5db;
       border-radius: 4px;
       font-size: 0.68rem;
       font-family: inherit;
       color: #1f2937;
       background: #fff;
     }

     .rental-tracker-date-input:focus {
       outline: none;
       border-color: #2563eb;
       box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
     }

     /* Item name over its purchase category, matching the goods-receipt
        table's treatment so the same line item reads the same way on both
        pages. */
     .rental-tracker__item-name {
       display: block;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }

     .rental-tracker__item-cat {
       display: block;
       margin-top: 2px;
       font-size: 0.62rem;
       font-weight: 500;
       color: var(--th-text-subtle);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }

     .rental-tracker__period {
       font-size: 11px;
       white-space: nowrap;
     }

     .rental-tracker__ext-info {
       color: #92722a;
       font-size: 8px;
       cursor: help;
     }

     .rental-tracker__request-btn {
       flex: 0 0 auto;
       padding: 7px 16px;
       background: #1e3a8a;
       color: #fff;
       border: none;
       border-radius: 6px;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.15s;
       white-space: nowrap;
       margin-bottom: 1px;
     }

     .rental-tracker__request-btn:hover {
       background: #1e2f6e;
     }

     .rental-tracker__save-btn {
       display: inline-flex;
       align-items: center;
       gap: 7px;
       flex: 0 0 auto;
       padding: 10px 21px;
       background: #ffa126;
       color: black;
       border: solid;
       border-radius: 6px;
       font-size: 13px;
       font-weight: 700;
       cursor: pointer;
       transition: background 0.15s, box-shadow 0.15s;
       white-space: nowrap;
       box-shadow: 0 1px 3px rgba(220, 76, 31, 0.4);
     }

     .rental-tracker__save-btn:hover {
       background: #ea8500;
     }

     .rental-tracker-wrap tr.rental-tracker__row--overdue td:first-child {
       box-shadow: inset 3px 0 0 #dc2626;
     }

     /* Status badges -- semantic color, independent of the page's navy/purple
        accents. */
     .rental-tracker__badge {
       display: inline-flex;
       align-items: center;
       padding: 2px 8px;
       border-radius: 999px;
       font-size: 10px;
       font-weight: 700;
       white-space: nowrap;
     }

     .rental-tracker__badge--overdue {
       background: #fef2f2;
       color: #b91c1c;
     }

     .rental-tracker__badge--due_today {
       background: #fff7ed;
       color: #c2410c;
     }

     .rental-tracker__badge--due_soon {
       background: #fffbeb;
       color: #b45309;
     }

     .rental-tracker__badge--active {
       background: #f0fdf4;
       color: #15803d;
     }

     .rental-tracker__badge--returned {
       background: #f1f5f9;
       color: #475569;
     }

     /* Extensions cell -- condensed summary, full history behind a native
        <details> disclosure (no JS needed, and no interaction with the
        multi-item group expand/collapse mechanism). */
     .rental-tracker__ext-cell {
       font-size: 11px;
     }

     .rental-tracker__no-po {
       color: #9ca3af;
       font-style: italic;
     }

     .rental-tracker__ext-details summary {
       cursor: pointer;
       color: #92400e;
       font-weight: 600;
       list-style: none;
     }

     .rental-tracker__ext-details summary::-webkit-details-marker {
       display: none;
     }

     .rental-tracker__ext-details summary::before {
       content: "▸";
       display: inline-block;
       margin-right: 4px;
       font-size: 10px;
       color: #92722a;
     }

     .rental-tracker__ext-details[open] summary::before {
       content: "▾";
     }

     .rental-tracker__ext-history {
       margin-top: 6px;
       padding-left: 12px;
       color: #b45309;
       font-size: 10px;
       line-height: 1.6;
     }

     /* Purchase Line Items panel on po_req_completed -- items are added one
        at a time via the "Add a Line Item" popup (see
        #basicItemModalBackdrop), each rendered here as a table row (#basicItemsList
        is the <tbody>), dense spreadsheet-style like Coupa's line items grid. */
     #basicItemsTable {
       margin-bottom: 12px;
     }

     .basic-item-num-col {
       width: 48px;
       text-align: center;
       color: #6b7280;
     }

     /* Add a Line Item popup is wider and roomier than the base modal (six
        item-level fields in a row, above the allocations). */
     .rental-tracker__modal.basic-item-modal {
       max-width: 1100px;
       width: 95vw;
       padding: 32px 40px;
     }

     .basic-item-modal .rental-tracker__modal-title {
       font-size: 22px;
       margin-bottom: 24px;
     }

     .basic-item-modal .rental-tracker__modal-row {
       gap: 20px;
     }

     .basic-item-modal .rental-tracker__modal-field {
       margin-bottom: 20px;
     }

     .basic-item-modal .rental-tracker__modal-field label {
       font-size: 12px;
       margin-bottom: 2px;
       min-height: 28px;
       display: flex;
       align-items: flex-end;
     }

     .basic-item-modal .rental-tracker__modal-field input:not([type="checkbox"]),
     .basic-item-modal .rental-tracker__modal-field select {
       padding: 10px 12px;
       font-size: 14px;
     }

     .basic-item-modal .basic-item-allocation-job {
       padding: 10px 12px;
       font-size: 14px;
     }

     .basic-item-modal .basic-item-allocation-pct {
       font-size: 14px;
       min-width: 76px;
     }

     /* Small uppercase group headers separating Item Details / Pricing /
        Allocations within the popup, so the dense field row reads as
        distinct groups rather than one undifferentiated wall of inputs. */
     .basic-item-modal-section-label {
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: #6b7280;
       margin-bottom: 10px;
     }

     .basic-item-modal-divider {
       border-top: 1px solid #e5e7eb;
       margin: 8px 0 20px;
     }

     .basic-item-add-allocation-btn {
       display: inline-flex;
       align-self: flex-start;
       width: auto;
       margin-top: 10px;
       padding: 8px 16px;
     }

     /* Allocation rows inside the Add a Line Item popup */
     .basic-item-allocation-row {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 6px;
     }

     .basic-item-allocation-job {
       flex: 1;
       padding: 6px 8px;
       border: 1px solid #d1d5db;
       border-radius: 4px;
       font-size: 13px;
       box-sizing: border-box;
     }

     .basic-item-allocation-pct {
       min-width: 64px;
       text-align: right;
       font-size: 13px;
       font-weight: 600;
       color: #374151;
     }

     .basic-item-allocation-row .trash-button {
       margin-top: 0;
     }

     /* Additional Rate Split portion rows inside the Add a Line Item popup
        (see #basicItemRatePortions) -- same 4 fields as the base Pricing
        row (Rate Qty/Units/Rate/Amount), repeatable. Shares the
        .basic-item-pricing-grid column layout with the base Pricing row so
        the 4 fields line up under it; the 5th (28px) column holds the
        remove button on portion rows and stays empty on the base row. */
     .basic-item-rate-portion-row {
       margin-bottom: 8px;
     }

     .basic-item-rate-portion-row input {
       padding: 8px 10px;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       font-size: 14px;
       box-sizing: border-box;
       width: 100%;
     }

     .basic-item-rate-portion-row .trash-button {
       margin-top: 0;
     }

     .basic-item-pricing-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr) 28px;
       gap: 20px;
       align-items: center;
     }

     .rental-tracker__receipt-link {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       color: #475569;
       font-size: 10px;
       font-weight: 600;
       text-decoration: none;
       white-space: nowrap;
     }

     .rental-tracker__receipt-link:hover {
       color: #1e3a8a;
       text-decoration: underline;
     }

     .rental-tracker__modal-backdrop {
       position: fixed;
       inset: 0;
       background: rgba(15, 23, 42, 0.5);
       z-index: 1000;
       align-items: center;
       justify-content: center;
     }

     .rental-tracker__modal {
       background: #fff;
       border-radius: 10px;
       padding: 24px 28px;
       width: 100%;
       max-width: 420px;
       max-height: 90vh;
       overflow-y: auto;
       box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
     }

     .rental-tracker__modal-title {
       margin: 0 0 16px;
       font-size: 18px;
       font-weight: 700;
       color: #111827;
     }

     .rental-tracker__modal-field {
       display: flex;
       flex-direction: column;
       gap: 4px;
       margin-bottom: 14px;
       flex: 1 1 0;
     }

     .rental-tracker__modal-field label {
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: #6b7280;
     }

     .rental-tracker__modal-field input:not([type="checkbox"]),
     .rental-tracker__modal-field select,
     .rental-tracker__modal-field textarea {
       padding: 7px 10px;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       font-size: 13px;
       color: #111827;
       background: #fff;
       outline: none;
       font-family: inherit;
       width: 100%;
       box-sizing: border-box;
     }

     .rental-tracker__modal-field textarea {
       resize: vertical;
       min-height: 56px;
     }

     .rental-tracker__modal-field input:not([type="checkbox"]):focus,
     .rental-tracker__modal-field select:focus,
     .rental-tracker__modal-field textarea:focus {
       border-color: #7e22ce;
       box-shadow: 0 0 0 2px rgba(126, 34, 206, 0.15);
     }

     .rental-tracker__modal-row {
       display: flex;
       gap: 12px;
       flex-wrap: wrap;
     }

     .rental-tracker__modal-checkbox-row {
       gap: 24px;
       margin: 10px 0 16px;
     }

     #change-order-reason.po-field--reason {
       display: none;
     }

     #change-order-reason.po-field--reason.po-field--reason-visible {
       display: flex;
     }

     .rental-tracker__modal-divider {
       margin-top: 16px;
       padding-top: 16px;
       border-top: 1px solid #e5e7eb;
     }

     .rental-tracker__required {
       color: #dc2626;
     }

     .rental-tracker__modal-actions {
       display: flex;
       justify-content: flex-end;
       gap: 8px;
       margin-top: 6px;
     }

     .rental-tracker__modal--wide {
       max-width: 480px;
     }

     .rental-tracker__modal--form {
       max-width: 760px;
       text-align: left;
     }

     .rental-tracker__extend-step2 {
       margin-top: 16px;
       padding-top: 16px;
       border-top: 1px solid #e5e7eb;
     }

     .rental-tracker__extend-off-rent-block {
       margin-bottom: 16px;
       padding-bottom: 16px;
       border-bottom: 1px solid #e5e7eb;
     }

     .rental-tracker__extend-off-rent-block input:disabled {
       background: #f3f4f6;
       color: #374151;
       cursor: not-allowed;
     }

     .rental-tracker__extend-off-rent-msg {
       color: #b91c1c;
       font-weight: 600;
     }

     .rental-tracker__extend-items {
       display: flex;
       flex-direction: column;
       gap: 6px;
       max-height: 220px;
       overflow-y: auto;
       padding: 8px 10px;
       border: 1px solid #e5e7eb;
       border-radius: 6px;
     }

     .rental-tracker__extend-item {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       font-weight: 400;
       text-transform: none;
       letter-spacing: normal;
       color: #1f2937;
     }

     .rental-tracker__modal-hint {
       font-size: 12px;
       color: #6b7280;
       margin: 0 0 10px;
     }

     .rental-tracker__extend-table {
       width: 100%;
       border-collapse: collapse;
       margin-bottom: 14px;
     }

     .rental-tracker__extend-table th,
     .rental-tracker__extend-table td {
       text-align: left;
       padding: 6px 8px;
       border-bottom: 1px solid #e5e7eb;
       font-size: 13px;
     }

     .rental-tracker__extend-table th {
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: #6b7280;
     }

     /* Extensions edit table */
     .po-ext-table {
       width: 100%;
       border-collapse: collapse;
       border: 1px solid #dbe3ee;
       border-radius: 12px;
       overflow: hidden;
       background: #fff;
     }

     .po-ext-table th,
     .po-ext-table td {
       padding: 12px 16px;
       text-align: left;
       font-size: 0.85rem;
       border-bottom: 1px solid #eef2f7;
     }

     .po-ext-table th {
       background: #f8fafc;
       font-weight: 600;
       color: #475569;
       font-size: 0.78rem;
       text-transform: uppercase;
       letter-spacing: 0.05em;
     }

     .po-ext-table tbody tr:last-child td {
       border-bottom: none;
     }

     .po-ext-table__date {
       color: #334155;
       white-space: nowrap;
     }

     .po-ext-table__input {
       width: 100%;
       border: 1px solid #cbd5e1;
       border-radius: 6px;
       padding: 6px 10px;
       font-size: 0.85rem;
       color: #1e293b;
     }

     .po-ext-table__input:focus {
       outline: none;
       border-color: #3b82f6;
       box-shadow: 0 0 0 2px #bfdbfe;
     }

     /* Copy button */
     .copy-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: none;
       border: none;
       border-radius: 4px;
       padding: 3px;
       cursor: pointer;
       color: #94a3b8;
       transition: color 0.15s;
       flex-shrink: 0;
     }

     .copy-btn:hover {
       color: #1e293b;
     }

     .po-submitted-msg {
       font-size: 0.8rem;
       color: #64748b;
       margin: 0 0 14px;
     }

     /* po_req_completed order type + dates inline row */
     .po-req-completed-type-row {
       display: flex;
       align-items: flex-end;
       gap: 16px;
       margin-bottom: 18px;
       flex-wrap: wrap;
     }

     /* po_approvals: CSV/spreadsheet-style table */
     .csv-approval-board {
       box-sizing: border-box;
       width: 100%;
       max-width: none;
       padding: 24px;
       margin: 0;
     }

     .csv-table-wrap {
       width: 100%;
       box-sizing: border-box;
       overflow-x: auto;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       background: #ffffff;
     }

     .csv-table {
       width: 100%;
       table-layout: fixed;
       border-collapse: collapse;
       font-family: 'Courier New', Courier, monospace;
       font-size: 0.78rem;
       color: #1f2937;
     }

     .csv-table th,
     .csv-table td {
       box-sizing: border-box;
     }

     .csv-table th:nth-child(1),
     .csv-table td:nth-child(1) {
       width: 9%;
     }

     .csv-table th:nth-child(2),
     .csv-table td:nth-child(2) {
       width: 9%;
     }

     .csv-table th:nth-child(3),
     .csv-table td:nth-child(3) {
       width: 8%;
     }

     .csv-table th:nth-child(4),
     .csv-table td:nth-child(4) {
       width: 8%;
     }

     .csv-table th:nth-child(5),
     .csv-table td:nth-child(5) {
       width: 7%;
     }

     .csv-table th:nth-child(6),
     .csv-table td:nth-child(6) {
       width: 6%;
     }

     .csv-table th:nth-child(7),
     .csv-table td:nth-child(7) {
       width: 9%;
     }

     .csv-table th:nth-child(8),
     .csv-table td:nth-child(8) {
       width: 6%;
     }

     .csv-table th:nth-child(9),
     .csv-table td:nth-child(9) {
       width: 8%;
     }

     .csv-table th:nth-child(10),
     .csv-table td:nth-child(10) {
       width: 8%;
     }

     .csv-table th:nth-child(11),
     .csv-table td:nth-child(11) {
       width: 7%;
     }

     .csv-table th:nth-child(12),
     .csv-table td:nth-child(12) {
       width: 4%;
     }

     .csv-table th:nth-child(13),
     .csv-table td:nth-child(13) {
       width: 11%;
     }

     /* table-layout is fixed, so these widths are the whole story: a column
        with no rule here gets whatever is left, and when the rules already
        add up to 100% that is nothing at all -- the column renders at zero
        width and looks deleted. Keep this list in step with the header row,
        and keep the total at 100. The two action columns can be narrow now
        that their buttons read "CO" and "GR" rather than "Change Order" and
        "Confirm". */

     .csv-table--po-summary th:nth-child(1),
     .csv-table--po-summary td:nth-child(1) {
       width: 9%;   /* Customer */
     }

     .csv-table--po-summary th:nth-child(2),
     .csv-table--po-summary td:nth-child(2) {
       width: 8%;   /* Job Number */
     }

     .csv-table--po-summary th:nth-child(3),
     .csv-table--po-summary td:nth-child(3) {
       width: 8%;   /* PO# */
     }

     .csv-table--po-summary th:nth-child(4),
     .csv-table--po-summary td:nth-child(4) {
       width: 6%;   /* Order Type */
     }

     .csv-table--po-summary th:nth-child(5),
     .csv-table--po-summary td:nth-child(5) {
       width: 8%;   /* Vendor */
     }

     .csv-table--po-summary th:nth-child(6),
     .csv-table--po-summary td:nth-child(6) {
       width: 12%;   /* Order Summary */
     }

     .csv-table--po-summary th:nth-child(7),
     .csv-table--po-summary td:nth-child(7) {
       width: 7%;   /* Billing Format */
     }

     .csv-table--po-summary th:nth-child(8),
     .csv-table--po-summary td:nth-child(8) {
       width: 7%;   /* Bid Item */
     }

     .csv-table--po-summary th:nth-child(9),
     .csv-table--po-summary td:nth-child(9) {
       width: 5%;   /* Cost */
     }

     .csv-table--po-summary th:nth-child(10),
     .csv-table--po-summary td:nth-child(10) {
       width: 6%;   /* Cost to Date */
     }

     .csv-table--po-summary th:nth-child(11),
     .csv-table--po-summary td:nth-child(11) {
       width: 6%;   /* Cost as Sold */
     }

     .csv-table--po-summary th:nth-child(12),
     .csv-table--po-summary td:nth-child(12) {
       width: 5%;   /* Billable */
     }

     .csv-table--po-summary th:nth-child(13),
     .csv-table--po-summary td:nth-child(13) {
       width: 4%;   /* Notes */
     }

     .csv-table--po-summary th:nth-child(14),
     .csv-table--po-summary td:nth-child(14) {
       width: 5%;   /* Make Change Order */
     }

     .csv-table--po-summary th:nth-child(15),
     .csv-table--po-summary td:nth-child(15) {
       width: 4%;   /* Link to GR */
     }

     /* Editable variant. It carries a 16th column for the per-row Save, and
        two of its columns need more room than their read-only versions:
        Billing Format becomes a dropdown, and Cost as Sold can hold a number
        plus a unit dropdown under Per Hr/Day Rate.

        The list above already totals 100% and table-layout is fixed, so every
        percent added here has to be taken from somewhere -- an unlisted or
        over-allocated column renders at zero width. Order Summary and Customer
        fund it: they are the widest text columns and the ones that lose least
        by being narrower. Net change across this block is zero.

           Customer      9 -> 7   (-2)
           Order Summary 12 -> 5  (-7)
           Billing Fmt   7 -> 9   (+2)
           Cost as Sold  6 -> 9   (+3)
           Save          -- -> 4  (+4) */
     .csv-table--po-summary--edit th:nth-child(1),
     .csv-table--po-summary--edit td:nth-child(1) {
       width: 7%;   /* Customer */
     }

     .csv-table--po-summary--edit th:nth-child(6),
     .csv-table--po-summary--edit td:nth-child(6) {
       width: 5%;   /* Order Summary */
     }

     .csv-table--po-summary--edit th:nth-child(7),
     .csv-table--po-summary--edit td:nth-child(7) {
       width: 9%;   /* Billing Format */
     }

     .csv-table--po-summary--edit th:nth-child(11),
     .csv-table--po-summary--edit td:nth-child(11) {
       width: 9%;   /* Cost as Sold */
     }

     .csv-table--po-summary--edit th:nth-child(16),
     .csv-table--po-summary--edit td:nth-child(16) {
       width: 4%;   /* Save */
     }

     /* Editable cells read as fields without turning the table into a form:
        full-width so the column width still governs, and a light border so a
        row of them does not out-shout the read-only columns beside it. */
     .po-summary-edit {
       width: 100%;
       box-sizing: border-box;
       padding: 4px 6px;
       border: 1px solid #d1d5db;
       border-radius: 5px;
       background: #fff;
       font-family: inherit;
       font-size: 0.72rem;
       color: #111827;
     }

     .po-summary-edit:focus {
       outline: none;
       border-color: #2d4a8a;
       box-shadow: 0 0 0 2px rgba(45, 74, 138, 0.12);
     }

     .po-summary-edit--num {
       text-align: right;
       font-variant-numeric: tabular-nums;
     }

     /* The Cost + % and Per Hr/Day Rate variants put two controls in one cell,
        so they lay out as a row and the inputs share what is left after the
        suffix. */
     .po-summary-edit__variant {
       display: flex;
       align-items: center;
       gap: 3px;
     }

     .po-summary-edit__variant[hidden] {
       display: none;
     }

     .po-summary-edit__suffix {
       flex: none;
       font-size: 0.7rem;
       color: #6b7280;
     }

     .po-summary-edit__variant .po-summary-edit {
       min-width: 0;
     }

     .po-summary-save {
       height: 24px;
       padding: 0 8px;
       font-size: 0.68rem;
     }

     /* The two action chips are icon-only; what they do lives in the title
        attribute, shown on hover, and in the column header. They carry
        DIFFERENT icons on purpose -- side by side in adjacent columns, one
        repeated glyph would be two identical buttons with no way to tell
        which is which without hovering each.

        Square, and with .action-chip's 14px side padding dropped: that
        padding is sized for a word, and left on an icon it would make these
        wider than the labelled versions they replaced. */
     .csv-table--po-summary .action-chip--icon {
       width: 26px;
       padding: 0;
     }

     .csv-table thead th {
       position: sticky;
       top: 0;
       background: #f3f5f7;
       color: #4b5563;
       text-transform: uppercase;
       letter-spacing: 0.03em;
       font-weight: 600;
       font-size: 0.68rem;
       text-align: left;
       padding: 10px 8px;
       border-bottom: 1px solid #d1d5db;
       border-right: 1px solid #e5e7eb;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

     .csv-table thead th:last-child {
       border-right: none;
     }

     .csv-table tbody td {
       padding: 6px 8px;
       border-bottom: 1px solid #e5e7eb;
       border-right: 1px solid #e5e7eb;
       vertical-align: top;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }

     .csv-table tbody td:last-child {
       border-right: none;
     }

     .csv-table tbody tr:nth-child(even) {
       background: #e9edf3;
     }

     .csv-table tbody tr:hover {
       background: #f3f4f6;
     }

     .csv-table__num {
       text-align: right;
       font-variant-numeric: tabular-nums;
     }

     .csv-table__precheck {
       display: inline;
       margin-right: 4px;
       font-size: 0.68rem;
       color: #2563eb;
       text-transform: uppercase;
       letter-spacing: 0.03em;
     }

     .csv-table__filter-link {
       color: inherit;
       text-decoration: none;
     }

     .csv-table__filter-link:hover {
       text-decoration: underline;
       color: #2563eb;
     }

     .csv-table__btn {
       display: inline-flex;
       align-items: center;
       gap: 3px;
       padding: 4px 7px;
       border-radius: 4px;
       border: none;
       cursor: pointer;
       font-family: inherit;
       font-size: 0.72rem;
       font-weight: 600;
       white-space: nowrap;
     }

     .csv-table__btn svg {
       width: 10px;
       height: 10px;
       flex-shrink: 0;
     }

     .csv-table__btn--reject {
       background: rgba(220, 38, 38, 0.1);
       color: #b91c1c;
     }

     .csv-table__btn--reject:hover {
       background: rgba(220, 38, 38, 0.18);
     }

     .csv-table__btn--approve {
       background: #1d4ed8;
       color: #fff;
     }

     .csv-table__btn--approve:hover {
       background: #1e40af;
     }

     .csv-table tbody td.csv-table__actions-cell {
       white-space: normal;
       overflow: visible;
     }

     .csv-table tbody td.csv-table__notes-cell {
       text-align: center;
       white-space: normal;
       overflow: visible;
     }

     .csv-table__note-icon {
       position: relative;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 18px;
       height: 18px;
       color: #6b7280;
       cursor: help;
     }

     .csv-table__note-icon:hover,
     .csv-table__note-icon:focus-visible {
       color: #2563eb;
     }

     .csv-table__note-icon svg {
       width: 15px;
       height: 15px;
       pointer-events: none;
     }

     .csv-table__note-icon::after {
       content: attr(data-tooltip);
       position: absolute;
       z-index: 20;
       top: calc(100% + 6px);
       left: 50%;
       transform: translateX(-50%);
       width: max-content;
       max-width: 240px;
       padding: 6px 8px;
       border-radius: 4px;
       background: #1f2937;
       color: #ffffff;
       font-size: 0.68rem;
       font-family: 'Courier New', Courier, monospace;
       white-space: pre-line;
       line-height: 1.35;
       text-align: left;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
       transition: opacity 0.1s ease;
     }

     .csv-table__note-icon:hover::after,
     .csv-table__note-icon:focus-visible::after {
       opacity: 1;
       visibility: visible;
     }

     .csv-table .approval-card__actions {
       display: block;
       width: 100%;
     }

     .csv-table .approval-card__action-row {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
     }

     .csv-table .reject-form {
       display: contents;
     }

     .csv-table .approve-form {
       display: contents;
     }

     .csv-table .reject-reason {
       margin-top: 6px;
       display: flex;
       flex-direction: column;
       gap: 6px;
       width: 100%;
     }

     .csv-table .reject-reason textarea {
       font-family: inherit;
       font-size: 0.72rem;
       padding: 5px;
       border-radius: 4px;
       border: 1px solid #d1d5db;
       background: #ffffff;
       color: #1f2937;
       resize: vertical;
       min-height: 44px;
       width: 100%;
       box-sizing: border-box;
     }

     .csv-table__empty {
       text-align: center;
       padding: 24px;
       color: #6b7280;
     }

     .po-req-completed-date-pair {
       display: flex;
       gap: 16px;
       flex: 2;
     }
/* ── Task Log ────────────────────────────────────────────────────────────────
 *
 * Phase 1 trial module. Shared across task_log.html, task_log_new.html,
 * task_log_item.html, task_log_bulk.html and my_tasks.html, so these live here
 * rather than in a page-scoped <style> block.
 *
 * Colour is used only for meaningful state -- urgent, overdue, current step,
 * completed. The workbook's blue/peach/lavender conditional formatting is
 * deliberately not reproduced: it coloured everything, so it signalled nothing.
 */

.task-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.task-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.task-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.task-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 4px 0 0;
}

.task-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Metrics ------------------------------------------------------------------ */

/* Work Items and Open Steps are separate tiles with separate labels on purpose.
   The workbook called both "tasks", so a count never said whether it meant
   invoices or checkboxes. */
.task-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.task-metric {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
}

.task-metric__value {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}

.task-metric__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  margin-top: 4px;
}

.task-metric--overdue .task-metric__value { color: #dc2626; }
.task-metric--soon .task-metric__value { color: #a16207; }

/* Work item cards (admin queue) -------------------------------------------- */

.task-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.task-card--urgent { border-left: 4px solid #dc2626; }
.task-card--overdue { border-left: 4px solid #dc2626; }

.task-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.task-card__ref {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
}

.task-card__ref:hover { text-decoration: underline; }

.task-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.task-card__context {
  font-size: 13px;
  color: #475569;
  margin: 8px 0 0;
}

/* Checklist ---------------------------------------------------------------- */

.task-steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.task-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}

/* The step the admin should be working on now. This is the only emphasis in the
   checklist, so it stays legible even in a long list. */
.task-step--current {
  background: #eff6ff;
  border-color: #bfdbfe;
}

/* Completed steps are muted, not hidden: the checklist is also the history of
   who did what. */
.task-step--done .task-step__text {
  color: #94a3b8;
  text-decoration: line-through;
}

.task-step__text {
  flex: 1;
  font-size: 14px;
  color: #0f172a;
}

.task-step__who {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  text-decoration: none;
}

.task-step__action {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.task-step__action:hover { background: #f1f5f9; }
.task-step__action--done { color: #16a34a; border-color: #bbf7d0; }

/* Priority and due-date chips ---------------------------------------------- */

.task-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}

.task-chip--urgent { background: #fee2e2; color: #b91c1c; }
.task-chip--high { background: #ffedd5; color: #c2410c; }
.task-chip--medium { background: #e0f2fe; color: #0369a1; }
.task-chip--low { background: #f1f5f9; color: #475569; }
.task-chip--done { background: #dcfce7; color: #166534; }
.task-chip--archived { background: #f1f5f9; color: #64748b; }

.task-due--overdue { color: #dc2626; font-weight: 700; }
.task-due--soon { color: #a16207; font-weight: 600; }

/* Progress ----------------------------------------------------------------- */

.task-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #475569;
}

.task-progress__bar {
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.task-progress__fill {
  display: block;
  height: 100%;
  background: #2563eb;
}

/* Detail page -------------------------------------------------------------- */

.task-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .task-detail-grid { grid-template-columns: 1fr; }
}

.task-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.task-panel__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  margin: 0 0 12px;
}

.task-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 18px;
}

.task-fact__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
}

.task-fact__value {
  font-size: 14px;
  color: #0f172a;
  margin-top: 2px;
}

/* Conversation and activity ------------------------------------------------ */

.task-note {
  border-top: 1px solid #f1f5f9;
  padding: 10px 0;
}

.task-note:first-child { border-top: none; }

.task-note__head {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.task-note__when {
  font-weight: 400;
  color: #94a3b8;
  margin-left: 6px;
}

.task-note__body {
  font-size: 14px;
  color: #334155;
  margin: 4px 0 0;
  white-space: pre-wrap;
}

/* Activity is visually quieter than the conversation. Generated events are
   context; what a person wrote is the message. */
.task-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #64748b;
}

.task-activity li {
  padding: 6px 0;
  border-top: 1px solid #f8fafc;
}

.task-activity li:first-child { border-top: none; }

.task-activity__actor { color: #334155; font-weight: 600; }

/* Bulk review -------------------------------------------------------------- */

.task-bulk-summary {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin: 14px 0;
  font-size: 13px;
}

.task-bulk-summary strong { color: #0f172a; }

.task-bulk-row--duplicate { background: #fffbeb; }
.task-bulk-row--excluded { opacity: .45; }

.task-bulk-note {
  font-size: 11px;
  margin-top: 3px;
}

.task-bulk-note--warn { color: #b45309; }
.task-bulk-note--soft { color: #64748b; }
.task-bulk-note--ok { color: #16a34a; }

.task-bulk-action {
  width: 100%;
  min-height: 34px;
  font-size: 13px;
  border: 1px solid #cfd6df;
  border-radius: 4px;
  padding: 6px 8px;
  box-sizing: border-box;
}

.task-drop {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  background: #f8fafc;
}

.task-drop.is-dragover {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

.task-drop__files {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 12px;
  color: #475569;
  text-align: left;
}

.task-empty {
  padding: 36px 20px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
  background: #fff;
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
}

.task-reassign {
  font-size: 11px;
  color: #7c3aed;
}

     /* ══ Order Confirmation ═════════════════════════════════════════════
        A calm operational page rather than a raw form: breadcrumb, order
        summary, then one workflow card holding Documents → Logistics →
        Rental Details, with the review bar beneath it. Everything is scoped
        under .oc-* so no other page inherits any of it. */
     .oc-shell {
       max-width: 1360px;
       margin: 0 auto;
       padding: 20px 24px 48px;
       background: transparent;
     }

     .oc-sr {
       position: absolute;
       width: 1px;
       height: 1px;
       overflow: hidden;
       clip: rect(0 0 0 0);
       white-space: nowrap;
     }

     /* ── Order summary ───────────────────────────────────────────────── */
     /* A compact operational header, not a hero block. The vertical padding
        is tighter than the 18px it replaces because the height here comes
        mostly from stacked content -- title, then two meta lines -- so the
        card has to give ground as well as the type.

        nowrap is what keeps the actions on the title's row. They were
        wrapping to a line of their own purely because the metadata beside
        them is wide; with the identity block allowed to shrink instead
        (flex + min-width:0 below), the metadata re-wraps inside its own
        column and the two sides stay on one band.

        Sticky, the way the Rental Tracker header pins: Save and the
        completion toggle stay reachable down a long confirmation page rather
        than only at the top. The box-shadow is not a shadow -- it paints the
        card's own 12px bottom margin in the page colour, so sections do not
        show through that gap as they scroll underneath. */
     .oc-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 20px;
       flex-wrap: nowrap;
       padding: 14px 22px;
       margin-bottom: 12px;
       background: var(--th-bg-surface);
       border: 1px solid var(--th-border);
       border-radius: 12px;
       position: sticky;
       top: 0;
       z-index: 5;
       box-shadow: 0 12px 0 0 #f3f4f6;
     }

     /* Takes the slack and is allowed to shrink, so the metadata wraps within
        this column rather than pushing the action cluster onto its own row. */
     .oc-head__id {
       display: flex;
       align-items: center;
       gap: 12px;
       flex: 1 1 auto;
       min-width: 0;
     }

     .oc-head__icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 34px;
       height: 34px;
       flex: 0 0 auto;
       border-radius: 8px;
       background: var(--th-accent-bg);
       color: var(--th-accent);
       font-size: 14px;
     }

     .oc-head__text { min-width: 0; }

     .oc-head__titlerow {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-wrap: wrap;
     }

     /* Sized against the Rental Tracker's 16px page title and nudged up one
        step: that title names a page, this one names a specific record and
        has to stay the first thing read in the card. */
     .oc-head__title {
       margin: 0;
       font-size: 18px;
       font-weight: 700;
       line-height: 1.3;
       color: var(--th-text);
       word-break: break-word;
     }

     .oc-badge {
       display: inline-flex;
       align-items: center;
       padding: 3px 10px;
       border-radius: 999px;
       font-size: 12px;
       font-weight: 600;
     }

     .oc-badge--confirmed {
       background: var(--th-success-bg);
       color: #15803d;
     }

     .oc-head__meta {
       display: flex;
       align-items: center;
       gap: 7px;
       flex-wrap: wrap;
       margin-top: 3px;
       font-size: 12.5px;
       line-height: 1.35;
       color: var(--th-text-muted);
     }

     .oc-head__meta i { color: var(--th-text-subtle); margin-right: 2px; font-size: 12px; }
     .oc-head__meta--strong { margin-top: 5px; font-weight: 600; color: var(--th-text-3); }

     .oc-dot {
       width: 3px;
       height: 3px;
       border-radius: 50%;
       background: var(--th-text-subtle);
       flex: 0 0 auto;
     }

     .oc-head__actions {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-wrap: wrap;
       flex: 0 0 auto;
       margin-left: auto;
     }

     /* Header actions only. .oc-btn is the page-wide button, so sizing it here
        rather than on the class itself keeps the section buttons further down
        the page exactly as they are. */
     .oc-head__actions .oc-btn {
       height: 33px;
       padding: 0 13px;
       border-radius: 7px;
       font-size: 12.5px;
       gap: 6px;
     }

     /* Just under the label they sit beside, so they read as part of the word
        rather than as marks in their own right. */
     .oc-head__actions .oc-btn i { font-size: 12px; }

     /* The secondaries step back so Save is the only filled control in the
        row -- previously all four carried the same border weight and read as
        equals. Text stays a dark blue-gray rather than going fully muted:
        these are real actions, just not the primary one. */
     .oc-head__actions .oc-btn:not(.oc-btn--primary) {
       border-color: var(--th-border);
       color: var(--th-text-3);
       font-weight: 600;
     }

     .oc-head__actions .oc-btn:not(.oc-btn--primary):hover {
       border-color: var(--th-border-med);
       color: var(--th-text-2);
     }

     /* Grouping inside the cluster: 8px holds the three secondaries together,
        and the wider gaps set the state control and the primary apart from
        them rather than leaving five evenly spaced equals. */
     .oc-head__actions .oc-toggle {
       margin-left: 4px;
       gap: 8px;
       font-size: 12.5px;
       font-weight: 500;
       color: var(--th-text-muted);
     }

     .oc-head__actions .oc-btn--primary {
       margin-left: 4px;
     }

     .oc-head__actions .oc-toggle__track {
       width: 34px;
       height: 19px;
     }

     .oc-head__actions .oc-toggle__thumb {
       top: 3px;
       left: 3px;
       width: 13px;
       height: 13px;
     }

     .oc-head__actions .oc-toggle input:checked + .oc-toggle__track .oc-toggle__thumb {
       transform: translateX(15px);
     }

     /* ── Buttons: one hierarchy for the whole page ───────────────────── */
     .oc-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       height: 38px;
       padding: 0 16px;
       border: 1px solid var(--th-border-med);
       border-radius: 9px;
       background: var(--th-bg-surface);
       color: var(--th-text-3);
       font-size: 13.5px;
       font-weight: 600;
       font-family: inherit;
       text-decoration: none;
       cursor: pointer;
       white-space: nowrap;
       transition: background .15s, border-color .15s, color .15s;
     }

     .oc-btn:hover {
       background: var(--th-bg-sunken);
       border-color: var(--th-text-subtle);
       color: var(--th-text-2);
     }

     .oc-btn:focus-visible {
       outline: none;
       box-shadow: 0 0 0 3px var(--th-accent-bg);
       border-color: var(--th-accent);
     }

     .oc-btn i { font-size: 12px; }

     .oc-btn--primary {
       background: var(--th-accent);
       border-color: var(--th-accent);
       color: #fff;
     }

     .oc-btn--primary:hover {
       background: #1d4ed8;
       border-color: #1d4ed8;
       color: #fff;
     }

     .oc-btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
     .oc-btn--lg { height: 44px; padding: 0 22px; font-size: 14.5px; }

     .oc-btn--disabled {
       background: var(--th-bg-sunken);
       color: var(--th-text-subtle);
       cursor: not-allowed;
     }

     /* ── Alerts ──────────────────────────────────────────────────────── */
     .oc-alert {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
       padding: 12px 16px;
       margin-bottom: 14px;
       border-radius: 10px;
       border: 1px solid;
       font-size: 13.5px;
     }

     .oc-alert--error { background: var(--th-error-bg); border-color: #fecaca; color: #b91c1c; }
     .oc-alert--success { background: var(--th-success-bg); border-color: #bbf7d0; color: #15803d; }
     .oc-alert--warning { background: var(--th-warning-bg); border-color: #fed7aa; color: #b45309; }

     /* ── Workflow card ───────────────────────────────────────────────── */
     /* One column. The 208px step rail that used to fill the first track is
        gone -- it was orientation for four sections that are all on this one
        page anyway, and the Rental Details table wanted the width more. */
     .oc-card {
       display: grid;
       grid-template-columns: minmax(0, 1fr);
       background: var(--th-bg-surface);
       border: 1px solid var(--th-border);
       border-radius: 14px;
       box-shadow: 0 1px 2px var(--th-shadow);
       overflow: hidden;
     }

     /* ── Sections ────────────────────────────────────────────────────── */
     .oc-body { min-width: 0; }

     .oc-sec {
       padding: 24px 26px;
       border-bottom: 1px solid var(--th-border);
       scroll-margin-top: 20px;
     }

     .oc-sec:last-child { border-bottom: none; }

     /* Two columns, two rows: the title spans both so it centres on the
        section rather than on whatever width the action button leaves; the
        hint sits under it on the left and the button on the right. */
     .oc-sec__headrow {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
       align-items: start;
       column-gap: 16px;
     }

     .oc-sec__headrow-title {
       grid-column: 1 / -1;
       grid-row: 1;
     }

     /* The hint spans both columns too, so it centres on the section under
        the title rather than on the narrower track beside the button. */
     .oc-sec__headrow > .oc-sec__hint {
       grid-column: 1 / -1;
       grid-row: 2;
       max-width: none;
       text-align: center;
     }

     /* Placed on the title's row in the second column: it shares that row
        with a centred, short title, so the two never meet. */
     .oc-sec__headrow-action {
       grid-column: 2;
       grid-row: 1;
       justify-self: end;
       align-self: start;
     }

     .oc-sec__title {
       margin: 0;
       font-size: 17px;
       font-weight: 650;
       color: var(--th-text);
     }

     .oc-sec__subtitle {
       margin: 0;
       font-size: 15px;
       font-weight: 650;
       color: var(--th-text);
     }

     .oc-sec__hint {
       margin: 4px 0 14px;
       font-size: 13px;
       color: var(--th-text-muted);
       max-width: 70ch;
     }

     .oc-label {
       display: block;
       font-size: 13.5px;
       font-weight: 600;
       color: var(--th-text-2);
     }

     /* ── Documents ───────────────────────────────────────────────────── */
     /* Delivery and Return head their own halves of this section, so they are
        centred over the column they describe. They are h3s, which is why the
        global "h2 { text-align: center }" that centres every other section
        title on this page never reached them. */
     .oc-docs__col > .oc-sec__subtitle,
     .oc-docs__col > .oc-sec__hint {
       text-align: center;
     }

     .oc-docs__col > .oc-sec__hint {
       max-width: none;
     }

     .oc-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
     .oc-docs--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }

     .oc-drop {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 4px;
       padding: 26px 18px;
       border: 1.5px dashed var(--th-border-med);
       border-radius: 12px;
       background: var(--th-bg-raised);
       text-align: center;
       transition: border-color .15s, background .15s;
     }

     .oc-drop.is-dragover {
       border-color: var(--th-accent);
       background: var(--th-accent-bg);
     }

     .oc-drop__icon { font-size: 22px; color: var(--th-accent); }

     .oc-drop__text {
       margin: 4px 0 0;
       font-size: 13.5px;
       color: var(--th-text-3);
     }

     .oc-drop__browse {
       padding: 0;
       border: none;
       background: none;
       color: var(--th-accent);
       font: inherit;
       font-weight: 600;
       cursor: pointer;
       text-decoration: underline;
     }

     .oc-drop__browse:focus-visible {
       outline: none;
       box-shadow: 0 0 0 3px var(--th-accent-bg);
       border-radius: 4px;
     }

     .oc-drop__hint {
       margin: 0;
       font-size: 12px;
       color: var(--th-text-subtle);
     }

     /* The real input stays in the DOM and keeps its name -- it is what posts.
        Kept keyboard-reachable rather than display:none, so tabbing to the
        upload still works; it is only visually collapsed. */
     .oc-drop__input {
       position: absolute;
       width: 1px;
       height: 1px;
       opacity: 0;
     }

     .oc-drop__input:focus-visible + .oc-drop__staged,
     .oc-drop:focus-within {
       border-color: var(--th-accent);
     }

     .oc-drop__staged {
       list-style: none;
       margin: 10px 0 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: 4px;
       width: 100%;
     }

     .oc-staged {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 5px 10px;
       border-radius: 7px;
       background: var(--th-bg-surface);
       border: 1px solid var(--th-border);
       font-size: 12.5px;
       color: var(--th-text-3);
     }

     .oc-files { margin-top: 14px; }

     .oc-files__head {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 8px;
       font-size: 13px;
       font-weight: 650;
       color: var(--th-text-2);
     }

     .oc-count {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 20px;
       height: 20px;
       padding: 0 6px;
       border-radius: 999px;
       background: var(--th-bg-sunken);
       color: var(--th-text-muted);
       font-size: 11.5px;
       font-variant-numeric: tabular-nums;
     }

     .oc-file {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border: 1px solid var(--th-border);
       border-radius: 10px;
       background: var(--th-bg-surface);
     }

     .oc-file + .oc-file { margin-top: 6px; }
     .oc-file__icon { color: var(--th-accent); font-size: 15px; }
     .oc-file__info { min-width: 0; flex: 1 1 auto; }

     .oc-file__name {
       display: block;
       font-size: 13px;
       font-weight: 600;
       color: var(--th-text-2);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }

     .oc-file__meta {
       display: block;
       font-size: 11.5px;
       color: var(--th-text-subtle);
     }

     .oc-files__empty {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 3px;
       padding: 22px 12px;
       border: 1px solid var(--th-border);
       border-radius: 10px;
       background: var(--th-bg-raised);
       color: var(--th-text-muted);
       font-size: 13px;
     }

     .oc-files__empty i { font-size: 18px; color: var(--th-text-subtle); margin-bottom: 2px; }
     .oc-files__empty small { font-size: 11.5px; color: var(--th-text-subtle); }

     /* ── Method cards ────────────────────────────────────────────────── */
     /* The question is centred under its heading, matching the Documents
        columns: it describes the whole column, not the left edge of it. */
     .oc-methods__col > .oc-sec__hint {
       max-width: none;
       text-align: center;
     }

     .oc-methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
     .oc-methods--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }

     /* Delivery and Return are two independent stacks, so every line of one
        pushed its own column down: a method card one line taller on the left,
        or a hint that wrapped to two lines on the right, and the two Notes
        boxes no longer started at the same height.

        Subgrid ties them together. The six rows -- title, hint, choice cards,
        notes label, notes hint, textarea -- are declared on the split
        container, each column adopts them instead of generating its own, and
        every row is then as tall as the taller side. Nothing is stretched or
        given a fixed height, so a hint that needs two lines still gets two,
        on both sides.

        Behind @supports because the fallback matters: without subgrid each
        column simply lays its children out as before, which is the layout
        that is on screen today. */
     /* Only while the two columns are actually side by side -- below 1024px
        the split collapses to one column, where there is nothing to line up
        and shared rows would only constrain the stack. */
     @media (min-width: 1025px) {
       @supports (grid-template-rows: subgrid) {
         /* row-gap goes to 0: .oc-methods sets a single 26px gap, which was
            only ever a gutter between the two columns. Once the columns
            became rows of this grid it started applying between every one of
            them too, opening a 26px hole under each heading and hint that the
            elements' own margins already spaced. The column gutter stays. */
         .oc-methods--split {
           grid-template-rows: repeat(6, auto);
           align-items: start;
           column-gap: 26px;
           row-gap: 0;
         }

         /* minmax(0, 1fr), not the default auto: an auto track is sized by
            its contents, so the textarea's 100% width resolved against a
            column wider than the one the method cards sit in and the two
            notes boxes met in the middle of the gutter. This pins each
            column's inner track to the track it actually occupies. */
         .oc-methods--split .oc-methods__col {
           display: grid;
           grid-template-rows: subgrid;
           grid-template-columns: minmax(0, 1fr);
           grid-row: span 6;
         }

         /* The notes block is three of those six rows, passed straight
            through so the textarea itself lines up, not just the block
            containing it. */
         .oc-methods--split .oc-notes {
           display: grid;
           grid-template-rows: subgrid;
           grid-template-columns: minmax(0, 1fr);
           grid-row: span 3;
         }
       }
     }

     .oc-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

     .oc-choice {
       position: relative;
       display: flex;
       align-items: center;
       gap: 11px;
       padding: 13px 14px;
       border: 1.5px solid var(--th-border);
       border-radius: 11px;
       background: var(--th-bg-surface);
       cursor: pointer;
       transition: border-color .15s, background .15s, box-shadow .15s;
     }

     .oc-choice:hover { border-color: var(--th-border-med); background: var(--th-bg-raised); }

     /* The radio itself is visually hidden but present and focusable, so
        arrow-key selection and screen readers behave normally. */
     .oc-choice input[type="radio"] {
       position: absolute;
       opacity: 0;
       width: 1px;
       height: 1px;
     }

     .oc-choice:has(input:focus-visible) {
       border-color: var(--th-accent);
       box-shadow: 0 0 0 3px var(--th-accent-bg);
     }

     .oc-choice.is-selected {
       border-color: var(--th-accent);
       background: var(--th-accent-bg);
     }

     .oc-choice__icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 36px;
       height: 36px;
       flex: 0 0 auto;
       border-radius: 9px;
       font-size: 14px;
     }

     /* Green = we move it, orange = the vendor moves it. Consistent across
        both delivery and return so the pairing is learnable at a glance. */
     .oc-choice__icon--ours { background: var(--th-success-bg); color: #15803d; }
     .oc-choice__icon--vendor { background: var(--th-warning-bg); color: #c2410c; }

     .oc-choice__text { min-width: 0; }

     .oc-choice__name {
       display: block;
       font-size: 13.5px;
       font-weight: 650;
       color: var(--th-text);
     }

     .oc-choice__desc {
       display: block;
       margin-top: 2px;
       font-size: 12px;
       color: var(--th-text-muted);
     }

     /* Selection is never colour alone -- a tick appears as well. */
     .oc-choice__check {
       margin-left: auto;
       color: var(--th-accent);
       font-size: 16px;
       opacity: 0;
       transition: opacity .15s;
     }

     .oc-choice.is-selected .oc-choice__check { opacity: 1; }

     .oc-notes { margin-top: 18px; }

     .oc-notes textarea {
       width: 100%;
       min-height: 92px;
       margin-top: 8px;
       padding: 10px 12px;
       border: 1px solid var(--th-border-form);
       border-radius: 8px;
       background: var(--th-bg-input);
       font-family: inherit;
       font-size: 13.5px;
       color: var(--th-text-2);
       resize: vertical;
     }

     .oc-notes textarea:focus {
       outline: none;
       border-color: var(--th-accent);
       box-shadow: 0 0 0 3px var(--th-accent-bg);
     }

     /* ── Rental details table ────────────────────────────────────────── */
     .oc-table-wrap {
       margin-top: 14px;
       border: 1px solid var(--th-border);
       border-radius: 11px;
       overflow-x: auto;
     }

     .oc-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 13px;
     }

     /* Centred, not left-aligned: every cell below is a full-width input, and
        the th and td carry the same 12px side padding, so centring the label
        puts it over the middle of the box it names. Left-aligned, a short
        label like "Received Date" sat off to one side of a wide field and
        read as belonging to whatever was left of it. */
     .oc-table thead th {
       padding: 10px 12px;
       text-align: center;
       background: var(--th-bg-raised);
       border-bottom: 1px solid var(--th-border);
       font-size: 11.5px;
       font-weight: 700;
       color: var(--th-text-muted);
       white-space: nowrap;
     }

     .oc-table tbody td {
       padding: 8px 12px;
       border-bottom: 1px solid #f1f5f9;
       vertical-align: middle;
     }

     .oc-table tbody tr:last-child td { border-bottom: none; }

     /* Received -> On Rent and Off Rent -> Returned are the two moments a
        rental actually changes hands. An arrow in the gutter between each pair
        marks them as a transition, so the four dates read as two movements
        rather than as four unrelated fields.

        Drawn with ::after on the LEFT cell of each pair. It cannot be ::before
        on the right-hand cell: the responsive card layout further down already
        uses td::before to print data-label, and a second one here would
        overwrite it.

        The glyph is a plain character, not an icon font. This table draws no
        other icons through CSS, and a character still renders if the Font
        Awesome kit fails to load. */
     .oc-table th.oc-table__transition,
     .oc-table td.oc-table__transition {
       position: relative;
       padding-right: 22px;
     }

     .oc-table th.oc-table__transition::after,
     .oc-table td.oc-table__transition::after {
       content: "\21C4";
       position: absolute;
       top: 50%;
       right: 3px;
       transform: translateY(-50%);
       font-size: 13px;
       line-height: 1;
       color: var(--th-text-subtle);
       pointer-events: none;
     }

     .oc-table input[type="text"],
     .oc-table input[type="date"] {
       width: 100%;
       min-width: 128px;
       box-sizing: border-box;
       padding: 7px 10px;
       border: 1px solid var(--th-border-form);
       border-radius: 7px;
       background: var(--th-bg-input);
       font-family: inherit;
       font-size: 13px;
       color: var(--th-text-2);
     }

     .oc-table input:focus {
       outline: none;
       border-color: var(--th-accent);
       box-shadow: 0 0 0 3px var(--th-accent-bg);
     }

     .oc-table input[readonly] {
       background: var(--th-bg-sunken);
       color: var(--th-text-3);
       border-color: transparent;
       font-weight: 600;
     }

     .oc-table__sub {
       display: block;
       margin-top: 3px;
       font-size: 11px;
       color: var(--th-text-subtle);
     }

     .oc-table__actions { width: 52px; text-align: center; }

     /* ── Bulk fill ───────────────────────────────────────────────────── */
     .oc-table__pick { width: 40px; text-align: center; }

     .oc-table__pick input[type="checkbox"] {
       width: 16px;
       height: 16px;
       accent-color: var(--th-accent);
       cursor: pointer;
     }

     /* The waiting blank row cannot be bulk-filled -- see the JS. Hidden
        rather than removed so the column keeps its width. */
     .oc-table tbody tr.shadow-row .oc-pick { visibility: hidden; }

     /* Appears only while something is selected, so the page is unchanged for
        the common case of a PO with one or two lines. */
     .oc-bulk {
       display: flex;
       align-items: center;
       gap: 14px;
       flex-wrap: wrap;
       padding: 10px 14px;
       margin-top: 14px;
       border: 1px solid #bfdbfe;
       border-radius: 10px;
       background: var(--th-accent-bg);
     }

     .oc-bulk__count {
       font-size: 13px;
       font-weight: 650;
       color: #1d4ed8;
       font-variant-numeric: tabular-nums;
     }

     .oc-bulk__field {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       font-weight: 600;
       color: var(--th-text-3);
     }

     /* The column picker and the date field are one control in two halves --
        "set <this column> to <this date>" -- so they share a shape rather
        than each carrying the default look of their own element type. */
     .oc-bulk__field input[type="date"],
     .oc-bulk__field select {
       padding: 7px 10px;
       border: 1px solid var(--th-border-form);
       border-radius: 7px;
       background: var(--th-bg-input);
       font-family: inherit;
       font-size: 13px;
       color: var(--th-text-2);
     }

     .oc-bulk__field select {
       font-weight: 600;
       cursor: pointer;
     }

     .oc-bulk__field input[type="date"]:focus,
     .oc-bulk__field select:focus {
       outline: none;
       border-color: var(--th-accent);
       box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
     }

     .oc-bulk__clear {
       margin-left: auto;
       padding: 0;
       border: none;
       background: none;
       color: var(--th-text-muted);
       font: inherit;
       font-size: 12.5px;
       font-weight: 600;
       text-decoration: underline;
       cursor: pointer;
     }

     .oc-bulk__clear:hover { color: var(--th-text-2); }

     /* A brief tint on the rows that just changed -- with fifteen rows on
        screen, "did that work?" is otherwise a real question. */
     .oc-table tbody tr.is-just-filled td { background: var(--th-success-bg); }
     .oc-table tbody tr td { transition: background .35s; }

     /* Understated until reached, but never invisible. */
     .oc-trash {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 30px;
       height: 30px;
       border: 1px solid transparent;
       border-radius: 7px;
       background: none;
       color: var(--th-text-subtle);
       cursor: pointer;
       transition: color .15s, background .15s, border-color .15s;
     }

     .oc-trash:hover { color: var(--th-error); background: var(--th-error-bg); }

     .oc-trash:focus-visible {
       outline: none;
       color: var(--th-error);
       border-color: #fecaca;
       box-shadow: 0 0 0 3px var(--th-error-bg);
     }

     /* The waiting blank row is quieter than a real one, so the table does not
        look like it has an unfilled entry in it. */
     .oc-table tbody tr.shadow-row input { background: var(--th-bg-raised); }

     /* ── Review bar ──────────────────────────────────────────────────── */
     .oc-toggle {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       cursor: pointer;
       font-size: 13.5px;
       font-weight: 600;
       color: var(--th-text-3);
     }

     .oc-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }

     .oc-toggle__track {
       position: relative;
       width: 40px;
       height: 22px;
       flex: 0 0 auto;
       border-radius: 999px;
       background: var(--th-border-med);
       transition: background .15s;
     }

     .oc-toggle__thumb {
       position: absolute;
       top: 3px;
       left: 3px;
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background: #fff;
       transition: transform .15s;
     }

     .oc-toggle input:checked + .oc-toggle__track { background: var(--th-success); }
     .oc-toggle input:checked + .oc-toggle__track .oc-toggle__thumb { transform: translateX(18px); }

     .oc-toggle input:focus-visible + .oc-toggle__track {
       box-shadow: 0 0 0 3px var(--th-accent-bg);
     }

     /* The action cluster is five controls wide. Holding it on the title's
        line below roughly this width leaves the metadata so little room that
        a single identifier wraps alone onto a second line -- so the cluster
        drops beneath the title block instead, which costs one row and keeps
        the metadata reading as one. Sticky goes with it: a header several
        rows tall would eat the viewport it exists to leave free. */
     @media (max-width: 1280px) {
       .oc-head {
         flex-wrap: wrap;
         position: static;
         box-shadow: none;
       }
     }

     /* ── Tablet ──────────────────────────────────────────────────────── */
     @media (max-width: 1024px) {
       .oc-shell { padding: 16px 16px 40px; }
       .oc-docs--split,
       .oc-methods--split { grid-template-columns: minmax(0, 1fr); }
       .oc-sec { padding: 20px; }
     }

     /* ── Phone / field devices ───────────────────────────────────────── */
     @media (max-width: 760px) {
       .oc-head__title { font-size: 18px; }
       .oc-head__actions { width: 100%; }
       .oc-head__actions .oc-btn { flex: 1 1 auto; }

       .oc-choices { grid-template-columns: minmax(0, 1fr); }

       /* Each rental line becomes a card. A seven-column table on a phone is
          either unreadable or a horizontal-scroll hunt for the date you
          wanted; this keeps every field labelled and thumb-sized. */
       .oc-table-wrap { border: none; overflow: visible; }
       .oc-table thead { display: none; }
       .oc-table, .oc-table tbody, .oc-table tr, .oc-table td { display: block; width: auto; }

       .oc-table tbody tr {
         position: relative;
         margin-bottom: 10px;
         padding: 12px 14px 12px;
         border: 1px solid var(--th-border);
         border-radius: 12px;
         background: var(--th-bg-surface);
       }

       .oc-table tbody td {
         padding: 6px 0;
         border-bottom: none;
       }

       .oc-table tbody td::before {
         content: attr(data-label);
         display: block;
         margin-bottom: 3px;
         font-size: 11px;
         font-weight: 700;
         color: var(--th-text-subtle);
       }

       /* The transition arrows point across a column gutter that does not
          exist once each row is a stacked card -- the dates are one above the
          next, and a sideways arrow between them would be misleading. */
       .oc-table td.oc-table__transition {
         padding-right: 0;
       }

       .oc-table td.oc-table__transition::after {
         content: none;
       }

       .oc-table__actions {
         position: absolute;
         top: 8px;
         right: 8px;
         width: auto;
       }

       .oc-table__actions::before { content: none; }

       /* In card layout the checkbox sits next to its label rather than in a
          column of its own. */
       .oc-table__pick {
         width: auto;
         text-align: left;
         display: flex;
         align-items: center;
         gap: 8px;
       }

       .oc-table__pick::before { margin-bottom: 0; }

       .oc-bulk { position: sticky; bottom: 8px; z-index: 2; box-shadow: 0 4px 12px var(--th-shadow); }
       .oc-bulk__clear { margin-left: 0; }

     }

     /* ══ Application shell ═══════════════════════════════════════════════
        A persistent sidebar and top bar on every page, so no one has to go
        back to Home to get somewhere else.

        Both are fixed and the body is padded around them. That is what lets
        one partial (templates/global_nav.html) give the whole application a
        shell without wrapping every page's markup in a new container -- the
        pages keep their own <main> exactly as they are. */
     :root {
       --app-sidebar-w: 224px;
       --app-sidebar-w-collapsed: 66px;
       /* Kept as the sidebar header's height only -- there is no top bar. */
       --app-header-h: 58px;
     }

     body {
       padding-left: var(--app-sidebar-w);
       /* The top bar is gone; this is breathing room, not a reserved strip.
          Pages with their own shell padding sit a little further in, which is
          the intent -- content should start near the top, not below a gap. */
       padding-top: 20px;
       transition: padding-left .16s ease;
     }

     body.app-collapsed { padding-left: var(--app-sidebar-w-collapsed); }

     /* The login page has no shell -- it has no session to build one from. */
     body:not(:has(.app-sidebar)) { padding-left: 0; padding-top: 0; }

     .app-skip {
       position: absolute;
       left: -9999px;
       top: 0;
       z-index: 60;
       padding: 10px 16px;
       background: var(--th-accent);
       color: #fff;
       font-weight: 600;
       border-radius: 0 0 8px 0;
     }

     .app-skip:focus { left: 0; }
     .app-main-anchor { position: absolute; }

     /* ── Sidebar ─────────────────────────────────────────────────────── */
     .app-sidebar {
       position: fixed;
       top: 0;
       left: 0;
       bottom: 0;
       width: var(--app-sidebar-w);
       display: flex;
       flex-direction: column;
       background: var(--th-bg-surface);
       border-right: 1px solid var(--th-border);
       z-index: 50;
       transition: width .16s ease, transform .18s ease;
     }

     body.app-collapsed .app-sidebar { width: var(--app-sidebar-w-collapsed); }

     .app-sidebar__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 8px;
       height: var(--app-header-h);
       flex: 0 0 auto;
       padding: 0 10px 0 14px;
       border-bottom: 1px solid var(--th-border);
     }

     .app-sidebar__brand { display: inline-flex; align-items: center; min-width: 0; }

     /* The wordmark is constrained by WIDTH -- at 5.4:1 a height rule would
        push it past the rail. */
     .app-sidebar__logo { width: 132px; max-width: 100%; height: auto; }
     .app-sidebar__logomark { display: none; height: 26px; width: auto; }

     /* Quiet by default, blue when reached -- chrome, not a call to action. */
     .app-sidebar__toggle {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       flex: 0 0 auto;
       border: 1px solid transparent;
       border-radius: 7px;
       background: transparent;
       color: #64748b;
       cursor: pointer;
       transition: background .14s, color .14s, border-color .14s;
     }

     .app-sidebar__toggle:hover {
       background: var(--th-accent-bg);
       border-color: #bfdbfe;
       color: var(--th-accent);
     }

     .app-sidebar__toggle:focus-visible {
       outline: none;
       border-color: var(--th-accent);
       box-shadow: 0 0 0 3px var(--th-accent-bg);
       color: var(--th-accent);
     }

     /* Collapsed: the logo and the control stack, so both stay reachable and
        nothing overlaps at 66px. The header grows to fit them. */
     body.app-collapsed .app-sidebar__header {
       flex-direction: column;
       justify-content: center;
       gap: 6px;
       height: auto;
       padding: 10px 0;
     }

     body.app-collapsed .app-sidebar__logo { display: none; }
     body.app-collapsed .app-sidebar__logomark { display: block; height: 22px; }

     .app-nav {
       flex: 1 1 auto;
       overflow-y: auto;
       overflow-x: hidden;
       padding: 10px 10px 20px;
     }

     .app-nav__loading { display: flex; flex-direction: column; gap: 10px; padding: 8px; }

     .app-nav__loading span {
       height: 12px;
       border-radius: 6px;
       background: var(--th-bg-sunken);
     }

     .app-navitem {
       display: flex;
       align-items: center;
       gap: 10px;
       width: 100%;
       /* Tighter than before but still a 36px target -- comfortable for a
          mouse and acceptable for a thumb. */
       padding: 8px 10px;
       border: none;
       border-radius: 9px;
       background: none;
       color: var(--th-text-3);
       font-family: inherit;
       font-size: 14px;
       font-weight: 500;
       text-align: left;
       text-decoration: none;
       cursor: pointer;
       white-space: nowrap;
       transition: background .12s, color .12s;
     }

     .app-navitem:hover { background: var(--th-bg-sunken); color: var(--th-text); }

     .app-navitem:focus-visible {
       outline: none;
       box-shadow: 0 0 0 2px var(--th-accent);
     }

     .app-navitem > i:first-child { width: 17px; text-align: center; font-size: 14px; color: var(--th-text-muted); }
     .app-navitem--top { font-weight: 600; font-size: 13.5px; }

     /* Active is never colour alone: a left rule and a heavier weight carry
        it too, and the link is marked aria-current="page". */
     .app-navitem.is-active {
       position: relative;
       background: var(--th-accent-bg);
       color: var(--th-accent);
       font-weight: 650;
     }

     .app-navitem.is-active > i:first-child { color: var(--th-accent); }

     .app-navitem.is-active::before {
       content: "";
       position: absolute;
       left: -10px;
       top: 6px;
       bottom: 6px;
       width: 3px;
       border-radius: 0 3px 3px 0;
       background: var(--th-accent);
     }

     .app-navgroup__toggle.is-current-section { color: var(--th-accent); }
     .app-navgroup__toggle.is-current-section > i:first-child { color: var(--th-accent); }

     .app-navgroup__chevron {
       margin-left: auto;
       font-size: 11px;
       color: var(--th-text-subtle);
       transition: transform .15s;
     }

     .app-navgroup.is-open .app-navgroup__chevron { transform: rotate(180deg); }

     .app-navgroup__items { display: none; margin: 1px 0 4px 13px; padding-left: 8px; border-left: 1px solid var(--th-border); }
     .app-navgroup.is-open .app-navgroup__items { display: block; }

     .app-navitem--child { font-size: 13px; padding: 6px 10px; }
     .app-navitem--child .app-navitem__icon { display: none; }

     /* ── Collapsed: icons only, label as a tooltip ───────────────────── */
     body.app-collapsed .app-navitem > span,
     body.app-collapsed .app-navgroup__chevron { display: none; }

     body.app-collapsed .app-navitem { justify-content: center; padding: 9px 0; }

     /* With the labels hidden, a group whose child is the current page has no
        other way to say so -- so the rail marks the parent itself. */
     body.app-collapsed .app-navgroup.has-active > .app-navgroup__toggle {
       position: relative;
       background: var(--th-accent-bg);
       color: var(--th-accent);
     }

     body.app-collapsed .app-navgroup.has-active > .app-navgroup__toggle::before {
       content: "";
       position: absolute;
       left: -8px;
       top: 5px;
       bottom: 5px;
       width: 3px;
       border-radius: 0 3px 3px 0;
       background: var(--th-accent);
     }
     body.app-collapsed .app-navgroup__items { margin-left: 0; padding-left: 0; border-left: none; }
     body.app-collapsed .app-navitem--child .app-navitem__icon { display: inline; }
     body.app-collapsed .app-nav { padding: 12px 8px; }

     /* ── Collapsed labels ────────────────────────────────────────────────
        The rail hides its labels, so the label has to come back on hover as a
        tooltip. It cannot be a CSS pseudo-element: .app-nav scrolls, and an
        absolutely-positioned child of a scrolling box is CLIPPED by it -- the
        bubble simply never appeared outside the sidebar. So one element lives
        on <body> and is positioned against the hovered item (see the tooltip
        block in global_nav.html). */
     .app-tip {
       position: fixed;
       z-index: 200;
       padding: 8px 13px;
       border-radius: 8px;
       background: #111827;
       color: #fff;
       font-family: inherit;
       font-size: 13.5px;
       font-weight: 650;
       line-height: 1.2;
       white-space: nowrap;
       box-shadow: 0 6px 18px rgba(15, 23, 42, .3);
       pointer-events: none;
       opacity: 0;
       transform: translateX(-4px);
       transition: opacity .1s ease, transform .1s ease;
     }

     .app-tip.is-visible { opacity: 1; transform: translateX(0); }

     /* The caret, pointing back at the icon it belongs to. */
     .app-tip::after {
       content: "";
       position: absolute;
       left: -4px;
       top: 50%;
       width: 9px;
       height: 9px;
       transform: translateY(-50%) rotate(45deg);
       border-radius: 2px;
       background: #111827;
     }

     /* Active in the collapsed rail is the tinted pill and the blue glyph --
        no left bar. */
     body.app-collapsed .app-navitem.is-active::before,
     body.app-collapsed .app-navgroup.has-active > .app-navgroup__toggle::before { content: none; }

     body.app-collapsed .app-navgroup.has-active > .app-navgroup__toggle {
       background: var(--th-accent-bg);
       color: var(--th-accent);
     }

     .app-userbox {
       display: flex;
       align-items: center;
       gap: 10px;
       flex: 0 0 auto;
       padding: 12px 14px;
       border-top: 1px solid var(--th-border);
     }

     .app-userbox__avatar {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       flex: 0 0 auto;
       border-radius: 50%;
       background: var(--th-text);
       color: #fff;
       font-size: 12px;
       font-weight: 700;
     }

     .app-userbox__text { min-width: 0; flex: 1 1 auto; }

     .app-userbox__name {
       display: block;
       font-size: 13px;
       font-weight: 600;
       color: var(--th-text-2);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }

     .app-userbox__logout {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 30px;
       height: 30px;
       flex: 0 0 auto;
       border-radius: 7px;
       color: var(--th-text-muted);
       text-decoration: none;
     }

     .app-userbox__logout:hover { background: var(--th-bg-sunken); color: var(--th-text-2); }

     .app-userbox__logout:focus-visible {
       outline: none;
       box-shadow: 0 0 0 3px var(--th-accent-bg);
       color: var(--th-accent);
     }

     /* Collapsed: initials only, stacked with the logout beneath. */
     body.app-collapsed .app-userbox { flex-direction: column; gap: 8px; padding: 10px 0; }
     body.app-collapsed .app-userbox__text { display: none; }

     .app-scrim {
       position: fixed;
       inset: 0;
       background: rgba(15, 23, 42, .35);
       z-index: 48;
     }

     /* ── Tablet: sidebar defaults to icons ───────────────────────────── */
     @media (max-width: 1180px) {
       body { padding-left: var(--app-sidebar-w-collapsed); }
     }

     /* ── Mobile ──────────────────────────────────────────────────────────
        With no top bar there is nowhere to hang a hamburger, and a button
        floating over the content was ruled out -- so the rail itself stays on
        screen at collapsed width and its own toggle expands it over the page
        as a drawer. The way in is always visible, and the page keeps the rest
        of the width. */
     @media (max-width: 860px) {
       body { padding-left: var(--app-sidebar-w-collapsed); }

       .app-sidebar { width: var(--app-sidebar-w-collapsed); }

       /* Expanded on a phone means "over the content", never "push it". */
       body.app-nav-open .app-sidebar {
         width: var(--app-sidebar-w);
         box-shadow: 4px 0 16px rgba(15, 23, 42, .12);
       }

       /* While open, show labels even if the desktop preference is collapsed. */
       body.app-nav-open .app-navitem > span,
       body.app-nav-open .app-navgroup__chevron,
       body.app-nav-open .app-userbox__text { display: flex; }

       body.app-nav-open .app-sidebar__header {
         flex-direction: row;
         justify-content: space-between;
         height: var(--app-header-h);
         padding: 0 10px 0 14px;
       }

       body.app-nav-open .app-sidebar__logo { display: block; }
       body.app-nav-open .app-sidebar__logomark { display: none; }

       body:not(.app-nav-open) .app-sidebar__logo { display: none; }
       body:not(.app-nav-open) .app-sidebar__logomark { display: block; height: 22px; }

       body.app-nav-open .app-navitem { justify-content: flex-start; padding: 8px 10px; }
       body.app-nav-open .app-userbox { flex-direction: row; padding: 12px 14px; }

       /* Closed, the rail is icon-only regardless of the saved preference. */
       body:not(.app-nav-open) .app-navitem > span,
       body:not(.app-nav-open) .app-navgroup__chevron,
       body:not(.app-nav-open) .app-userbox__text { display: none; }

       body:not(.app-nav-open) .app-navitem { justify-content: center; padding: 9px 0; }
       body:not(.app-nav-open) .app-userbox { flex-direction: column; padding: 10px 0; }

       body:not(.app-nav-open) .app-sidebar__header {
         flex-direction: column;
         justify-content: center;
         gap: 6px;
         height: auto;
         padding: 10px 0;
       }
     }

     /* ── Home / Quick Access ─────────────────────────────────────────── */
     .home-shell { max-width: 1280px; margin: 0 auto; padding: 26px 26px 48px; }

     .home-head { margin-bottom: 22px; }

     .home-title {
       margin: 0;
       font-size: 29px;
       font-weight: 700;
       color: var(--th-text);
     }

     .home-sub { margin: 5px 0 0; font-size: 14px; color: var(--th-text-muted); }

     .home-section {
       padding: 22px;
       background: var(--th-bg-surface);
       border: 1px solid var(--th-border);
       border-radius: 14px;
       box-shadow: 0 1px 2px var(--th-shadow);
     }

     .home-section__head { margin-bottom: 16px; }
     .home-section__title { margin: 0; font-size: 17px; font-weight: 650; color: var(--th-text); }
     .home-section__hint { margin: 3px 0 0; font-size: 13px; color: var(--th-text-muted); }

     .home-cards {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 12px;
     }

     .home-card {
       display: flex;
       align-items: center;
       gap: 14px;
       padding: 16px;
       border: 1px solid var(--th-border);
       border-radius: 12px;
       background: var(--th-bg-surface);
       text-decoration: none;
       transition: border-color .15s, box-shadow .15s, transform .12s;
     }

     .home-card:hover {
       border-color: #bfdbfe;
       box-shadow: 0 4px 12px var(--th-shadow);
       transform: translateY(-1px);
     }

     .home-card:focus-visible {
       outline: none;
       border-color: var(--th-accent);
       box-shadow: 0 0 0 3px var(--th-accent-bg);
     }

     .home-card__icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 42px;
       height: 42px;
       flex: 0 0 auto;
       border-radius: 10px;
       background: var(--th-accent-bg);
       color: var(--th-accent);
       font-size: 15px;
     }

     .home-card__text { min-width: 0; flex: 1 1 auto; }

     .home-card__name {
       display: block;
       font-size: 14.5px;
       font-weight: 650;
       color: var(--th-text);
     }

     .home-card__desc {
       display: block;
       margin-top: 3px;
       font-size: 12.5px;
       color: var(--th-text-muted);
     }

     .home-card__chevron { color: var(--th-text-subtle); font-size: 13px; }
     .home-card:hover .home-card__chevron { color: var(--th-accent); }

     .home-empty {
       padding: 28px;
       text-align: center;
       color: var(--th-text-muted);
       font-size: 14px;
     }

     /* ── No access ───────────────────────────────────────────────────────
        The page require_role_middleware renders when it turns a request away
        at "/". Deliberately quiet: this is a permissions gap, not a failure,
        and shouting about it makes people think they broke something. */
     .na-panel {
       max-width: 520px;
       margin: 64px auto 0;
       padding: 32px;
       text-align: center;
       background: var(--th-bg-surface);
       border: 1px solid var(--th-border);
       border-radius: 14px;
       box-shadow: 0 1px 2px var(--th-shadow);
     }

     .na-panel__icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 46px;
       height: 46px;
       margin-bottom: 14px;
       border-radius: 50%;
       background: var(--th-bg-sunken);
       color: var(--th-text-muted);
       font-size: 18px;
     }

     .na-panel__title {
       margin: 0 0 10px;
       font-size: 21px;
       font-weight: 700;
       color: var(--th-text);
     }

     .na-panel__text {
       margin: 0 0 10px;
       font-size: 14px;
       line-height: 1.55;
       color: var(--th-text-muted);
     }

     .na-panel__actions { margin-top: 18px; }

     @media (max-width: 860px) {
       .home-shell { padding: 18px 16px 40px; }
       .home-cards { grid-template-columns: minmax(0, 1fr); }
       .na-panel { margin-top: 32px; padding: 24px; }
     }