/* Speedpost Operations dashboard
 *
 * The table itself uses Plugin 1's existing portal styling
 * (.table.table-hover.shipments-table) — we add NOTHING to override it.
 * The orange "..." action button + dropdown also use the portal's
 * existing .action-button + Bootstrap .dropdown classes.
 *
 * What's in this file:
 *   1) Filter grid spacing
 *   2) Yes/No, Status, Type pill badges
 *   3) Date group divider rows (▼ DD/MM/YYYY)
 *   4) Pager footer
 *   5) Edit modal
 *   6) Tiny helpers (empty cells, margin tooltip)
 */

/* ── 0) STATS STRIP ──────────────────────────────────────────────────── */
.spops-stats {
    margin-bottom: 16px;
}

.spops-stats>[class*="col-"] {
    margin-bottom: 12px;
}

.spops-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.spops-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spops-stat-icon i {
    font-size: 20px;
    color: #fff;
}

/* Brand colors per card */
.spops-stat-blue .spops-stat-icon {
    background: #0B4BA8;
}

.spops-stat-amber .spops-stat-icon {
    background: #f59e0b;
}

.spops-stat-green .spops-stat-icon {
    background: #10b981;
}

.spops-stat-orange .spops-stat-icon {
    background: #FF6B00;
}

.spops-stat-body {
    flex: 1;
    min-width: 0;
}

.spops-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 600;
}

.spops-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.spops-stat-sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 0b) QUICK FILTER CHIPS ──────────────────────────────────────────── */
.spops-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.spops-chip {
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #1f2937;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.spops-chip:hover {
    background: #eef4ff;
    border-color: #0B4BA8;
    color: #0B4BA8;
}

.spops-chip.spops-chip-active {
    background: #0B4BA8;
    border-color: #0B4BA8;
    color: #fff;
}

/* ── Custom-date chip — a date input wrapped to look like a chip ── */
.spops-chip-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #1f2937;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0;
    line-height: 1.4;
}

.spops-chip-date:hover {
    background: #eef4ff;
    border-color: #0B4BA8;
    color: #0B4BA8;
}

.spops-chip-date.spops-chip-active {
    background: #0B4BA8;
    border-color: #0B4BA8;
    color: #fff;
}

.spops-chip-date i {
    font-size: 12px;
    opacity: 0.85;
}

.spops-chip-date-input {
    border: none !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit;
    padding: 2px 0 !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    min-width: 130px;
    height: auto !important;
}

.spops-chip-date-input:focus {
    box-shadow: none !important;
}

/* Invert the native calendar icon to white when the chip is active */
.spops-chip-date.spops-chip-active .spops-chip-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.spops-chip-date-clear {
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: inherit;
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spops-chip-date-clear:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ── 1) FILTER GRID ──────────────────────────────────────────────────── */
.spops-filter-grid .form-group {
    margin-bottom: 12px;
}

