:root{
  --sidebar-width:252px;
  --sidebar-collapsed:74px;
  --brand:#198754;
  --brand-dark:#146c43;
  --brand-soft:#eaf7ef;
  --page-bg:#f5f7f9;
  --border:#e5e9ee;
  --text:#25313c;
  --muted:#6c757d;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--page-bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,"Noto Sans Thai",sans-serif;font-size:.95rem}
a{color:var(--brand-dark)}

/* Sidebar - same working pattern as Supplier Return */
.app-sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);z-index:1040;background:#fff;border-right:1px solid var(--border);flex-direction:column;transition:width .2s ease;box-shadow:2px 0 12px rgba(31,45,61,.025)}
.sidebar-brand{height:76px;display:flex;align-items:center;padding:0 14px 0 16px;border-bottom:1px solid var(--border);gap:8px}
.brand-link{display:flex;align-items:center;min-width:0;gap:11px;flex:1;color:var(--text)}
.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;flex:0 0 auto;box-shadow:0 6px 14px rgba(25,135,84,.18)}
.brand-mark-sm{width:34px;height:34px;border-radius:10px;font-size:1rem}
.brand-copy{min-width:0;display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.brand-copy strong{font-size:.98rem}
.brand-copy small{font-size:.72rem;color:var(--muted);margin-top:4px}
.sidebar-toggle{width:30px;height:30px;border:0;border-radius:8px;color:#7a8793;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.sidebar-toggle:hover{background:#f1f4f6;color:var(--text)}
.sidebar-section-label{padding:20px 20px 8px;font-size:.72rem;color:#98a2ad;text-transform:uppercase;font-weight:700;letter-spacing:.06em;white-space:nowrap;overflow:hidden}
.sidebar-nav{padding:0 10px;display:grid;gap:5px}
.sidebar-link{display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#56616c;font-weight:600;white-space:nowrap;overflow:hidden;transition:background-color .15s,color .15s}
.sidebar-link i{width:24px;flex:0 0 24px;text-align:center;font-size:1.12rem}
.sidebar-link:hover{background:#f4f7f5;color:var(--brand-dark)}
.sidebar-link.active{background:var(--brand-soft);color:var(--brand-dark)}
.sidebar-footer{padding:14px;border-top:1px solid var(--border)}
.sidebar-help{display:flex;gap:10px;align-items:flex-start;border-radius:10px;background:#f7f9fa;padding:11px;color:#66727d;overflow:hidden}
.sidebar-help>i{flex:0 0 22px;text-align:center;margin-top:1px}
.sidebar-help div{display:flex;flex-direction:column;white-space:nowrap;overflow:hidden}
.sidebar-help strong{font-size:.82rem;color:#414b55}
.sidebar-help small{font-size:.68rem;color:#8b96a1;text-overflow:ellipsis;overflow:hidden}
.app-content{margin-left:var(--sidebar-width);min-width:0;transition:margin-left .2s ease;overflow-x:auto}
body.sidebar-collapsed .app-sidebar{width:var(--sidebar-collapsed)}
body.sidebar-collapsed .app-content{margin-left:var(--sidebar-collapsed)}
body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .sidebar-section-label,body.sidebar-collapsed .sidebar-link span,body.sidebar-collapsed .sidebar-help div{display:none}
body.sidebar-collapsed .sidebar-brand{padding-left:16px;justify-content:center}
body.sidebar-collapsed .brand-link{flex:0 0 auto}
body.sidebar-collapsed .sidebar-toggle{position:absolute;right:-15px;background:#fff;border:1px solid var(--border);box-shadow:0 2px 7px rgba(0,0,0,.07)}
body.sidebar-collapsed .sidebar-toggle i{transform:rotate(180deg)}
body.sidebar-collapsed .sidebar-link{justify-content:center;padding-left:10px;padding-right:10px}
body.sidebar-collapsed .sidebar-help{justify-content:center}

/* Mobile header/offcanvas */
.mobile-topbar{z-index:1030;height:60px}.mobile-topbar .navbar-brand{font-size:.95rem;display:flex;align-items:center;gap:8px}.mobile-spacer{width:42px}.mobile-offcanvas{width:min(310px,88vw)}.mobile-nav{padding:0}.mobile-nav .sidebar-link{font-size:.96rem}

/* Main content */
.app-shell{max-width:1500px;margin:0 auto}
.muted-label{font-size:.76rem;color:#87919b;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.big-number{font-size:1.55rem;font-weight:750;letter-spacing:-.025em;color:#202a33}
.app-card,.stat-card,.supplier-block{background:#fff;border:1px solid var(--border);box-shadow:0 2px 7px rgba(31,45,61,.035)}
.app-card{border-radius:12px}.stat-card{border-radius:10px}.supplier-block{border-radius:12px;overflow:hidden}
.supplier-head{background:#fbfcfd;padding:1rem 1.1rem;border-bottom:1px solid var(--border)}
.bill-row{background:#fbfcfd;border:1px solid #e9edf0;border-radius:10px;padding:.85rem}

/* Bootstrap form polish */
.form-label{color:#46515b;margin-bottom:.4rem}.form-control,.form-select,.input-group-text,.ts-control{border-color:#d9e0e5;border-radius:8px!important;min-height:40px}.form-control:focus,.form-select:focus,.ts-control.focus{border-color:#86b99f;box-shadow:0 0 0 .2rem rgba(25,135,84,.10)}
.btn{border-radius:8px;font-weight:600}.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark);--bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark)}
.btn-success{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark)}
.btn-outline-primary{--bs-btn-color:var(--brand-dark);--bs-btn-border-color:#94c5aa;--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand)}
.rounded-pill{border-radius:50rem!important}

/* Tables */
.table{--bs-table-bg:transparent}.table>thead th{background:#f7f9fa;font-size:.79rem;color:#697580;font-weight:700;white-space:nowrap;border-bottom-color:#dfe5e9;padding-top:.75rem;padding-bottom:.75rem}.table>tbody td{vertical-align:middle;border-color:#edf0f2;padding-top:.76rem;padding-bottom:.76rem}.table-hover>tbody>tr:hover>*{--bs-table-bg-state:#fbfdfc}
.badge{font-weight:650}.badge-soft-warning{background:#fff3cd;color:#735c0f}.badge-soft-primary{background:#e7f1ff;color:#185aa8}.badge-soft-success{background:#e5f6ec;color:#17633d}.badge-soft-secondary{background:#edf0f3;color:#59636e}

/* Summary bar */
.sticky-summary{position:sticky;bottom:10px;z-index:5;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border:1px solid #dfe5e9;border-radius:12px;box-shadow:0 8px 25px rgba(31,45,61,.12)}
.slip-preview{max-width:100%;max-height:520px;object-fit:contain;border-radius:10px;border:1px solid var(--border);background:#fff}


/* Staff submission page visual grouping */
.staff-card{
  background:linear-gradient(135deg,#ffffff 0%,#f2fbf6 100%);
  border-color:#cfe7d8;
  box-shadow:0 6px 18px rgba(25,135,84,.06);
}
.staff-card .form-label{color:#24563d}

.supplier-groups-wrap,.supplier-actions-wrap,.index-content-width{width:min(100%,1050px)}
.supplier-block{width:100%}
@media (min-width:1200px){
  .supplier-groups-wrap,.supplier-actions-wrap,.index-content-width{width:min(100%,980px)}
}
.supplier-block{position:relative}
.supplier-block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;z-index:2}
.supplier-tone-1{border-color:#cfe1ff}
.supplier-tone-1::before{background:#3b82f6}
.supplier-tone-1 .supplier-head{background:#eef5ff}
.supplier-tone-1 .group-summary{color:#245ea8!important}

.supplier-tone-2{border-color:#d6eadf}
.supplier-tone-2::before{background:#20a464}
.supplier-tone-2 .supplier-head{background:#eefaf3}
.supplier-tone-2 .group-summary{color:#24724b!important}

.supplier-tone-3{border-color:#eadcf8}
.supplier-tone-3::before{background:#8b5cf6}
.supplier-tone-3 .supplier-head{background:#f6f0ff}
.supplier-tone-3 .group-summary{color:#6d45ad!important}

.supplier-tone-4{border-color:#f2dfc8}
.supplier-tone-4::before{background:#e58a2b}
.supplier-tone-4 .supplier-head{background:#fff7ec}
.supplier-tone-4 .group-summary{color:#9b5a17!important}

.bill-row{position:relative;transition:transform .12s ease,box-shadow .12s ease}
.bill-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:10px 0 0 10px}
.bill-row:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(31,45,61,.06)}

/* Bill colors follow the parent Supplier tone so every bill in the same Supplier uses one color */
.supplier-tone-1 .bill-row{background:#f8fbff;border-color:#dce9f8}
.supplier-tone-1 .bill-row::before{background:#3b82f6}
.supplier-tone-2 .bill-row{background:#f7fcf9;border-color:#d7eadf}
.supplier-tone-2 .bill-row::before{background:#20a464}
.supplier-tone-3 .bill-row{background:#fbf8ff;border-color:#e7dcf6}
.supplier-tone-3 .bill-row::before{background:#8b5cf6}
.supplier-tone-4 .bill-row{background:#fffaf4;border-color:#f2e1cb}
.supplier-tone-4 .bill-row::before{background:#e58a2b}

.supplier-head .form-label{font-size:.82rem;letter-spacing:.01em}
.supplier-head .ts-control,.supplier-head .form-select{background-color:#fff}
.bill-row .form-label{margin-bottom:.25rem}
.bill-row .input-group-text{background:#fff;font-weight:600;color:#697580}
.bill-row .bill-date-col,.bill-row .bill-amount-col{max-width:100%}
@media (min-width:1200px){
  .bill-row .bill-date-col{max-width:250px}
  .bill-row .bill-amount-col{max-width:330px}
}
.bill-row .bill-date-col .form-control,.bill-row .bill-date-col .form-label{transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.bill-row .bill-date-col .form-control{font-weight:600}

.supplier-tone-1 .bill-date-col .form-label{color:#245ea8}
.supplier-tone-1 .bill-date-col .form-control{background:#eef5ff;border-color:#bfd4fb;color:#245ea8}
.supplier-tone-1 .bill-date-col .form-control:focus{border-color:#7aa6ec;box-shadow:0 0 0 .2rem rgba(59,130,246,.14)}

.supplier-tone-2 .bill-date-col .form-label{color:#24724b}
.supplier-tone-2 .bill-date-col .form-control{background:#eefaf3;border-color:#bfe3cd;color:#24724b}
.supplier-tone-2 .bill-date-col .form-control:focus{border-color:#6db991;box-shadow:0 0 0 .2rem rgba(32,164,100,.14)}

.supplier-tone-3 .bill-date-col .form-label{color:#6d45ad}
.supplier-tone-3 .bill-date-col .form-control{background:#f6f0ff;border-color:#dac9f3;color:#6d45ad}
.supplier-tone-3 .bill-date-col .form-control:focus{border-color:#a887e9;box-shadow:0 0 0 .2rem rgba(139,92,246,.14)}

.supplier-tone-4 .bill-date-col .form-label{color:#9b5a17}
.supplier-tone-4 .bill-date-col .form-control{background:#fff7ec;border-color:#f0d6b4;color:#9b5a17}
.supplier-tone-4 .bill-date-col .form-control:focus{border-color:#eca557;box-shadow:0 0 0 .2rem rgba(229,138,43,.14)}


/* Numbering */
.sequence-badge{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:800;line-height:1;white-space:nowrap;background:#edf1f4;color:#56616c;border:1px solid #dde3e8}
.supplier-tone-1 .supplier-seq,.supplier-tone-1 .bill-seq{background:#e5efff;color:#245ea8;border-color:#bfd4fb}
.supplier-tone-2 .supplier-seq,.supplier-tone-2 .bill-seq{background:#e5f6ec;color:#24724b;border-color:#bfe3cd}
.supplier-tone-3 .supplier-seq,.supplier-tone-3 .bill-seq{background:#f0e8fb;color:#6d45ad;border-color:#dac9f3}
.supplier-tone-4 .supplier-seq,.supplier-tone-4 .bill-seq{background:#fff0dc;color:#9b5a17;border-color:#f0d6b4}

/* Searchable dropdown: selected value and search box are separate controls */
.search-select{position:relative;width:100%}
.searchable-native{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;border:0!important}
.search-select-toggle{display:block;width:100%;min-height:40px;padding-right:2.25rem;background-color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-select-toggle.is-placeholder{color:#6c757d}
.search-select-menu{border:1px solid #d9e0e5;border-radius:10px;box-shadow:0 12px 28px rgba(31,45,61,.14);min-width:100%;max-width:min(520px,92vw)}
.search-select-input{width:100%;background:#f8fafb!important;border-color:#d9e0e5!important}
.search-select-options{max-height:260px;overflow-y:auto;overscroll-behavior:contain}
.search-select-option{border-radius:7px;padding:.55rem .65rem;white-space:normal}
.search-select-option.active,.search-select-option:active{background:var(--brand-soft);color:var(--brand-dark)}
.search-select-empty{padding:.8rem;text-align:center;color:#8a949e;font-size:.88rem}

@media (max-width:991.98px){.app-content{margin-left:0}.app-shell{max-width:100%}}
@media (max-width:767.98px){body{font-size:.92rem}.app-card,.supplier-block{border-radius:10px}.big-number{font-size:1.25rem}.sticky-summary{bottom:6px}.table-responsive{font-size:.86rem}.table>thead th,.table>tbody td{padding-left:.65rem;padding-right:.65rem}.form-control,.form-select,.ts-control{font-size:16px!important}.btn-lg{font-size:1rem}.desktop-only{display:none!important}}
@media (max-width:420px){.app-shell{padding-left:10px!important;padding-right:10px!important}.bill-row{padding:.7rem}.sticky-summary{padding:.75rem!important}.table-responsive{font-size:.82rem}}


/* Supplier searchable dropdown follows the supplier group tone */
.supplier-tone-1 .search-select-menu{background:#f7faff;border-color:#bfd4fb}
.supplier-tone-1 .search-select-input{background:#eef5ff!important;border-color:#bfd4fb!important;color:#245ea8}
.supplier-tone-1 .search-select-input:focus{border-color:#7aa6ec!important;box-shadow:0 0 0 .2rem rgba(59,130,246,.14)}
.supplier-tone-1 .search-select-option:hover,.supplier-tone-1 .search-select-option:focus{background:#e7f0ff;color:#245ea8}
.supplier-tone-1 .search-select-option.active,.supplier-tone-1 .search-select-option:active{background:#3b82f6;color:#fff}

.supplier-tone-2 .search-select-menu{background:#f7fcf9;border-color:#bfe3cd}
.supplier-tone-2 .search-select-input{background:#eefaf3!important;border-color:#bfe3cd!important;color:#24724b}
.supplier-tone-2 .search-select-input:focus{border-color:#6db991!important;box-shadow:0 0 0 .2rem rgba(32,164,100,.14)}
.supplier-tone-2 .search-select-option:hover,.supplier-tone-2 .search-select-option:focus{background:#e3f5eb;color:#24724b}
.supplier-tone-2 .search-select-option.active,.supplier-tone-2 .search-select-option:active{background:#20a464;color:#fff}

.supplier-tone-3 .search-select-menu{background:#fcf9ff;border-color:#dac9f3}
.supplier-tone-3 .search-select-input{background:#f6f0ff!important;border-color:#dac9f3!important;color:#6d45ad}
.supplier-tone-3 .search-select-input:focus{border-color:#a887e9!important;box-shadow:0 0 0 .2rem rgba(139,92,246,.14)}
.supplier-tone-3 .search-select-option:hover,.supplier-tone-3 .search-select-option:focus{background:#efe6ff;color:#6d45ad}
.supplier-tone-3 .search-select-option.active,.supplier-tone-3 .search-select-option:active{background:#8b5cf6;color:#fff}

.supplier-tone-4 .search-select-menu{background:#fffaf4;border-color:#f0d6b4}
.supplier-tone-4 .search-select-input{background:#fff7ec!important;border-color:#f0d6b4!important;color:#9b5a17}
.supplier-tone-4 .search-select-input:focus{border-color:#eca557!important;box-shadow:0 0 0 .2rem rgba(229,138,43,.14)}
.supplier-tone-4 .search-select-option:hover,.supplier-tone-4 .search-select-option:focus{background:#fff0db;color:#9b5a17}
.supplier-tone-4 .search-select-option.active,.supplier-tone-4 .search-select-option:active{background:#e58a2b;color:#fff}

/* Searchable dropdown inside SweetAlert edit dialog */
.swal2-popup,.swal2-html-container{overflow:visible!important}
.swal2-popup .search-select{position:relative;z-index:3}
/* The currently opened dropdown must sit above every field below it. */
.swal2-popup .search-select.search-select-open,
.swal2-popup .search-select:has(.search-select-menu.show){z-index:10050!important}
.swal2-popup .search-select-menu{z-index:10060!important;text-align:left;max-height:330px;overflow:visible;background:#fff;opacity:1}
/* Keep SweetAlert action buttons underneath an opened searchable dropdown.
   This is especially important for the last field (ผู้ส่ง), whose menu can extend over the buttons. */
.swal2-popup .swal2-actions{position:relative!important;z-index:1!important}
/* Keep buttons visible, but place the edit form/dropdown in a higher stacking layer.
   The opened ผู้ส่ง dropdown may overlap the action area without the buttons covering it. */
.swal2-popup .swal2-html-container{position:relative!important;z-index:20!important}
.swal2-popup .swal2-actions{position:relative!important;z-index:1!important}
.swal2-popup.search-dropdown-active .search-select.search-select-open{z-index:10050!important}
.swal2-popup.search-dropdown-active .search-select.search-select-open .search-select-menu{z-index:10060!important}
.swal2-popup .search-select-open .search-select-menu,
.swal2-popup .search-select:has(.search-select-menu.show) .search-select-menu{z-index:10060!important}
.swal2-popup .search-select-options{max-height:220px}
.swal2-popup .search-select-toggle{background:#fff}
.swal2-popup .search-select-input{background:#f8fafb!important}

/* Duplicate bill warning */
.duplicate-item{border:1px solid #e4e9ee;background:#f8f9fa;border-radius:10px;padding:.7rem .8rem;margin-top:.55rem}
.duplicate-item.duplicate-pending{border-color:#f0c36a;background:#fff8e6}

/* Owner duplicate warning - 2 levels */
.duplicate-alert-wrap{border-bottom:1px solid #eceff2}
.duplicate-payment-alert{padding:.9rem 1rem;border-left:4px solid transparent}
.duplicate-payment-alert+.duplicate-payment-alert{border-top:1px solid rgba(0,0,0,.06)}
.duplicate-payment-alert-light{background:#fff3bf;color:#725500;border-left-color:#f0ad00}
.duplicate-payment-alert-strong{background:#ffd6d9;color:#8a1c24;border-left-color:#dc3545}
.duplicate-alert-chip{display:inline-flex;align-items:center;border-radius:999px;padding:.4rem .65rem;font-size:.78rem;font-weight:700;border:1px solid}
.duplicate-alert-chip-light{background:#ffe69c;border-color:#e6ad00;color:#684d00}
.duplicate-alert-chip-strong{background:#ffb8be;border-color:#dc3545;color:#7d1820}
.duplicate-bill-row-light>td{background-color:#ffe39a!important;--bs-table-bg:#ffe39a!important;--bs-table-accent-bg:#ffe39a!important}
.duplicate-bill-row-strong>td{background-color:#ffb3bb!important;--bs-table-bg:#ffb3bb!important;--bs-table-accent-bg:#ffb3bb!important}
.duplicate-label-light{color:#6b4b00}
.duplicate-label-strong{color:#991622}
/* Risk-row hover: force Bootstrap table cells to keep a strong visible fill. */
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-light:hover > td,
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-light:hover > th{
  --bs-table-bg:transparent!important;
  --bs-table-bg-state:transparent!important;
  --bs-table-accent-bg:transparent!important;
  background:#f3b51b!important;
  color:#332400!important;
  box-shadow:inset 0 0 0 9999px #f3b51b!important;
}
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-strong:hover > td,
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-strong:hover > th{
  --bs-table-bg:transparent!important;
  --bs-table-bg-state:transparent!important;
  --bs-table-accent-bg:transparent!important;
  background:#dc3545!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 9999px #dc3545!important;
}
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-light:hover a,
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-light:hover .duplicate-label,
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-light:hover .fw-semibold{color:#332400!important}
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-strong:hover a,
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-strong:hover .duplicate-label,
.owner-bills-table.table-hover > tbody > tr.duplicate-bill-row-strong:hover .fw-semibold{color:#fff!important}
/* Keep action buttons readable on colored risk-row hover. */
.owner-bills-table tr.duplicate-bill-row-light:hover .btn{background:#fff!important;color:#5b4300!important;border-color:#7d5d00!important}
.owner-bills-table tr.duplicate-bill-row-strong:hover .btn{background:#fff!important;color:#9f1f2b!important;border-color:#fff!important}

/* Owner Supplier collapse */
.supplier-collapse-btn{min-width:78px;white-space:nowrap}
.supplier-collapse-btn i{transition:transform .15s ease}
.supplier-collapse-body.collapsing{transition:height .22s ease}
@media (max-width:767.98px){.supplier-collapse-btn{min-width:42px;padding-left:.65rem;padding-right:.65rem}}

/* Owner bill table column balance */
.owner-bills-table{min-width:930px;table-layout:fixed}
.owner-bills-table th:nth-child(3),.owner-bills-table td:nth-child(3),
.owner-bills-table th:nth-child(4),.owner-bills-table td:nth-child(4){white-space:nowrap}
.owner-bills-table td:nth-child(5){white-space:normal}


/* Owner workflow status cards */
.owner-status-panel{max-width:100%}
.status-flow-wrap{display:flex;gap:12px;align-items:stretch}
.status-flow-sequence{display:flex;align-items:stretch;gap:10px;flex:1;min-width:0;flex-wrap:wrap}
.status-summary-card{position:relative;display:flex;align-items:center;gap:14px;min-height:108px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--text);text-decoration:none;box-shadow:0 2px 7px rgba(31,45,61,.035);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;overflow:hidden}
.status-summary-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,45,61,.08);color:var(--text)}
.status-summary-card.active{box-shadow:0 0 0 2px rgba(31,45,61,.06),0 8px 22px rgba(31,45,61,.10);transform:translateY(-1px)}
.status-summary-card.status-all{flex:0 0 230px;background:#f8f9fa}
.status-flow-sequence .status-summary-card{flex:1 1 0;min-width:210px}
.status-card-icon{width:48px;height:48px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;flex:0 0 auto}
.status-card-copy{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.status-card-copy small{font-weight:750;font-size:.95rem;margin-bottom:5px}
.status-card-copy strong{font-size:1.35rem;line-height:1.12;white-space:nowrap}
.status-card-copy em{font-style:normal;font-size:.95rem;margin-top:6px;color:#5f6973;font-weight:600;white-space:nowrap}
.status-card-step{position:absolute;right:10px;top:9px;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;background:rgba(255,255,255,.75)}
.status-flow-arrow{display:flex;align-items:center;justify-content:center;color:#aab3bc;font-size:1.15rem;flex:0 0 18px}
.status-all .status-card-icon{background:#edf0f3;color:#5d6873}.status-all.active{border-color:#9aa5af;background:#f1f3f5}
.status-pending{background:#fffaf0;border-color:#f1dfb1}.status-pending .status-card-icon{background:#fff0c2;color:#8a6711}.status-pending.active{border-color:#e0b94d;background:#fff7df}
.status-paid{background:#f3f8ff;border-color:#cfe1fb}.status-paid .status-card-icon{background:#e3efff;color:#2e67ad}.status-paid.active{border-color:#77a9eb;background:#edf5ff}
.status-finished{background:#f1faf5;border-color:#cfe7d8}.status-finished .status-card-icon{background:#dff4e7;color:#24724b}.status-finished.active{border-color:#70b78f;background:#eaf8f0}
@media (max-width:1100px){.status-flow-wrap{flex-direction:column}.status-summary-card.status-all{flex:1 1 auto}.status-flow-sequence{width:100%}}
@media (max-width:767.98px){.status-flow-sequence{display:grid;grid-template-columns:1fr}.status-flow-arrow{display:none}.status-summary-card{min-height:92px}.status-summary-card.status-all{min-height:88px}.status-card-copy small{font-size:.9rem}.status-card-copy strong{font-size:1.25rem}.status-card-copy em{font-size:.9rem}}

/* Supplier message preview / editable copy text */
.supplier-message-preview{border-top:1px solid #dfe5e9;background:#fff}
.supplier-message-preview[hidden]{display:none!important}
.supplier-message-preview-head{padding:14px 16px;background:#f6f8fa;border-bottom:1px solid #e5e9ee}
.supplier-message-preview-body{padding:16px}
.supplier-message-text{min-height:220px;resize:vertical;line-height:1.65;background:#fffef9;border-color:#d9d3b8;font-family:inherit}
.supplier-message-text:focus{background:#fff;border-color:#a7b8c7;box-shadow:0 0 0 .2rem rgba(80,110,140,.10)}
.supplier-message-meta{font-weight:600}
@media (max-width:767.98px){.supplier-message-text{min-height:250px}.supplier-message-preview-body{padding:12px}}

/* Selected payment summary emphasis */
.selected-payment-label{font-size:.9rem!important;letter-spacing:.02em}
.selected-payment-total{font-size:1.55rem;line-height:1.2;letter-spacing:-.02em;color:#1f2a33}
@media (max-width:767.98px){.selected-payment-total{font-size:1.3rem}.selected-payment-label{font-size:.82rem!important}}

/* Larger summary text for staff submission and pending supplier count */
.group-summary{font-size:1.08rem;font-weight:700;line-height:1.25}
.submit-summary-label{font-size:.9rem!important}
.submit-summary-total{font-size:1.38rem;line-height:1.25;letter-spacing:-.015em}
.pending-bill-count{font-size:1.08rem;font-weight:700}
@media (max-width:767.98px){
  .group-summary{font-size:1rem}
  .submit-summary-label{font-size:.84rem!important}
  .submit-summary-total{font-size:1.2rem}
  .pending-bill-count{font-size:1rem}
}

/* Copy action uses blue so it is visually distinct from green payment action */
.copy-action-btn{
  --copy-btn:#0d6efd;
  --copy-btn-hover:#0b5ed7;
  background:var(--copy-btn);
  border:1px solid var(--copy-btn);
  color:#fff;
  font-weight:650;
}
.copy-action-btn:hover,.copy-action-btn:focus{
  background:var(--copy-btn-hover);
  border-color:var(--copy-btn-hover);
  color:#fff;
  box-shadow:0 0 0 .2rem rgba(13,110,253,.16);
}
.copy-action-btn:active{background:#0a58ca!important;border-color:#0a53be!important;color:#fff!important}


/* Owner payment action dock: always visible while reviewing pending suppliers */
.owner-payment-dock{
  position:fixed;
  left:calc(var(--sidebar-width) + 18px);
  right:18px;
  bottom:14px;
  z-index:1025;
  pointer-events:none;
  transition:left .2s ease;
}
body.sidebar-collapsed .owner-payment-dock{left:calc(var(--sidebar-collapsed) + 18px)}
.owner-payment-dock-inner{
  max-width:1460px;
  margin:0 auto;
  background:rgba(255,255,255,.98);
  border:1px solid #d7e0e5;
  border-radius:14px;
  box-shadow:0 12px 34px rgba(31,45,61,.18);
  backdrop-filter:blur(12px);
  padding:13px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  pointer-events:auto;
}
.owner-payment-dock-summary{min-width:240px}
.owner-selected-supplier{font-size:1rem;font-weight:750;color:#25313c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:620px;margin-top:1px}
.owner-payment-dock-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.owner-payment-dock-actions .btn:disabled{opacity:.48}
.owner-payment-dock-spacer{height:112px}
@media (max-width:991.98px){
  .owner-payment-dock{left:10px;right:10px;bottom:8px}
  body.sidebar-collapsed .owner-payment-dock{left:10px}
  .owner-payment-dock-inner{padding:11px 12px;gap:10px}
  .owner-payment-dock-spacer{height:155px}
}
@media (max-width:767.98px){
  .owner-payment-dock-inner{align-items:stretch;flex-direction:column}
  .owner-payment-dock-summary{min-width:0}
  .owner-selected-supplier{max-width:100%;font-size:.93rem}
  .owner-payment-dock-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .owner-payment-dock-actions #dockPayBtn{grid-column:1 / -1;width:100%}
  .owner-payment-dock-actions .btn{font-size:.9rem;padding:.55rem .7rem}
  .owner-payment-dock-spacer{height:196px}
}


/* Clear filters button: solid red, inverse on hover */
.btn-filter-reset{background:#dc3545;border:1px solid #dc3545;color:#fff;font-weight:700}
.btn-filter-reset:hover,.btn-filter-reset:focus{background:#fff;border-color:#dc3545;color:#dc3545}
.btn-filter-reset:active{background:#f8d7da!important;border-color:#dc3545!important;color:#842029!important}

/* Give workflow cards enough room for bill count and amount */
.status-summary-card{min-width:210px}
.status-summary-card.status-all{min-width:230px}
.status-card-copy{overflow:visible}
.status-card-copy strong,.status-card-copy em{max-width:none;overflow:visible;text-overflow:clip}
@media (max-width:1280px){
  .status-flow-wrap{flex-wrap:wrap}
  .status-summary-card.status-all{flex:1 1 230px}
  .status-flow-sequence{flex:1 1 720px}
}
@media (max-width:900px){
  .status-flow-sequence{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .status-flow-arrow{display:none}
  .status-flow-sequence .status-summary-card{min-width:0}
}
@media (max-width:600px){
  .status-flow-sequence{grid-template-columns:1fr}
  .status-summary-card,.status-summary-card.status-all{min-width:0;width:100%}
}

/* Pending bill count badge per Supplier */
.supplier-pending-badge{background:#fff3cd;color:#7a5d00;border:1px solid #f0d98a;font-size:.86rem;font-weight:700;padding:.5rem .72rem}
.supplier-owner:hover .supplier-pending-badge{background:#ffe69c;color:#664d03;border-color:#e6c85f}

/* CN deduction on payment confirmation */
.cn-option{background:#fff;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.cn-option:hover{border-color:#b8d8c6!important;background:#fbfefc}
.cn-option-active{border-color:#72b28e!important;background:#eef9f3;box-shadow:0 0 0 .12rem rgba(25,135,84,.07)}
.cn-option .form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.payment-total-box{background:linear-gradient(135deg,#fff 0%,#f1fbf5 100%);border-color:#cfe7d8!important}

/* Payment confirmation: keep the original page/card colors.
   CN groups are separated with neutral borders/spacing only. */
.payment-cn-card .cn-option{border-width:1px!important;box-shadow:0 1px 4px rgba(31,45,61,.035)}
.payment-cn-card .cn-option+.cn-option{margin-top:.65rem}
.payment-cn-card .cn-item-panel{border-top:1px dashed #dfe4e1;padding-top:.85rem}
.payment-cn-card .cn-item-row{background:#fff;border-color:#e4e8e6!important}
.payment-cn-card .cn-item-row:nth-child(even){background:#fafbfa}

#cnCheckerCard.cn-checker-attention{border-color:#dc3545!important;box-shadow:0 0 0 .22rem rgba(220,53,69,.11);animation:cnCheckerPulse .55s ease 2}
#cnCheckerCard.cn-checker-attention .form-label{color:#b02a37}
#cnCheckerCard .search-select-toggle.is-invalid:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.2)}
@keyframes cnCheckerPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}


/* Acknowledge page: keep searchable staff/branch menus above the content below.
   The filter card must not form a layer underneath the empty/results cards. */
.ack-filter-card{position:relative;z-index:30;overflow:visible!important}
.ack-filter-card .row,.ack-filter-card [class*="col-"]{overflow:visible!important}
.ack-filter-card .search-select{position:relative;z-index:31}
.ack-filter-card .search-select.search-select-open,
.ack-filter-card .search-select:has(.search-select-menu.show){z-index:1065!important}
.ack-filter-card .search-select-menu{z-index:1070!important}
.ack-filter-card + .app-card,
.ack-filter-card ~ .ack-group{position:relative;z-index:1}

/* Acknowledge page dropdown clipping fix.
   .app-content normally has overflow-x:auto. CSS then computes overflow-y:auto too,
   which makes it a scroll container. Because Bootstrap dropdown menus are absolutely
   positioned, they do not increase the container height and were clipped at the
   bottom of the short acknowledge page. Let this page overflow normally; its tables
   already use .table-responsive for horizontal scrolling. */
body.acknowledge-page .app-content{
  overflow:visible!important;
}
body.acknowledge-page .app-shell{
  overflow:visible!important;
}
body.acknowledge-page .ack-filter-card,
body.acknowledge-page .ack-filter-card .row,
body.acknowledge-page .ack-filter-card [class*="col-"],
body.acknowledge-page .ack-filter-card .search-select{
  overflow:visible!important;
}

/* Acknowledge: make payment date unmistakable for document stamping */
.acknowledge-page .ack-paid-date-box{
  display:inline-flex;
  flex-direction:column;
  min-width:240px;
  padding:12px 16px;
  border:2px solid #198754;
  border-radius:12px;
  background:#f3fbf6;
  box-shadow:0 1px 0 rgba(25,135,84,.06);
}
.acknowledge-page .ack-paid-date-label{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  color:#146c43;
  text-transform:uppercase;
}
.acknowledge-page .ack-paid-date-value{
  margin-top:2px;
  font-size:1.75rem;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.02em;
  color:#111827;
  font-variant-numeric:tabular-nums;
}
.acknowledge-page .ack-paid-date-hint{
  margin-top:4px;
  font-size:.78rem;
  font-weight:700;
  color:#6b7280;
}
.acknowledge-page .ack-paid-date-column{
  min-width:125px;
  color:#146c43;
}
.acknowledge-page .ack-paid-date-cell{
  color:#146c43;
  font-size:1rem;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
@media (max-width:575.98px){
  .acknowledge-page .ack-payment-main,
  .acknowledge-page .ack-paid-date-box{width:100%;}
  .acknowledge-page .ack-paid-date-value{font-size:1.55rem;}
}


/* Acknowledge page: let the whole table size itself from its content.
   Do not stretch the table across the card and then fight each column with fixed widths. */
.acknowledge-page .ack-filter-row{
  max-width:980px;
}
.acknowledge-page .ack-filter-action{
  min-width:160px;
}
.acknowledge-page .ack-table-wrap{
  width:max-content;
  max-width:100%;
  overflow-x:auto;
}
.acknowledge-page .ack-table{
  width:max-content!important;
  min-width:0!important;
  table-layout:auto!important;
  margin-right:auto;
}
.acknowledge-page .ack-table th,
.acknowledge-page .ack-table td{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  white-space:nowrap;
  padding-left:.7rem;
  padding-right:.7rem;
}
.acknowledge-page .ack-table th:first-child,
.acknowledge-page .ack-table td:first-child{
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  padding-left:.65rem!important;
  padding-right:.35rem!important;
  text-align:center;
}
.acknowledge-page .ack-table .ack-paid-date-column{
  min-width:0!important;
}
@media (max-width:767.98px){
  .acknowledge-page .ack-filter-row{max-width:none;}
  .acknowledge-page .ack-filter-action{min-width:0;width:100%;}
  .acknowledge-page .ack-table th,
  .acknowledge-page .ack-table td{
    padding-left:.55rem;
    padding-right:.55rem;
  }
}

/* Acknowledge page: compact the entire payment card, not only the table.
   The table is already content-sized; keep the surrounding card close to its real content
   instead of stretching across the whole page and leaving a large empty area on the right. */
.acknowledge-page .ack-group{
  width:min(100%,720px);
  margin-right:auto;
}
.acknowledge-page .ack-group > .p-3.border-bottom,
.acknowledge-page .ack-group > .p-lg-4.border-bottom{
  width:100%;
}
.acknowledge-page .ack-group .table-responsive{
  width:max-content;
  max-width:100%;
}
@media (max-width:767.98px){
  .acknowledge-page .ack-group{
    width:100%;
  }
}

/* Acknowledge page: fit the columns to the compact payment card.
   Keep each column balanced while using the card width instead of leaving a blank strip. */
.acknowledge-page .ack-group .ack-table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto;
}
.acknowledge-page .ack-group .ack-table{
  width:100%!important;
  min-width:620px!important;
  table-layout:fixed!important;
}
.acknowledge-page .ack-group .ack-table th,
.acknowledge-page .ack-group .ack-table td{
  width:auto!important;
  max-width:none!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.acknowledge-page .ack-group .ack-table th:nth-child(1),
.acknowledge-page .ack-group .ack-table td:nth-child(1){
  width:38px!important;
}
.acknowledge-page .ack-group .ack-table th:nth-child(2),
.acknowledge-page .ack-group .ack-table td:nth-child(2){
  width:110px!important;
}
.acknowledge-page .ack-group .ack-table th:nth-child(3),
.acknowledge-page .ack-group .ack-table td:nth-child(3){
  width:120px!important;
}
.acknowledge-page .ack-group .ack-table th:nth-child(4),
.acknowledge-page .ack-group .ack-table td:nth-child(4){
  width:105px!important;
}
.acknowledge-page .ack-group .ack-table th:nth-child(5),
.acknowledge-page .ack-group .ack-table td:nth-child(5){
  width:auto!important;
}
@media (max-width:767.98px){
  .acknowledge-page .ack-group .ack-table{
    width:max-content!important;
    min-width:620px!important;
    table-layout:auto!important;
  }
}

/* Acknowledge cards: two columns on desktop, one column on smaller screens. */
.acknowledge-page .ack-groups-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  align-items:start;
}
.acknowledge-page .ack-groups-grid .ack-group{
  width:100%;
  max-width:none;
  margin:0!important;
}
@media (min-width:1200px){
  .acknowledge-page .ack-groups-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .acknowledge-page .ack-groups-grid .ack-table{
    min-width:0!important;
  }
  .acknowledge-page .ack-groups-grid .ack-table th:nth-child(2),
  .acknowledge-page .ack-groups-grid .ack-table td:nth-child(2){width:92px!important;}
  .acknowledge-page .ack-groups-grid .ack-table th:nth-child(3),
  .acknowledge-page .ack-groups-grid .ack-table td:nth-child(3){width:100px!important;}
  .acknowledge-page .ack-groups-grid .ack-table th:nth-child(4),
  .acknowledge-page .ack-groups-grid .ack-table td:nth-child(4){width:92px!important;}
  .acknowledge-page .ack-groups-grid .ack-table th,
  .acknowledge-page .ack-groups-grid .ack-table td{
    padding-left:.5rem;
    padding-right:.5rem;
  }
  .acknowledge-page .ack-groups-grid .ack-paid-date-value{font-size:1.55rem;}
}


/* Acknowledge filter: cleaner hierarchy and spacing */
.acknowledge-page .ack-filter-card{
  max-width:980px;
}
.acknowledge-page .ack-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.9rem;
  margin-bottom:1rem;
  border-bottom:1px solid #e9ecef;
}
.acknowledge-page .ack-filter-title{
  font-weight:700;
  font-size:1rem;
  color:#212529;
}
.acknowledge-page .ack-filter-subtitle{
  margin-top:.15rem;
  font-size:.82rem;
  color:#6c757d;
}
.acknowledge-page .ack-admin-status{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  max-width:100%;
  padding:.42rem .7rem;
  border:1px solid #b7dfca;
  border-radius:999px;
  background:#f1fbf5;
  color:#157347;
  font-size:.82rem;
  white-space:nowrap;
}
.acknowledge-page .ack-admin-status strong{
  overflow:hidden;
  text-overflow:ellipsis;
}
.acknowledge-page .ack-label-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-height:24px;
  margin-bottom:.4rem;
}
.acknowledge-page .ack-label-row .form-label{
  margin:0;
  flex:0 0 auto;
}
.acknowledge-page .ack-default-note{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  margin:0;
  font-size:.76rem;
  color:#198754;
  white-space:nowrap;
}
.acknowledge-page .ack-show-btn{
  min-height:42px;
}
.acknowledge-page .ack-filter-field > .form-label{
  margin-bottom:.4rem;
}
@media (max-width:767.98px){
  .acknowledge-page .ack-filter-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .acknowledge-page .ack-admin-status{
    white-space:normal;
  }
  .acknowledge-page .ack-label-row{
    flex-wrap:wrap;
    row-gap:.15rem;
  }
  .acknowledge-page .ack-default-note{
    white-space:normal;
  }
}

/* Acknowledge table final balance:
   payment date is already prominent in the card header, so keep only bill date, amount and payment round.
   Give bill date/amount comfortable room and reduce the payment-round column. */
.acknowledge-page .ack-group .ack-table{
  table-layout:fixed!important;
}
.acknowledge-page .ack-group .ack-table th:nth-child(1),
.acknowledge-page .ack-group .ack-table td:nth-child(1){
  width:38px!important;
}
.acknowledge-page .ack-group .ack-table th:nth-child(2),
.acknowledge-page .ack-group .ack-table td:nth-child(2){
  width:30%!important;
}
.acknowledge-page .ack-group .ack-table th:nth-child(3),
.acknowledge-page .ack-group .ack-table td:nth-child(3){
  width:26%!important;
}
.acknowledge-page .ack-group .ack-table th:nth-child(4),
.acknowledge-page .ack-group .ack-table td:nth-child(4){
  width:44%!important;
}
@media (min-width:1200px){
  .acknowledge-page .ack-groups-grid .ack-table th:nth-child(2),
  .acknowledge-page .ack-groups-grid .ack-table td:nth-child(2){width:31%!important;}
  .acknowledge-page .ack-groups-grid .ack-table th:nth-child(3),
  .acknowledge-page .ack-groups-grid .ack-table td:nth-child(3){width:27%!important;}
  .acknowledge-page .ack-groups-grid .ack-table th:nth-child(4),
  .acknowledge-page .ack-groups-grid .ack-table td:nth-child(4){width:42%!important;}
}
/* Duplicate warning severity on staff bill submission */
.duplicate-item.duplicate-paid{border-color:#dc8b8b;background:#fff1f1}
.duplicate-item.duplicate-acknowledged{border-color:#c94f4f;background:#ffe7e7;box-shadow:inset 4px 0 0 #b42318}
.duplicate-item .duplicate-status-detail{color:#9f1c1c;margin-top:.18rem}

/* Acknowledge filter summary: use the empty right side for PAY / bill counts */
.acknowledge-page .ack-filter-summary-side{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.7rem;
  flex-wrap:wrap;
}
.acknowledge-page .ack-waiting-summary{
  display:flex;
  align-items:stretch;
  gap:.5rem;
}
.acknowledge-page .ack-summary-box{
  min-width:92px;
  padding:.45rem .7rem;
  border:1px solid #dce3e8;
  border-radius:12px;
  background:#f8fafb;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:"label number" "unit number";
  column-gap:.55rem;
  align-items:center;
}
.acknowledge-page .ack-summary-label{
  grid-area:label;
  font-size:.72rem;
  font-weight:700;
  color:#6c757d;
  letter-spacing:.03em;
}
.acknowledge-page .ack-summary-number{
  grid-area:number;
  font-size:1.35rem;
  line-height:1;
  color:#212529;
}
.acknowledge-page .ack-summary-unit{
  grid-area:unit;
  font-size:.68rem;
  color:#88929b;
}
@media (max-width:767.98px){
  .acknowledge-page .ack-filter-summary-side{
    width:100%;
    justify-content:flex-start;
  }
  .acknowledge-page .ack-summary-box{min-width:88px;}
}

/* Acknowledge: make the branch impossible to miss beside the payment date. */
.ack-paid-branch{
  display:inline-flex;
  align-items:center;
  gap:.15rem;
  font-weight:800;
  font-size:.9rem;
  color:#7a4b00;
  background:#fff3cd;
  border:1px solid #ffe69c;
  border-radius:999px;
  padding:.28rem .65rem;
  white-space:nowrap;
}
@media (max-width:575.98px){
  .ack-paid-branch{font-size:.82rem;white-space:normal;}
}


/* Owner page mobile compact layout */
body.owner-page .owner-status-panel{
  margin-bottom:1rem!important;
}
body.owner-page .supplier-collapse-toolbar{
  margin-bottom:.75rem!important;
}
body.owner-page #ownerFilterForm{
  margin-bottom:1rem!important;
}
body.owner-page .owner-status-panel .status-summary-card{
  min-height:auto;
}
body.owner-page .owner-status-panel .status-card-copy em{
  white-space:normal;
}
@media (max-width:767.98px){
  body.owner-page .owner-status-panel .d-flex.flex-wrap.align-items-center.justify-content-between.gap-2.mb-2{
    align-items:flex-start!important;
    gap:.6rem!important;
  }
  body.owner-page .owner-status-panel .btn.btn-sm{
    align-self:flex-start;
  }

  /* Force compact, stacked status cards on phone to avoid giant blank space */
  body.owner-page .owner-status-panel .status-flow-wrap{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  body.owner-page .owner-status-panel .status-summary-card.status-all{
    width:100%!important;
    min-width:0!important;
    flex:none!important;
  }
  body.owner-page .owner-status-panel .status-flow-sequence{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    flex:none!important;
    min-width:0!important;
  }
  body.owner-page .owner-status-panel .status-flow-arrow{
    display:none!important;
  }
  body.owner-page .owner-status-panel .status-flow-sequence .status-summary-card{
    width:100%!important;
    min-width:0!important;
    flex:none!important;
  }
  body.owner-page .owner-status-panel .status-summary-card{
    padding:14px 16px!important;
  }
  body.owner-page .owner-status-panel .status-card-icon{
    width:42px!important;
    height:42px!important;
    font-size:1.2rem!important;
  }
  body.owner-page .owner-status-panel .status-card-copy small{
    font-size:.9rem!important;
    margin-bottom:3px!important;
  }
  body.owner-page .owner-status-panel .status-card-copy strong{
    font-size:1.08rem!important;
    line-height:1.15!important;
  }
  body.owner-page .owner-status-panel .status-card-copy em{
    font-size:.88rem!important;
    margin-top:4px!important;
  }

  /* Keep toolbar and filter compact */
  body.owner-page .supplier-collapse-toolbar{
    justify-content:space-between!important;
    gap:.5rem!important;
  }
  body.owner-page .supplier-collapse-toolbar .btn{
    flex:1 1 calc(50% - .25rem);
  }
  body.owner-page #ownerFilterForm{
    padding:.85rem!important;
  }
}


/* Owner manual refresh */
.owner-refresh-btn{white-space:nowrap}
.refresh-spinning{display:inline-block;animation:ownerRefreshSpin .7s linear infinite}
@keyframes ownerRefreshSpin{to{transform:rotate(360deg)}}
@media (max-width:767.98px){
  body.owner-page .owner-page-head{
    align-items:flex-start!important;
  }
  body.owner-page .owner-head-actions{
    width:100%;
    align-items:center!important;
    justify-content:space-between;
    margin-left:0!important;
  }
  body.owner-page .owner-head-actions .text-end{
    text-align:left!important;
  }
  body.owner-page .owner-refresh-btn{
    min-height:42px;
    padding:.55rem .85rem;
  }
}


/* Owner pending supplier summary */
.owner-pending-summary-btn{white-space:nowrap}
@media (max-width:767.98px){
  body.owner-page .owner-head-actions{
    flex-wrap:wrap;
  }
  body.owner-page .owner-head-actions .text-end{
    flex:1 1 100%;
  }
  body.owner-page .owner-pending-summary-btn,
  body.owner-page .owner-refresh-btn{
    flex:1 1 calc(50% - .25rem);
  }
}


/* Return/CN indicator on owner supplier cards */
.supplier-return-badge{
  background:#fff3cd;
  color:#7a5a00;
  border:1px solid #f2d98a;
  font-weight:700;
}
@media (max-width:767.98px){
  .supplier-return-badge{
    white-space:normal;
    text-align:left;
    line-height:1.25;
  }
}