/**
 * Finance section styles (Phase 2).
 *
 * Layered on top of operations.css (which provides the stat-card and
 * search-card styling we reuse). This file only adds the Finance section
 * nav tabs + quick-action buttons.
 */

/* ── Finance topbar: nav (left) + actions (right) ──────────── */
.spops-fin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.spops-fin-topbar .spops-fin-nav {
    margin-bottom: 0;
}

.spops-fin-topbar-actions {
    flex-wrap: wrap;
}

/* ── Finance section nav ───────────────────────────────────── */
.spops-fin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.spops-fin-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    user-select: none;
    text-decoration: none;
    cursor: pointer;
}

a.spops-fin-tab:hover {
    text-decoration: none;
}

a.spops-fin-tab-active {
    color: #fff;
}

.spops-fin-tab i {
    font-size: 14px;
}

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

.spops-fin-tab-disabled {
    color: #9ca3af;
    cursor: not-allowed;
    background: #f9fafb;
}

.spops-fin-soon {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #eef2f7;
    color: #6b7280;
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 2px;
}

/* ── A "muted" stat card — used for the Profit placeholder ─── */
.spops-stat-muted {
    opacity: .6;
}

/* Section header title — white on the coloured header bar. */
.search-header h3 {
    color: #fff !important;
}

/* Filter buttons (Apply / Reset) sit side by side at their natural width,
   not stacked full-width. */
.spops-filter-actions {
    display: flex;
    gap: 10px;
    flex-direction: row !important;
    align-items: center;
    margin-top: 1.2%;
}

.spops-filter-actions .spops-qa-btn {
    width: auto;
    height: fit-content;
}

/* ── Quick actions ─────────────────────────────────────────── */
.spops-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.spops-qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: #0B4BA8;
    color: #fff;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.spops-qa-btn:hover {
    background: #093e8c;
    color: #fff;
    text-decoration: none;
}

.spops-qa-btn small {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: 1px 7px;
}

.spops-qa-disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

.spops-qa-disabled small {
    background: #d1d5db;
    color: #6b7280;
}

/* Ghost button (e.g. Reset) */
.spops-qa-ghost {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.spops-qa-ghost:hover {
    background: #f3f4f6;
    color: #374151;
}

/* ── Listing table ─────────────────────────────────────────── */
.spops-fin-table {
    width: 100%;
    font-size: 13.5px;
}

.spops-fin-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.spops-fin-table tbody td {
    vertical-align: middle;
}

.spops-fin-table tbody tr:hover {
    background: #f9fafb;
}

.spops-fin-num {
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.text-right {
    text-align: right;
}

.spops-muted {
    color: #9ca3af;
}

.spops-pos {
    color: #047857;
    font-weight: 700;
}

.spops-neg {
    color: #b91c1c;
    font-weight: 700;
}

.spops-fin-actions a.spops-act,
.spops-fin-actions button.spops-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: #0B4BA8;
    background: #eef2f9;
    margin-left: 4px;
    text-decoration: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
}

.spops-fin-actions a.spops-act:hover,
.spops-fin-actions button.spops-act:hover {
    background: #0B4BA8;
    color: #fff;
}

.spops-fin-actions form {
    display: inline;
}

/* ── Badges ───────────────────────────────────────────────────
   Base MUST stay identical to .spops-badge in operations.css so
   status/payment/type badges look the same on every plugin page
   (uppercase pill, dashboard style). */
.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;
}

/* Type badges */
.spops-badge-type-customer {
    background: #e0edff;
    color: #0B4BA8;
}

.spops-badge-type-rcti {
    background: #ede9fe;
    color: #6d28d9;
}

.spops-badge-type-credit_note {
    background: #fde8e8;
    color: #b91c1c;
}

.spops-badge-type-adj_note {
    background: #ffedd5;
    color: #c2410c;
}

/* Source badge (neutral) */
.spops-badge-src {
    background: #eef2f7;
    color: #4b5563;
}

/* Document status badges */
.spops-badge-status-draft {
    background: #f3f4f6;
    color: #6b7280;
}

.spops-badge-status-generated {
    background: #e0e7ff;
    color: #4338ca;
}

.spops-badge-status-sent {
    background: #e0edff;
    color: #0B4BA8;
}

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

/* Payment status badges */
.spops-badge-pay-unpaid {
    background: #fef3c7;
    color: #92400e;
}

.spops-badge-pay-partial {
    background: #ffedd5;
    color: #c2410c;
}

.spops-badge-pay-paid {
    background: #d1fae5;
    color: #047857;
}

.spops-badge-pay-overdue {
    background: #fee2e2;
    color: #b91c1c;
}

/* ── Pagination ───────────────────────────────────────────── */
.spops-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.spops-page {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 7px;
    background: #0B4BA8;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.spops-page:hover {
    background: #093e8c;
    color: #fff;
    text-decoration: none;
}

.spops-page-info {
    font-size: 13px;
    color: #6b7280;
}

/* ── Document view: header ─────────────────────────────────── */
.spops-doc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
}

.spops-doc-head-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spops-doc-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spops-doc-title h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}

.spops-doc-badges {
    display: flex;
    gap: 6px;
}