.spops-filter-grid label {
    font-size: 11px !important;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 4px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── Card-header meta text ───────────────────────────────────────────── */
.shipment-table-header .spops-meta-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

/* ── Number-aligned cells (Carrier $, Shipper $, Margin) ─────────────── */
.spops-num-th,
.spops-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.spops-margin-cell {
    font-weight: 700;
}

.spops-margin-cell .spops-margin-pct {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    margin-left: 4px;
}

/* Fuel-levy hint under Shipper $ / Carrier $ cells when levy > 0 */
.spops-levy-amt {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: #b45309;
    margin-top: 2px;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

/* ── Margin column help icon ─────────────────────────────────────────── */
.spops-help-icon {
    margin-left: 4px;
    color: #9ca3af;
    cursor: help;
    font-size: 11px;
    vertical-align: baseline;
}

.spops-help-icon:hover {
    color: #0B4BA8;
}

/* ── 2) BADGES ───────────────────────────────────────────────────────── */
.spops-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    white-space: nowrap;
}

.spops-badge.spops-yes {
    background: #dcfce7;
    color: #166534;
}

.spops-badge.spops-no {
    background: #fee2e2;
    color: #991b1b;
}

/* Partially-paid invoice — same amber/orange as the Finance "Partial" badge. */
.spops-badge.spops-partial {
    background: #ffedd5;
    color: #c2410c;
}

/* Invoiced column "Draft" state — invoice generated but not yet sent */
.spops-badge.spops-draft {
    background: #fef3c7;
    color: #92400e;
}

/* Picked / Delivered toggle — same look as the Yes / No badge but
   rendered as a clickable button. Reuses .spops-badge styles above. */
.spops-badge.spops-toggle {
    border: none;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.05s ease;
}

.spops-badge.spops-toggle:hover {
    filter: brightness(0.94);
}

.spops-badge.spops-toggle:active {
    transform: scale(0.96);
}

.spops-badge.spops-toggle:focus {
    outline: 2px solid #0B4BA8;
    outline-offset: 1px;
}

.spops-badge.spops-status-processing {
    background: #e5e7eb;
    color: #374151;
}

.spops-badge.spops-status-picked_up {
    background: #fef3c7;
    color: #92400e;
}

.spops-badge.spops-status-in_transit {
    background: #dbeafe;
    color: #1e40af;
}

.spops-badge.spops-status-delivered {
    background: #dcfce7;
    color: #166534;
}

.spops-badge.spops-status-completed {
    background: #c7e9c0;
    color: #14532d;
}

.spops-badge.spops-type-walkin {
    background: #fff7ed;
    color: #c2410c;
}

.spops-badge.spops-type-fulltruck {
    background: #fef3c7;
    color: #92400e;
}

.spops-badge.spops-type-container {
    background: #dbeafe;
    color: #1e40af;
}

.spops-badge.spops-type-cranetruck {
    background: #ede9fe;
    color: #5b21b6;
}

/* Order Type column (Walk-In vs Direct Website) — distinct from the
   Shipment Type column above so the two read at a glance. */
.spops-badge.spops-order-walkin {
    background: #fff7ed;
    color: #c2410c;
}

.spops-badge.spops-order-direct {
    background: #e0f2fe;
    color: #075985;
}

/* ── 3) PICKUP-DATE GROUP HEADER ROWS (collapsible) ──────────────────── */
#spops-shipments tbody tr.spops-group-row td {
    background: #0B4BA8 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 12.5px;
    text-align: left !important;
    padding: 9px 16px !important;
    letter-spacing: 0.3px;
    border: 0 !important;
    /* Clear separation from the previous group. */
    border-top: 3px solid #eef1f5 !important;
    cursor: pointer;
    user-select: none;
}

#spops-shipments tbody tr.spops-group-row:first-child td {
    border-top: 0 !important;
}

#spops-shipments tbody tr.spops-group-row:hover td {
    background: #0a4193 !important;
}

.spops-group-toggle {
    display: inline-block;
    width: 15px;
    margin-right: 8px;
    text-align: center;
    font-size: 11px;
}

.spops-group-date {
    font-weight: 700;
}

.spops-group-count {
    margin-left: 10px;
    font-weight: 600;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.22);
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}

/* ── Empty cell hint ─────────────────────────────────────────────────── */
.spops-empty-cell {
    color: #cbd5e1;
    font-style: italic;
    font-size: 12px;
}

/* ── 4) PAGER FOOTER ─────────────────────────────────────────────────── */
.spops-table-footer {
    padding: 12px 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 16px 16px;
    gap: 12px;
}

.spops-pager-info {
    font-size: 13px;
    color: #4b5563;
}

.spops-table-footer .pagination .page-link {
    color: #1f3a68;
    border: 1px solid #e5e7eb;
    margin: 0 2px;
    padding: 4px 11px;
    font-size: 13px;
    border-radius: 4px !important;
}

.spops-table-footer .pagination .page-link:hover {
    background: #eef4ff;
    border-color: #0B4BA8;
    color: #0B4BA8;
}

.spops-table-footer .pagination .page-item.active .page-link {
    background: #0B4BA8;
    border-color: #0B4BA8;
    color: #fff;
}

.spops-table-footer .pagination .page-item.disabled .page-link {
    color: #cbd5e1;
    background: #fff;
    border-color: #e5e7eb;
}

/* Empty-state cell */
#spops-shipments td.spops-table-empty {
    padding: 40px 20px !important;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

/* Action column should hug its content */
.spops-actions-col {
    width: 1px;
    white-space: nowrap;
    text-align: center !important;
}

