/* ── 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;
     }

     .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;
     }

     /* ===== 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);
     }

     .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;
     }

     /* Body cells default to white (odd rows) -- the even-row stripe rule
        below overrides this for even rows. Split from the th rule below so
        the sticky header cells keep matching the other (non-sticky) header
        cells' gray instead of going white like the sticky body cells. */
     .rental-tracker-wrap .csv-table td:nth-child(1),
     .rental-tracker-wrap .csv-table td:nth-child(2) {
       background: #fff;
     }

     .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;
     }

     /* These two columns are sticky (pinned during horizontal scroll), which
        is why they need their own opaque background above instead of just
        inheriting the row's -- but that means the even-row stripe has to be
        repeated here too, or these two cells stay plain white while the rest
        of the row is visibly striped. */
     .rental-tracker-wrap .csv-table tbody tr:nth-child(even) td:nth-child(1),
     .rental-tracker-wrap .csv-table tbody tr:nth-child(even) td:nth-child(2) {
       background: #e9edf3;
     }

     .rental-tracker-wrap .csv-table tbody tr:hover td:nth-child(1),
     .rental-tracker-wrap .csv-table tbody tr:hover td:nth-child(2) {
       background: #f8fafc;
     }

     /* 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;
     }

     /* Same item, quantity > 1 -- both the collapsed group-summary head row
        and its (initially hidden) child rows get a distinct tint so a
        grouped item is visually obvious even before/after expanding it.
        The tint cycles across rentalTrackerGroupColorCount colors (see
        RentalTrackerRow.GroupColorIndex) so two grouped items stacked back
        to back -- e.g. TESTING ITEM (7) immediately followed by
        375 compressor (4) -- read as visibly different groups instead of
        blurring into one block of the same color. Selectors have to
        out-specificity .csv-table tbody tr:nth-child(even)'s zebra striping
        (declared later in this file) or every other grouped row would
        silently fall back to the plain stripe color. The Customer/Job ID
        columns are sticky (see the comment above .csv-table td:nth-child(1)
        near line 8951) so they paint their own opaque background instead of
        showing the row's through -- these need their own copy of each tint
        at matching specificity too, or those two columns would stay plain
        white/striped while the rest of the row is colored. */
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--group-color-0,
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--group-color-0 td:nth-child(1),
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--group-color-0 td:nth-child(2) {
       background: #faf5ff;
     }

     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--group-color-1,
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--group-color-1 td:nth-child(1),
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--group-color-1 td:nth-child(2) {
       background: #eff6ff;
     }

     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--group-color-2,
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--group-color-2 td:nth-child(1),
     .rental-tracker-wrap .csv-table tbody tr.rental-tracker__row--group-color-2 td:nth-child(2) {
       background: #f0fdf4;
     }

     .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);
     }

     .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%;
     }

     .csv-table--po-summary th:nth-child(1),
     .csv-table--po-summary td:nth-child(1) {
       width: 7%;
     }

     .csv-table--po-summary th:nth-child(2),
     .csv-table--po-summary td:nth-child(2) {
       width: 8%;
     }

     .csv-table--po-summary th:nth-child(3),
     .csv-table--po-summary td:nth-child(3) {
       width: 8%;
     }

     .csv-table--po-summary th:nth-child(4),
     .csv-table--po-summary td:nth-child(4) {
       width: 8%;
     }

     .csv-table--po-summary th:nth-child(5),
     .csv-table--po-summary td:nth-child(5) {
       width: 7%;
     }

     .csv-table--po-summary th:nth-child(6),
     .csv-table--po-summary td:nth-child(6) {
       width: 6%;
     }

     .csv-table--po-summary th:nth-child(7),
     .csv-table--po-summary td:nth-child(7) {
       width: 7%;
     }

     .csv-table--po-summary th:nth-child(8),
     .csv-table--po-summary td:nth-child(8) {
       width: 6%;
     }

     .csv-table--po-summary th:nth-child(9),
     .csv-table--po-summary td:nth-child(9) {
       width: 8%;
     }

     .csv-table--po-summary th:nth-child(10),
     .csv-table--po-summary td:nth-child(10) {
       width: 8%;
     }

     .csv-table--po-summary th:nth-child(11),
     .csv-table--po-summary td:nth-child(11) {
       width: 7%;
     }

     .csv-table--po-summary th:nth-child(12),
     .csv-table--po-summary td:nth-child(12) {
       width: 4%;
     }

     .csv-table--po-summary th:nth-child(13),
     .csv-table--po-summary td:nth-child(13) {
       width: 10%;
     }

     .csv-table--po-summary th:nth-child(14),
     .csv-table--po-summary td:nth-child(14) {
       width: 6%;
     }

     .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;
     }