.spops-doc-head-side {
    text-align: right;
}

.spops-doc-total {
    font-size: 26px;
    font-weight: 800;
    color: #0B4BA8;
    margin-bottom: 8px;
}

.spops-doc-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ── Document view: tabs ───────────────────────────────────── */
.spops-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 14px 0 0;
}

.spops-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

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

.spops-tab-active {
    color: #0B4BA8;
    border-bottom-color: #0B4BA8;
}

.spops-tab-count {
    font-size: 11px;
    background: #eef2f7;
    color: #6b7280;
    border-radius: 999px;
    padding: 0 7px;
}

.spops-tab-active .spops-tab-count {
    background: #e0edff;
    color: #0B4BA8;
}

.spops-tab-pane {
    display: none;
    margin-top: 0;
    border-top-left-radius: 0;
}

.spops-tab-pane-active {
    display: block;
}

/* ── Document view: content bits ───────────────────────────── */
.spops-sub {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin: 0 0 8px;
}

.spops-kv {
    margin: 0 0 4px;
    font-size: 14px;
    color: #374151;
}

.spops-pay-summary {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #374151;
}

.spops-att-list,
.spops-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.spops-att-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f1f3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.spops-att-list li:last-child {
    border-bottom: none;
}

.spops-attach-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.spops-timeline li {
    position: relative;
    padding: 8px 0 8px 20px;
    border-bottom: 1px solid #f0f1f3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.spops-timeline li:last-child {
    border-bottom: none;
}

.spops-tl-dot {
    position: absolute;
    left: 0;
    top: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0B4BA8;
}

.spops-tl-event {
    font-weight: 600;
    color: #111827;
    margin-right: 8px;
}

.spops-tl-meta {
    font-size: 12px;
    color: #9ca3af;
}

/* ── Alerts / notices ──────────────────────────────────────── */
.spops-alert {
    padding: 11px 15px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.spops-alert-ok {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

.spops-alert-warn {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.spops-alert-error {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

/* ── Edit page: line items + totals ────────────────────────── */
.spops-l-del {
    border: none;
    background: #fee2e2;
    color: #b91c1c;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.spops-l-del:hover {
    background: #b91c1c;
    color: #fff;
}

.spops-edit-totals {
    margin-top: 14px;
    text-align: right;
    font-size: 14px;
    color: #374151;
}

.spops-edit-totals>div {
    margin-bottom: 4px;
}

.spops-edit-grand {
    font-size: 17px;
    color: #0B4BA8;
}

/* ── Reports index grid ────────────────────────────────────── */
.spops-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.spops-report-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px;
    text-decoration: none;
    color: #111827;
    transition: box-shadow .15s, border-color .15s, transform .05s;
}

.spops-report-card:hover {
    border-color: #0B4BA8;
    box-shadow: 0 8px 20px rgba(11, 75, 168, .12);
    text-decoration: none;
    color: #111827;
}

.spops-report-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #eef2f9;
    color: #0B4BA8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.spops-report-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.spops-report-desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
}

/* Report heading block (e.g. TPAR company / ABN / FY) */
.spops-report-heading {
    text-align: center;
    margin-bottom: 12px;
}

.spops-rh-title {
    font-weight: 800;
    font-size: 16px;
    color: #111827;
}

.spops-rh-sub {
    font-size: 13px;
    color: #4b5563;
}

/* ── Generate-from-connotes bar ────────────────────────────── */
.spops-gen-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.spops-gen-target {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
}

.spops-gen-target label {
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.spops-gen-target small {
    color: #6b7280;
    font-weight: 400;
}

/* ── Payments form ─────────────────────────────────────────── */
.spops-pay-form {
    margin-top: 8px;
}

.spops-link-btn {
    border: none;
    background: none;
    color: #b91c1c;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

/* ── Name typeahead (Customer / Carrier search) ──────────────
   Mirrors the walk-in connote customer dropdown for visual parity:
   line 1 = email (bold) + type badge, line 2 = name (meta). */
.spops-ac-wrap {
    position: relative;
}

.spops-ac-hint {
    display: block;
    color: #9ca3af;
    font-size: 11px;
    margin-top: 3px;
}

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

/* Inline state row (Searching… / No results) */
.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;
}

/* Per-type badge — colours match the walk-in dropdown */
.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-contractor {
    background: #e0e7ff;
    color: #3730a3;
}

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

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

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

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

/* ── Party-user recipient picker (To/CC/BCC on invoice send form) ── */
#spops-to-dd {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 100%;
}

.spops-party-pick-dd {
    z-index: 1200;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    max-height: 220px;
    overflow-y: auto;
    margin-top: 2px;
}

.spops-ppd-opt {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #1f2937;
}

.spops-ppd-opt:last-child {
    border-bottom: none;
}

.spops-ppd-opt:hover {
    background: #eef4ff;
    color: #0B4BA8;
}

.spops-ppd-email {
    color: #6b7280;
    font-size: 12px;
    font-weight: 400;
}

.spops-ppd-custom {
    color: #0B4BA8;
    font-style: italic;
}

/* ── Chip-style multi-select (CC / BCC) ── */
.spops-chip-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    cursor: text;
}

.spops-chip-field:focus-within {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

/* Scoped to the chip field so this email-tag style never collides with the
   dashboard's filter-pill `.spops-chip` (operations.css) when both stylesheets
   load on a Finance page. */
.spops-chip-field .spops-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.spops-chip-rm {
    background: none;
    border: none;
    color: #1e40af;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 1px;
    opacity: .7;
}

.spops-chip-rm:hover {
    opacity: 1;
}

.spops-chip-q {
    border: none !important;
    outline: none;
    flex: 1;
    min-width: 120px;
    font-size: 13px!important;
    background: transparent;
    padding: 2px 0;
    margin-bottom: 0 !important;
}

/* Live AJAX filtering — dim the results region while a request is in flight. */
.spops-ajax-results {
    transition: opacity .15s ease;
}

.spops-ajax-results.spops-ajax-loading {
    opacity: .45;
    pointer-events: none;
}

/* Let cards that host a typeahead dropdown (.spops-cust-dropdown) overflow so
   the dropdown isn't clipped by .search-card's overflow:hidden. The body keeps
   a matching rounded bottom so the card still looks the same. */
.search-card.spops-of-visible {
    overflow: visible;
}

.search-card.spops-of-visible .search-header {
    border-radius: 16px 16px 0 0;
}

.search-card.spops-of-visible .search-body {
    overflow: visible;
    border-radius: 0 0 16px 16px;
}

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

    .spops-tab-pane p {
        font-size: 18px !important;
    }

    .spops-doc-total {
        font-size: 22px;
    }

    .spops-of-visible p,
    #spops-rem-new-form small {
        font-size: 14px !important;
    }

    .page-template-speedpost-ops .search-body p {
        font-size: 14px !important;
    }


}