/* Make sure the action dropdown menu sits above the next row */
#spops-shipments .dropdown-menu {
    z-index: 1050;
}

#spops-shipments .dropdown-menu .dropdown-item {
    font-size: 13px;
    padding: 8px 14px;
}

#spops-shipments .dropdown-menu .dropdown-item:hover {
    background: #eef4ff;
    color: #0B4BA8;
}

#spops-shipments .dropdown-menu .dropdown-divider {
    margin: 4px 0;
}


/* ══════════════════════════════════════════════════════════════════════
 * 5) EDIT SHIPMENT MODAL
 * ══════════════════════════════════════════════════════════════════════ */

.spops-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.spops-modal-header {
    background: linear-gradient(135deg, #0B4BA8 0%, #1561c2 100%);
    color: #fff;
    border-bottom: 0;
    padding: 20px 28px;
    align-items: center;
}

.spops-modal-header .modal-title {
    color: #fff !important;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.spops-modal-header .spops-modal-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    letter-spacing: 0.3px;
}

.spops-modal-header .close {
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
    font-size: 26px;
    font-weight: 300;
}

.spops-modal-header .close:hover {
    opacity: 1;
}

.spops-modal-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spops-modal-icon i {
    color: #fff;
    font-size: 20px;
}

.spops-modal .modal-body {
    padding: 24px 28px;
    background: #fbfcfe;
}

.spops-section-title {
    margin: 18px 0 14px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e5e7eb;
    font-size: 13px;
    font-weight: 700;
    color: #0B4BA8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spops-section-title:first-of-type {
    margin-top: 0;
}

.spops-section-title.spops-section-danger {
    color: #b91c1c;
    border-bottom-color: #fecaca;
}

/* ── FORM FIELDS & LABELS — ONE consistent look across the dashboard modals AND
   the Finance page forms (.search-card). The !important beats the portal theme's
   `.common-form-style input[type=text]` / `label` rules that were rendering text
   inputs big & round beside compact selects and ballooning labels to 15px, which
   is what made fields/labels look broken and collide in narrow columns. ── */
.spops-modal .form-group label,
.search-card .form-group label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    display: block;
    line-height: 1.35 !important;
}

.spops-modal .form-control,
.spops-modal input.form-control,
.spops-modal select.form-control,
.spops-modal textarea.form-control,
.search-card .form-control,
.search-card input.form-control,
.search-card select.form-control,
.search-card textarea.form-control {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    color: #1f2937 !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}

.spops-modal .form-control:focus,
.search-card .form-control:focus {
    border-color: #0B4BA8 !important;
    box-shadow: 0 0 0 3px rgba(11, 75, 168, 0.12) !important;
    outline: none !important;
}

/* Finance-page primary submit buttons (e.g. the lone Bootstrap btn-primary on
   the Remittance page) use the same brand blue as everything else. */
.search-card .btn-primary {
    background: #0B4BA8 !important;
    border-color: #0B4BA8 !important;
    color: #fff !important;
}

.search-card .btn-primary:hover {
    background: #083b85 !important;
    border-color: #083b85 !important;
}

/* Inline "×" remove buttons (RCTI line / doc) — a visible red chip like the
   other remove buttons, instead of a bare red glyph with no button shape. */
.spops-modal .spops-rcti-ln-del,
.spops-modal .spops-rcti-doc-remove {
    background: transparent !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    line-height: 1 !important;
}

.spops-modal .spops-rcti-ln-del:hover,
.spops-modal .spops-rcti-doc-remove:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

/* Read-only inputs read as read-only (grey), matching .spops-readonly-field. */
.spops-modal .form-control[readonly],
.search-card .form-control[readonly] {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    cursor: default;
}

/* ── Consistent popup width — every modal is 60% wide on desktop (the mobile
   media query below still forces full-screen on phones). ── */
.spops-modal .modal-dialog {
    width: 100% !important;
    max-width: 60% !important;
}

/* ── Consistent input-group layout (money / levy fields etc.) ── */
.spops-modal .input-group,
.search-card .input-group {
    display: flex !important;
    justify-content: space-around !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
}

/* ── Party search dropdown (RCTI supplier picker) — same look & feel as the
   portal's customer-email autocomplete, ported so it renders on the
   dashboard (which doesn't load the portal's inline styles). ── */
.spops-cust-wrap {
    position: relative;
}

.spops-cust-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow-y: auto;
    z-index: 1100;
}

.spops-cust-dropdown-option {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}

.spops-cust-dropdown-option:last-child {
    border-bottom: none;
}

.spops-cust-dropdown-option:hover {
    background: #eef4ff;
}

.spops-cust-dropdown-option .spops-cust-dd-email {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.spops-cust-dropdown-option:hover .spops-cust-dd-email {
    color: #0B4BA8;
}

.spops-cust-dropdown-option .spops-cust-dd-meta {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 2px;
}

.spops-cust-dropdown-status {
    padding: 10px 14px;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    font-style: italic;
}

.spops-cust-dropdown-status i {
    margin-right: 6px;
}

.spops-cust-dropdown-option .spops-cust-dd-type-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.3px;
}

.spops-cust-dd-type-tag.is-company {
    background: #dbeafe;
    color: #1e40af;
    text-transform: none;
    font-size: 11px;
    letter-spacing: 0;
    padding: 2px 8px;
}

.spops-cust-dd-type-tag.is-carrier {
    background: #fee2e2;
    color: #991b1b;
}

.spops-cust-dd-type-tag.is-driver {
    background: #fef3c7;
    color: #92400e;
}

.spops-cust-dd-type-tag.is-user {
    background: #f3f4f6;
    color: #374151;
}

.spops-cust-dd-type-tag.is-contractor {
    background: #e0e7ff;
    color: #3730a3;
}

.spops-cust-dd-type-tag.is-unclassified {
    background: #f3f4f6;
    color: #6b7280;
}

.spops-cust-dropdown-option.is-carrier-row {
    background: #eff6ff;
}

.spops-cust-dropdown-option.is-carrier-row:hover {
    background: #dbeafe;
}

.spops-cust-dropdown-option.is-driver-row {
    background: #fffdf5;
}

.spops-cust-dropdown-option.is-driver-row:hover {
    background: #fef3c7;
}

.spops-modal .input-group-text {
    background: #f6f8fc;
    border-color: #d1d5db;
    color: #4b5563;
    font-weight: 600;
    font-size: 13px;
}

.spops-readonly-field {
    padding: 8px 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13.5px;
    min-height: 38px;
    color: #1f2937;
    line-height: 1.4;
}

.spops-margin-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: linear-gradient(135deg, #f0f6ff 0%, #e0ecff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin-bottom: 16px;
}

.spops-margin-card span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1f3a68;
    font-weight: 600;
}

.spops-margin-card strong {
    font-size: 18px;
    color: #0B4BA8;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.spops-margin-card.spops-margin-loss strong {
    color: #b91c1c;
}

/* ── Template chooser modal ──────────────────────────────────────────── */
.spops-template-grid>[class*="col-"] {
    margin-bottom: 14px;
}

.spops-template-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    height: 100%;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.spops-template-card:hover {
    border-color: #0B4BA8;
    box-shadow: 0 4px 14px rgba(11, 75, 168, 0.12);
}

.spops-template-card.spops-template-card-active {
    border-color: #0B4BA8;
    background: #f0f6ff;
    box-shadow: 0 0 0 4px rgba(11, 75, 168, 0.15);
}

.spops-template-name {
    font-size: 14px;
    font-weight: 700;
    color: #0B4BA8;
    margin: 4px 0 4px;
}

.spops-template-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    min-height: 50px;
    margin-bottom: 10px;
}

.spops-template-pick {
    width: 100%;
    font-size: 12.5px !important;
    padding: 6px 10px !important;
}

/* Tiny preview boxes (visual hint of what each template looks like) */
.spops-template-preview {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    height: 110px;
    margin-bottom: 12px;
    padding: 8px;
    overflow: hidden;
    text-align: left;
}

.spops-template-preview .prev-banner {
    background: #0B4BA8;
    height: 18px;
    border-radius: 3px;
    margin-bottom: 6px;
}

.spops-template-preview .prev-line {
    background: #d1d5db;
    height: 6px;
    border-radius: 3px;
    margin-bottom: 4px;
}

.spops-template-preview .prev-line.long {
    width: 90%;
}