@media (max-width:767px) {
    .spops-margin-card {
        Flex-direction: column;
        align-items: flex-start;
    }

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

    .spops-report-grid {
        margin-bottom: 15px;
    }

    .spops-doc-total {
        font-size: 18px;
    }

    .spops-line-row input {
        width: 70px;
        max-width: 70px;

    }


}

.spops-chip-field input,
.spops-chip-field input {
    margin-bottom: 0 !important;
    border: 0 !important;
    padding: 0 !important;
}

.spops-report-grid {
    margin-bottom: 15px;
}

.spops-tab-pane p {
    font-size: 14px;
}
/* ── Shipper / Carrier management pages ────────────────────── */
/* Collapsible panels (Add User / Link Existing / Add Department).
   <details> needs its native marker removed so the <summary> can be
   styled as one of our buttons. */
.spops-party-details > summary {
    list-style: none;
    user-select: none;
}

.spops-party-details > summary::-webkit-details-marker {
    display: none;
}

.spops-party-details > summary::marker {
    content: "";
}

.spops-party-details[open] > summary {
    margin-bottom: 4px;
}

/* Inline department picker in the linked-users table. .spops-act is
   normally scoped to .spops-fin-actions; this row needs it standalone. */
.spops-party-dept-form select {
    min-width: 140px;
}

.spops-party-dept-form button.spops-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 6px;
    color: #0B4BA8;
    background: #eef2f9;
    border: none;
    padding: 0;
    cursor: pointer;
}

.spops-party-dept-form button.spops-act:hover {
    background: #0B4BA8;
    color: #fff;
}

/* ── Attachments: drag & drop zone ─────────────────────────── */
.spops-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    padding: 22px 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.spops-dropzone:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

/* Applied while a file is being dragged over the zone. */
.spops-dropzone.is-over {
    border-color: #0B4BA8;
    background: #eef2f9;
}

.spops-dz-inner i {
    font-size: 26px;
    color: #0B4BA8;
    margin-bottom: 6px;
}

.spops-dz-title {
    margin: 4px 0 2px;
    font-size: 14px;
    color: #111827;
}

.spops-dz-sub {
    margin: 0;
    font-size: 12.5px;
    color: #6b7280;
}

/* Upload queue — one row per file, removed on success. */
.spops-dz-queue {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    text-align: left;
}

.spops-dz-item {
    display: grid;
    grid-template-columns: 1fr auto 120px auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #e5e7eb;
    margin-bottom: 6px;
    font-size: 13px;
}

.spops-dz-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spops-dz-size {
    color: #6b7280;
    font-size: 12px;
}

.spops-dz-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.spops-dz-fill {
    display: block;
    height: 100%;
    width: 0;
    background: #0B4BA8;
    transition: width .2s;
}

.spops-dz-status {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.spops-dz-item.is-ok .spops-dz-status {
    color: #047857;
}

.spops-dz-item.is-ok .spops-dz-fill {
    background: #10b981;
}

.spops-dz-item.is-fail .spops-dz-status {
    color: #b91c1c;
}

.spops-dz-item.is-fail .spops-dz-fill {
    background: #ef4444;
}

@media (max-width: 640px) {
    .spops-dz-item {
        grid-template-columns: 1fr auto;
        row-gap: 6px;
    }
    .spops-dz-bar {
        grid-column: 1 / -1;
    }
}