.spops-template-preview .prev-line.short {
    width: 50%;
}

.spops-template-preview .prev-totals {
    background: #FF6B00;
    height: 8px;
    width: 40%;
    margin-left: auto;
    border-radius: 3px;
    margin-top: 8px;
}

.spops-template-preview .prev-title {
    background: #000;
    height: 14px;
    width: 60%;
    margin: 0 auto 8px auto;
    border-radius: 2px;
}

.spops-template-preview .prev-table {
    background: #000;
    height: 4px;
    margin: 8px 0 2px;
}

.spops-template-preview .prev-bank {
    border: 2px solid #000;
    height: 18px;
    margin-top: 8px;
    border-radius: 2px;
}

.spops-template-preview .prev-compact-head {
    border-bottom: 3px solid #FF6B00;
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}

/* ── Invoice preview modal ───────────────────────────────────────────── */
.spops-preview-body {
    padding: 0 !important;
    background: #f3f4f6;
}

.spops-preview-iframe {
    width: 100%;
    height: 70vh;
    min-height: 500px;
    border: 0;
    background: #fff;
    display: block;
}

.spops-preview-loading {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.spops-preview-loading i {
    margin-right: 6px;
}

/* ── Template pill inside the invoice form modal ─────────────────────── */
.spops-template-pill {
    background: #f0f6ff;
    border: 1px solid #bfdbfe;
    color: #1f3a68;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    margin-bottom: 14px;
    display: inline-block;
}

.spops-template-pill a {
    color: #0B4BA8;
    text-decoration: underline;
    font-size: 12px;
}

/* ── Invoice totals card (Subtotal / GST / Total) ────────────────────── */
.spops-totals-card {
    margin: 12px 0 16px;
    background: linear-gradient(135deg, #f0f6ff 0%, #e0ecff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 18px;
}

.spops-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    color: #1f3a68;
    font-size: 13px;
}

.spops-total-row strong {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #1f3a68;
}

.spops-total-row.spops-total-grand {
    border-top: 1px solid #bfdbfe;
    margin-top: 4px;
    padding-top: 10px;
    font-size: 14px;
}

.spops-total-row.spops-total-grand strong {
    font-size: 18px;
    font-weight: 700;
    color: #0B4BA8;
}

/* ── Additional invoice lines ("Add Additional Price") ───────────── */
.spops-extra-lines-wrap {
    margin: 12px 0 16px;
}

.spops-add-extra-line {
    border: 1px dashed #9ca3af !important;
    background: #fff !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    display: inline-flex;
    align-items: center;
}

.spops-add-extra-line:hover {
    border-color: #0B4BA8 !important;
    color: #0B4BA8 !important;
    background: #eff6ff !important;
}

.spops-extra-line {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px 4px;
    margin-bottom: 10px;
}

.spops-extra-line .form-group {
    margin-bottom: 8px;
}

.spops-extra-line label {
    font-size: 10.5px !important;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.spops-extra-line .form-control {
    font-size: 13px;
    padding: 5px 10px;
}

.spops-extra-line-total {
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: #0B4BA8;
    min-height: 32px;
    line-height: 1.4;
}

.spops-extra-line-remove {
    background: transparent;
    border: 1px solid #fecaca;
    color: #b91c1c;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    /* aligns with the inputs after their labels */
}

.spops-extra-line-remove:hover {
    background: #fee2e2;
    color: #991b1b;
}

/* ── "Auto-fill from freight" mini-button ────────────────────────────── */
.spops-btn-mini {
    background: #fff;
    border: 1px solid #0B4BA8;
    color: #0B4BA8;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: all 0.15s ease;
}

.spops-btn-mini:hover {
    background: #0B4BA8;
    color: #fff;
}

.spops-btn-mini:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spops-load-hint {
    display: block;
    margin-top: 6px;
    color: #4b5563;
    line-height: 1.4;
}

.spops-load-hint strong {
    color: #0B4BA8;
    font-weight: 600;
}

/* ── Comments timeline ───────────────────────────────────────────────── */
.spops-comments-list {
    margin-top: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.spops-comments-empty {
    padding: 18px 16px;
    text-align: center;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    font-size: 13px;
    font-style: italic;
}

.spops-comment {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
}

.spops-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}

.spops-comment-header strong {
    color: #0B4BA8;
    font-size: 13px;
}

.spops-comment-time {
    color: #6b7280;
    font-size: 11.5px;
    white-space: nowrap;
}

.spops-comment-body {
    color: #1f2937;
    font-size: 13px;
    line-height: 1.45;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.custom-control.custom-switch label {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    padding-top: 2px;
}

.spops-modal-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 16px 28px;
}

.spops-save-status {
    font-size: 13px;
    color: #6b7280;
    align-self: center;
}

.spops-save-status.spops-saving {
    color: #ca8a04;
}

.spops-save-status.spops-saved {
    color: #15803d;
}

.spops-save-status.spops-error {
    color: #b91c1c;
}

.spops-btn-primary {
    background: #0B4BA8 !important;
    border-color: #0B4BA8 !important;
    padding: 8px 22px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

.spops-btn-primary:hover {
    background: #083b85 !important;
    border-color: #083b85 !important;
}

.spops-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Secondary / Cancel button — a clearly VISIBLE bordered grey chip (the old
   near-white fill was invisible on the white footer until hover). */
.spops-modal .btn-light,
.spops-modal .btn-secondary {
    background: #f1f3f5 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.spops-modal .btn-light:hover,
.spops-modal .btn-secondary:hover {
    background: #e2e6ea !important;
    border-color: #94a3b8 !important;
    color: #1a2236 !important;
}

/* All modal "primary/positive" buttons use ONE brand blue (some markup uses a
   bare .btn-primary / .btn-success which would otherwise be Bootstrap blue/green). */
.spops-modal .btn-primary,
.spops-modal .btn-success {
    background: #0B4BA8 !important;
    border-color: #0B4BA8 !important;
    color: #fff !important;
}

.spops-modal .btn-primary:hover,
.spops-modal .btn-success:hover {
    background: #083b85 !important;
    border-color: #083b85 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .spops-modal .modal-dialog {
        margin: 10px;
    }

    .spops-modal-header,
    .spops-modal .modal-body,
    .spops-modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ============================================================
 *  MOBILE FIXES (≤ 992px)
 *
 *  Two distinct concerns:
 *    A) Connote font size — portal CSS bumps any <strong> inside
 *       .card-body > div to 22px on mobile. Our table renders the
 *       connote as a <strong>, so it inherits the same 22px which
 *       blows out the row height. Override back to a normal table
 *       cell size.
 *    B) Modal usability — on phones the dialog must fill the
 *       screen, the X/close button must always be reachable, and
 *       the action buttons at the bottom must stay pinned. The
 *       portal's fixed navbar also has a high z-index; ours has
 *       to be higher so the modal isn't covered.
 * ============================================================ */

/* ── A) Connote (and other table <strong>) on mobile ── */
@media (max-width: 992px) {
    #spops-shipments td strong {
        font-size: 13px !important;
        font-weight: 700;
    }
}

/* ── B) Modal layout on small screens ──
   Strategy: turn .modal-content into a fixed-height flex column.
   Header + footer get flex-shrink:0 (always full-size at top/bottom),
   body gets flex:1 + overflow-y:auto (scrolls internally between them).
   This replaces position:sticky, which can't work here because the
   header/footer are siblings of the body, not children. */
@media (max-width: 768px) {

    /* Sit above Plugin 1's fixed portal navbar (which uses ~1030) */
    .spops-modal {
        z-index: 100050 !important;
    }

    .modal-backdrop.show {
        z-index: 100040 !important;
    }

    /* Full-screen dialog — no rounded corners, no outer margin */
    .spops-modal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    .spops-modal .modal-content {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        /* The body handles its own scroll — clip whatever falls outside */
        overflow: hidden;
        /* Already flex/column from Bootstrap; restate so the flex math below works */
        display: flex;
        flex-direction: column;
    }

    /* Header — always visible at the top, never scrolls */
    .spops-modal-header {
        flex-shrink: 0;
        padding: 12px 16px !important;
        gap: 10px;
    }

    .spops-modal-header>div:first-child {
        gap: 10px !important;
        min-width: 0;
        flex: 1;
    }

    .spops-modal-header .modal-title {
        font-size: 16px;
        line-height: 1.2;
    }

    .spops-modal-header .spops-modal-subtitle {
        font-size: 11px;
    }

    .spops-modal-header .close {
        font-size: 28px;
        padding: 4px 8px;
        margin: -4px -4px -4px 0;
        flex-shrink: 0;
    }

    .spops-modal-icon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    .spops-modal-icon i {
        font-size: 15px;
    }

    /* Body — fills remaining space, scrolls internally.
       min-height:0 is the magic that lets a flex child shrink below its
       content size (otherwise it refuses, defeating overflow). */
    .spops-modal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px !important;
    }

    /* Preview body — keep its zero padding so iframe/summary use full width,
       but it still needs scroll on mobile. */
    .spops-modal .modal-body.spops-preview-body {
        padding: 0 !important;
    }

    /* Footer — always visible at the bottom, never scrolls */
    .spops-modal-footer {
        flex-shrink: 0;
        padding: 12px 16px !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .spops-modal-footer .btn {
        padding: 8px 14px !important;
        font-size: 13px;
    }

    .spops-save-status {
        width: 100%;
        margin-right: 0 !important;
    }

    /* Preview iframe — short enough that the action buttons are still
       reachable below it on desktop fallback rendering. */
    .spops-preview-iframe {
        height: calc(100vh - 220px);
        min-height: 300px;
    }
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    padding: 6px 12px !important;
}

/* ============================================================
 *  SEND INVOICE MODAL
 * ============================================================ */

/* Attachment "pill" at the top of the body — shows what's going to be sent */
.spops-send-attachment {
    background: #eff6ff;
    border: 1px solid #c5dbf7;
    color: #083a82;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
}

.spops-send-attachment strong {
    color: #083a82;
}

/* "Add Attachment" row + the list of operator-attached extra files
   (sit between the invoice-PDF pill and the Recipients section). */
.spops-send-extra-attachments {
    margin-bottom: 18px;
}

.spops-send-extra-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.spops-send-add-file {
    border: 1px dashed #9ca3af !important;
    background: #fff !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    cursor: pointer;
    /* Element is a <label> — give it explicit button-y display so it
       doesn't collapse to inline-only sizing. */
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.spops-send-add-file:hover {
    border-color: #0B4BA8 !important;
    color: #0B4BA8 !important;
    background: #eff6ff !important;
}

#spops-send-attachments-meta {
    font-size: 12px;
}

.spops-send-attachments-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #f9fafb;
}

.spops-send-attachment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #1f2937;
}

.spops-send-attachment-row:last-child {
    border-bottom: none;
}

.spops-send-attachment-row i {
    color: #6b7280;
}

.spops-send-attachment-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spops-send-attachment-size {
    font-size: 11.5px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.spops-send-attachment-remove {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 20px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
    transition: color 0.12s ease;
}

.spops-send-attachment-remove:hover {
    color: #b91c1c;
}

/* Yellow "this has been sent before" banner, only shown on resends */
.spops-send-resend-note {
    background: #fefce8;
    border: 1px solid #facc15;
    color: #854d0e;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}

/* ============================================================
 *  INVOICE PREVIEW — MOBILE SUMMARY CARD
 *
 *  On phones, the iframe preview is unreadable. The JS swaps it
 *  out for this structured summary instead, plus an "Open Full
 *  Preview" button that opens the invoice HTML in a new tab.
 * ============================================================ */
.spops-preview-summary {
    padding: 16px;
    background: #f8fafc;
    color: #1f2937;
}

.spops-pvs-template-pill {
    background: #f0f6ff;
    border: 1px solid #bfdbfe;
    color: #1f3a68;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 14px;
}

.spops-pvs-template-pill strong {
    color: #0B4BA8;
}

.spops-pvs-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.spops-pvs-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0B4BA8;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.spops-pvs-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.45;
}

.spops-pvs-label {
    color: #6b7280;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 80px;
    flex-shrink: 0;
}

.spops-pvs-value {
    text-align: right;
    color: #1f2937;
    word-wrap: break-word;
    flex: 1;
}

/* Line items — each is its own stacked card */
.spops-pvs-line {
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

.spops-pvs-line:last-child {
    margin-bottom: 0;
}

.spops-pvs-line-desc {
    font-size: 13px;
    line-height: 1.45;
    color: #1f2937;
    margin-bottom: 6px;
    white-space: pre-wrap;
}

.spops-pvs-line-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.spops-pvs-line-meta strong {
    color: #0B4BA8;
    font-size: 14px;
}

.spops-pvs-empty {
    padding: 12px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
    font-size: 13px;
}

/* Totals card */
.spops-pvs-totals {
    background: linear-gradient(135deg, #f0f6ff 0%, #e0ecff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.spops-pvs-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    color: #1f3a68;
    font-size: 13px;
}

.spops-pvs-total-row strong {
    color: #1f3a68;
    font-variant-numeric: tabular-nums;
}

.spops-pvs-total-row.spops-pvs-total-grand {
    border-top: 1px solid #bfdbfe;
    margin-top: 4px;
    padding-top: 8px;
    font-size: 14px;
}

.spops-pvs-total-row.spops-pvs-total-grand strong {
    color: #0B4BA8;
    font-size: 18px;
    font-weight: 700;
}

.spops-pvs-notes {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.45;
    white-space: pre-wrap;
}

/* "Open Full Preview" button — sits at the bottom of the summary.
   Rendered as a <button>, not <a>, to avoid the theme's anchor click
   handler from grabbing the URL and crashing on querySelector. */
.spops-pvs-open-full {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #0B4BA8;
    color: #fff !important;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    margin-top: 14px;
    font-family: inherit;
}

.spops-pvs-open-full:hover,
.spops-pvs-open-full:focus {
    background: #083b85;
    color: #fff !important;
    text-decoration: none !important;
    outline: none;
}

.spops-modal-header .modal-title {
    color: #fff;
}

@media (min-width: 768px) {
    div#spops-preview-modal .modal-dialog {
        width: 50%;
        margin: 30px auto;
    }
}

/* ── Inline editable Pickup / Delivery date cells ───────────── */
.spops-date-cell {
    cursor: pointer;
    white-space: nowrap;
}

.spops-date-cell:hover {
    background: #eef4ff;
    box-shadow: inset 0 0 0 1px #cddffb;
}

.spops-date-cell .spops-date-add {
    color: #9aa4b2;
    font-style: italic;
}

.spops-date-cell:hover .spops-date-add {
    color: #2563eb;
}

.spops-date-cell.spops-date-editing {
    background: #fff;
    box-shadow: inset 0 0 0 2px #2563eb;
}

.spops-date-input {
    width: 140px;
    max-width: 100%;
    padding: 2px 4px;
    border: 1px solid #c7d2e0;
    border-radius: 4px;
    font-size: 12px;
}

.spops-btn-generate-rcti {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .spops-stat-card {
        flex-direction: column;
        align-items: self-start;
    }

    .spops-stat-value {
        font-size: 18px;
    }

    .spops-margin-card strong {
        font-size: 14px;
    }

    .spops-modal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    #spops-rcti-lines th {
        Font-size: 18px;
    }

    #spops-rcti-lines p {
        Font-size: 12px;
    }

    .spops-rcti-ln-total {
        Font-size: 20px;
    }

    .spops-qa-btn {
        margin-top: 10px;
    }

    .spops-kv {
        font-size: 14px !important;
    }

    .spops-tl-event {
        Font-size: 14px;
    }

   

}
@media (min-width: 992px) and (max-width: 1199.98px){
 .spops-filter-grid .form-group {
        width: 30% !important;
        max-width: 30%!important;
    }
}


@media (max-width: 768px) {
    .spops-modal-footer div {
        Width: 100%;
    }

    .spops-modal-footer div .btn {
        Margin-bottom: 12px;
    }

    #spops-rcti-footer-form {
        width: 100%;
        gap: 10px;
        display: flex;
        flex-direction: column;

    }

    .spops-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        padding-bottom: 5px;
    }

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

    .spops-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 14px;
    }

    .spops-tab i {
        margin-right: 5px;
    }

    .spops-tab-count {
        margin-left: 4px;
    }

    .fi-header-icon i {
        font-size: 14px;
    }

    .fi-header-icon {
        width: 46px;
        height: 46px;

    }

    .spops-stat-value {
        font-size: 18px;
    }

    .spops-margin-card strong {
        font-size: 14px;
    }


}
footer.footer { display: none !important; }