/* ── Stonegate Account Portal ─────────────────────────────────────── */

/* Smooth in-page anchor jumps (e.g. single-order "Invoices" button →
 * #sap-order-invoices). Scoped to account pages by the enqueue guard. */
html { scroll-behavior: smooth; }

/* ── Entry animations ─────────────────────────────────────────────────
 * Subtle fade + 8px slide-up on cards/sections as each portal page loads.
 * Pure CSS, staggered by source order via :nth-child. Disabled entirely
 * for users with prefers-reduced-motion: reduce. */
@keyframes sap-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Animated elements — top-level page sections. */
.sap-db > .sap-card,
.sap-db > .sap-page-header,
.sap-db > .sap-page-supertitle,
.sap-db > .sap-db-welcome,
.sap-db > .sap-db-body,
.sap-db > #sap-account-payment-form {
    animation: sap-fade-up 360ms cubic-bezier(.2,.7,.3,1) both;
}
/* Stagger by source order — delays cascade to whichever child sits at
 * each position, no-op for children that do not match an animation rule. */
.sap-db > *:nth-child(2) { animation-delay: 60ms; }
.sap-db > *:nth-child(3) { animation-delay: 120ms; }
.sap-db > *:nth-child(4) { animation-delay: 180ms; }
.sap-db > *:nth-child(5) { animation-delay: 240ms; }
.sap-db > *:nth-child(6) { animation-delay: 300ms; }
.sap-db > *:nth-child(7) { animation-delay: 360ms; }

/* Dashboard stat cards — each tile staggers individually within the grid. */
.sap-db-stats .sap-db-stat {
    animation: sap-fade-up 360ms cubic-bezier(.2,.7,.3,1) both;
}
.sap-db-stats .sap-db-stat:nth-child(1) { animation-delay: 80ms; }
.sap-db-stats .sap-db-stat:nth-child(2) { animation-delay: 140ms; }
.sap-db-stats .sap-db-stat:nth-child(3) { animation-delay: 200ms; }
.sap-db-stats .sap-db-stat:nth-child(4) { animation-delay: 260ms; }

@media (prefers-reduced-motion: reduce) {
    .sap-db > .sap-card,
    .sap-db > .sap-page-header,
    .sap-db > .sap-page-supertitle,
    .sap-db > .sap-db-welcome,
    .sap-db > .sap-db-body,
    .sap-db > #sap-account-payment-form,
    .sap-db-stats .sap-db-stat {
        animation: none !important;
    }
}

/* ── My Account layout ───────────────────────────────────────────── */

/* Clear WooCommerce floats.
   IMPORTANT: Only scope layout rules to .sap-account-wrapper (our template
   wrapper class) — NOT the broad .woocommerce class, which also matches
   WooCommerce mini-carts and other elements in the site header/footer. */
.sap-account-wrapper .woocommerce-MyAccount-navigation,
.sap-account-wrapper .woocommerce-MyAccount-content {
    float: none !important;
    clear: none !important;
}
.sap-account-wrapper {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    grid-template-rows: auto 1fr !important;
    align-items: start !important;
    gap: 0 !important;
    width: 100% !important;
}

/* ── Full-width top bar (row 1, spans both columns) ──────────────── */
.sap-topbar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 24px !important;
    background: #F4F4F4 !important;
    border-bottom: 1px solid #E0E0E0 !important;
    box-sizing: border-box !important;
}
.sap-topbar-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ── Sidebar shell (col 1, row 2) ────────────────────────────────── */
.sap-account-wrapper .woocommerce-MyAccount-navigation {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    background: #fff !important;
    border-right: 1px solid #EBEBEB !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: sticky !important;
    top: 0 !important;
    max-height: 100vh !important;
    align-self: start !important;
    overflow: hidden !important;
    z-index: 5 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ── Sidebar "My Account" header ─────────────────────────────────── */
.sap-account-wrapper .woocommerce-MyAccount-navigation .sap-nav-header {
    padding: 20px 20px 16px !important;
    border-bottom: 1px solid #EBEBEB !important;
    flex-shrink: 0 !important;
}
.sap-account-wrapper .woocommerce-MyAccount-navigation .sap-nav-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: rgba(0,0,0,0.35) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    word-spacing: normal !important;
}
.sap-account-wrapper .woocommerce-MyAccount-navigation .sap-nav-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 2px !important;
    background: #E41D3A !important;
    flex-shrink: 0 !important;
    border-radius: 1px !important;
}

/* ── Nav list ────────────────────────────────────────────────────── */
.sap-account-wrapper .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 1 !important;
    height: auto !important;
    overflow-y: auto !important;
}

/* Push logout to the bottom with minimum breathing room above it */
.sap-account-wrapper .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: auto !important;
    padding-top: 100px !important;
    border-top: 1px solid #F0F0F0 !important;
}

.sap-account-wrapper .woocommerce-MyAccount-navigation li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ── Nav links ───────────────────────────────────────────────────── */
.sap-account-wrapper .woocommerce-MyAccount-navigation a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    color: rgba(0,0,0,0.5) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 20px !important;
    transition: color 0.15s, background 0.15s !important;
    box-sizing: border-box !important;
}
.sap-account-wrapper .woocommerce-MyAccount-navigation a:hover {
    color: rgba(0,0,0,0.85) !important;
    background: #F8F8F8 !important;
    text-decoration: none !important;
}

/* Active state: red left-border inset + dark bold text */
.sap-account-wrapper .woocommerce-MyAccount-navigation-link.is-active > a,
.sap-account-wrapper .woocommerce-MyAccount-navigation-link.is-active > a:focus {
    color: #1D1D1B !important;
    background: rgba(228,29,58,0.05) !important;
    box-shadow: inset 3px 0 0 #E41D3A !important;
    text-decoration: none !important;
}
.sap-account-wrapper .woocommerce-MyAccount-navigation-link.is-active > a .sap-nav-label {
    font-weight: 700 !important;
}

/* ── Icons ───────────────────────────────────────────────────────── */
.sap-nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
}
.sap-nav-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

/* ── Label ───────────────────────────────────────────────────────── */
.sap-nav-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-family: "Sharp Sans", Arial, sans-serif !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    line-height: 1.3 !important;
}

/* ── Content area (col 2, row 2) ─────────────────────────────────── */
.sap-account-wrapper .woocommerce-MyAccount-content {
    grid-column: 2 !important;
    grid-row: 2 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 28px 24px 28px 36px !important;
    margin: 0 !important;
    background: #F4F4F4 !important;
    box-sizing: border-box !important;
}

/* ── Mobile: single column stacked layout ────────────────────────── */
@media (max-width: 768px) {
    .sap-account-wrapper {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto 1fr !important;
    }
    .sap-topbar {
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 10px 16px !important;
    }
    .sap-topbar-right { flex-wrap: wrap !important; }
    .sap-account-wrapper .woocommerce-MyAccount-navigation {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        position: static !important;
        border-right: none !important;
        border-bottom: 1px solid #EBEBEB !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    .sap-account-wrapper .woocommerce-MyAccount-navigation .sap-nav-header {
        display: none !important;
    }
    .sap-account-wrapper .woocommerce-MyAccount-navigation ul {
        flex-direction: row !important;
        height: auto !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
    }
    .sap-account-wrapper .woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0 !important;
        margin-left: auto !important;
        border-top: none !important;
        border-left: 1px solid #F0F0F0 !important;
    }
    .sap-account-wrapper .woocommerce-MyAccount-navigation a {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 10px 12px !important;
        height: 60px !important;
        width: auto !important;
        min-width: 60px !important;
    }
    .sap-nav-label {
        font-size: 9px !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
    }
    .sap-account-wrapper .woocommerce-MyAccount-content {
        grid-column: 1 !important;
        grid-row: 3 !important;
        padding: 20px 16px !important;
        min-height: 0 !important;
    }
}

/* ── Portal section content (existing) ─────────────────────────── */

.sap-section { max-width: 100% !important; font-family: "Sharp Sans", sans-serif !important; box-sizing: border-box !important; }

/* Section title */
.sap-section-title {
    font-size: 22px !important; font-weight: 700 !important; color: #1D1D1B !important;
    margin: 0 0 24px !important; padding-bottom: 12px !important;
    border-bottom: 3px solid #E41D3A !important; border-top: none !important;
    border-left: none !important; border-right: none !important; background: none !important;
}
.sap-sub-title {
    font-size: 16px !important; font-weight: 700 !important; color: #1D1D1B !important;
    margin: 40px 0 14px !important; text-transform: uppercase !important;
    letter-spacing: 0.05em !important; background: none !important;
    border: none !important; padding: 0 !important;
}

/* Back nav */
.sap-back { display: flex !important; align-items: center !important; gap: 20px !important; margin-bottom: 28px !important; flex-wrap: wrap !important; }
.sap-back-link {
    font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: 0.06em !important; text-decoration: none !important; color: #E29B1E !important;
    transition: color .2s !important; background: none !important; border: none !important;
    padding: 0 !important; box-shadow: none !important;
}
.sap-back-link:hover { color: #A11827 !important; background: none !important; }
.sap-back-link--order {
    color: #1D1D1B !important; border-left: 2px solid #EFEFEF !important; padding-left: 20px !important;
}
.sap-back-link--order:hover { color: #E41D3A !important; }

/* Meta grid */
.sap-record-header { margin-bottom: 36px !important; }
.sap-meta-grid {
    display: flex !important; flex-wrap: wrap !important;
    border: 1px solid #EFEFEF !important; margin-top: 20px !important;
}
.sap-meta-cell {
    flex: 1 1 150px !important; padding: 18px 22px !important;
    border-right: 1px solid #EFEFEF !important;
    border-bottom: 1px solid #EFEFEF !important;
    background: #fff !important;
}
.sap-meta-cell:last-child { border-right: none !important; }
.sap-meta-label {
    display: block !important; font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.09em !important;
    color: #999 !important; margin-bottom: 7px !important;
}
.sap-meta-value {
    display: block !important; font-size: 16px !important; font-weight: 600 !important; color: #1D1D1B !important;
}
.sap-meta-cell--highlight { background: #1D1D1B !important; }
.sap-meta-cell--highlight .sap-meta-label { color: #aaa !important; }
.sap-meta-cell--highlight .sap-meta-value { color: #fff !important; font-size: 18px !important; }
.sap-meta-cell--paid { background: #f0faf0 !important; }
.sap-meta-cell--paid .sap-meta-value { color: #1a7a1a !important; }
.sap-meta-cell--unpaid { background: #fff8ee !important; }
.sap-meta-cell--unpaid .sap-meta-value { color: #b36000 !important; }

/* Table */
.sap-table-wrapper { overflow-x: auto !important; border: 1px solid #EFEFEF !important; margin-bottom: 8px !important; }
.sap-table { width: 100% !important; border-collapse: collapse !important; font-size: 14px !important; margin: 0 !important; }
.sap-table thead tr { background: #E41D3A !important; border: none !important; }
.sap-table thead th {
    color: #fff !important; font-weight: 700 !important; font-size: 11px !important;
    text-transform: uppercase !important; letter-spacing: 0.07em !important;
    padding: 14px 16px !important; text-align: left !important; white-space: nowrap !important;
    background: #E41D3A !important; border: none !important; border-right: none !important;
    border-left: none !important; border-top: none !important; border-bottom: none !important;
    vertical-align: middle !important; line-height: 1.2 !important;
}
.sap-table tbody tr { border-bottom: 1px solid #EFEFEF !important; transition: background .15s !important; background: #fff !important; }
.sap-table tbody tr:last-child { border-bottom: none !important; }
.sap-table tbody tr:hover { background: #FAFAFA !important; }
.sap-table td {
    padding: 13px 16px !important; color: #1D1D1B !important; vertical-align: middle !important;
    border: none !important; border-top: none !important; border-left: none !important;
    border-right: none !important; border-bottom: 1px solid #EFEFEF !important;
    line-height: 1.4 !important;
}
.sap-table tfoot tr { background: #F5F5F5 !important; }
.sap-table tfoot td {
    padding: 12px 16px !important; font-weight: 700 !important; font-size: 14px !important;
    border-top: 2px solid #E41D3A !important; border-bottom: none !important;
    border-left: none !important; border-right: none !important;
    color: #1D1D1B !important; vertical-align: middle !important; line-height: 1.4 !important;
}

/* Buttons */
.sap-btn {
    display: inline-block !important; padding: 8px 18px !important;
    background: #E29B1E !important; color: #fff !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important;
    text-decoration: none !important; border: 1px solid #E29B1E !important;
    white-space: nowrap !important; transition: background .2s, color .2s !important;
    border-radius: 0 !important; box-shadow: none !important; line-height: normal !important;
}
.sap-btn:hover { background: #fff !important; color: #E29B1E !important; }
.sap-btn--dark { background: #1D1D1B !important; border-color: #1D1D1B !important; }
.sap-btn--dark:hover { background: #fff !important; color: #1D1D1B !important; border-color: #1D1D1B !important; }
.sap-btn--pay { background: #E41D3A !important; border-color: #E41D3A !important; }
.sap-btn--pay:hover { background: #fff !important; color: #E41D3A !important; border-color: #E41D3A !important; }
.sap-btn--pdf { background: #1F4E79 !important; border-color: #1F4E79 !important; }
.sap-btn--pdf:hover { background: #fff !important; color: #1F4E79 !important; border-color: #1F4E79 !important; }

/* Action button groups */
.sap-actions { display: inline-flex !important; gap: 8px !important; align-items: center !important; flex-wrap: wrap !important; }
.sap-actions--header { margin-left: auto !important; }

/* Inline link */
.sap-link { color: #E29B1E !important; text-decoration: none !important; font-weight: 600 !important; }
.sap-link:hover { color: #A11827 !important; }

/* Status badges */
.sap-badge {
    display: inline-block !important; padding: 4px 10px !important;
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.07em !important;
    border-radius: 0 !important; border: none !important; line-height: normal !important;
}
.sap-badge--paid    { background: #e8f5e9 !important; color: #1a7a1a !important; }
.sap-badge--unpaid  { background: #fff3e0 !important; color: #b36000 !important; }
.sap-badge--overdue { background: #fde8e8 !important; color: #E41D3A !important; }
.sap-badge--partial { background: #e8f0fe !important; color: #1565c0 !important; }
.sap-badge--default { background: #EFEFEF !important; color: #555 !important; }

/* Empty states */
.sap-empty {
    padding: 48px 24px !important; text-align: center !important; color: #888 !important;
    background: #FAFAFA !important; border: 1px solid #EFEFEF !important; font-size: 15px !important;
}
.sap-empty-note { padding: 16px 0 !important; color: #888 !important; font-size: 14px !important; font-style: italic !important; }

/* Responsive */
@media (max-width: 768px) {
    .sap-meta-grid { flex-direction: column !important; }
    .sap-meta-cell { border-right: none !important; }
    .sap-table { font-size: 13px !important; }
    .sap-table th, .sap-table td { padding: 10px 12px !important; }
    .sap-back { gap: 12px !important; }
    .sap-back-link--order { border-left: none !important; padding-left: 0 !important; border-top: 2px solid #EFEFEF !important; padding-top: 12px !important; }
}

/* ── Hello Elementor theme overrides ─────────────────────────────── */
/* theme: h1,h2,h3 { font-weight:500; margin-block:… } — restore our weights */
.sap-db h1, .sap-db h2, .sap-db h3 {
    font-weight: 700 !important; margin: 0 !important; padding: 0 !important;
    border: none !important; background: none !important; line-height: inherit !important;
}
/* theme: h1 { font-size:2.5rem } — our greeting is 30px */
.sap-db .sap-db-greeting { font-size: 30px !important; font-weight: 700 !important; line-height: 1.1 !important; }
/* theme: a,a:visited { text-decoration:underline } */
.sap-db a, .sap-db a:visited { text-decoration: none !important; }
/* theme: a:hover { color:#336 } — but exclude our button classes so their
 * own hover :color rules win (they manage their own text colour). */
.sap-db a:not([class*="sap-btn-"]):hover { color: inherit !important; }
/* theme: table tbody tr:nth-child(odd) td { background-color:hsla(…) } */
.sap-db-table tbody tr:nth-child(odd) td { background-color: transparent !important; }
.sap-db-table tbody tr:hover td { background-color: #FAFAFA !important; }
/* theme: li { margin-block-start:0; border:0 } — belt-and-braces reset for stat meta badges */
.sap-db-badge, .sap-db-change { border: none !important; }
/* sidebar nav links: theme a,a:visited { text-decoration:underline } */
.woocommerce-account .woocommerce-MyAccount-navigation a,
.woocommerce-account .woocommerce-MyAccount-navigation a:visited { text-decoration: none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { text-decoration: none !important; }
/* sidebar active link box-shadow override (theme may reset box-shadow) */
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active > a {
    box-shadow: inset 3px 0 0 #E41D3A !important;
}
/* theme: table td,table th { padding:15px; vertical-align:top; border:1px solid hsla(…) } */
/* Catch-all: kill the theme border on every portal table cell; padding is
   set to a safe default here — the more-specific rules below override it. */
.sap-table td, .sap-table th,
.sap-db-table td, .sap-db-table th {
    border: none !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}
/* portal sap-table: prevent theme row stripes from showing through */
.sap-table tbody tr { background: #fff !important; }
.sap-table tbody tr:hover { background: #FAFAFA !important; }

/* ── Section pages (All Orders, Invoices) ───────────────────────── */

.sap-db-section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.sap-db-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #1D1D1B;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    line-height: 1.2;
}
.sap-db-section-head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sap-db-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #AAA;
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
}
.sap-db-back-link:hover { color: #1D1D1B; text-decoration: none; }

/* Detail meta card */
.sap-db-detail-meta { margin-bottom: 4px; }
.sap-db-meta-row {
    display: flex;
    flex-wrap: wrap;
    background: #E8E8E8;
    gap: 1px;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}
.sap-db-meta-cell {
    background: #fff;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 120px;
}
.sap-db-meta-cell--highlight { background: #FAFAFA; }
.sap-db-meta-cell--paid    { background: #f0faf0; }
.sap-db-meta-cell--unpaid  { background: #fff8ee; }
.sap-db-meta-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #AAA;
}
.sap-db-meta-value {
    font-size: 15px;
    font-weight: 700;
    color: #1D1D1B;
    line-height: 1.2;
}

/* Totals footer row */
.sap-db-totals-row td {
    padding: 12px 16px !important;
    font-weight: 700 !important;
    border-top: 2px solid #F0F0F0 !important;
    border-bottom: none !important;
    background: #FAFAFA !important;
    color: #1D1D1B !important;
}

/* Inline link style for order numbers in tables */
.sap-db-link {
    color: #E29B1E;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s;
}
.sap-db-link:hover { color: #A11827; text-decoration: none; }

/* ── Dashboard ─────────────────────────────────────────────────────── */

.sap-db { font-family: "Sharp Sans", Arial, sans-serif; color: #1D1D1B; }
.sap-db *, .sap-db *::before, .sap-db *::after { box-sizing: border-box; }
.sap-db h1, .sap-db h2, .sap-db h3 { margin: 0; padding: 0; border: none; background: none; }
.sap-db p  { margin: 0; }
.sap-db ul { margin: 0; padding: 0; list-style: none; }
.sap-db a  { text-decoration: none; }

/* Header bar (legacy — topbar is now global; this keeps spacing if ever re-used) */
.sap-db-header {
    display: none;
}
.sap-db-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sap-db-bc-root { color: #AAA; transition: color .15s; }
.sap-db-bc-root:hover { color: #1D1D1B; }
.sap-db-bc-sep  { color: #DDD; }
.sap-db-bc-current { color: #1D1D1B; }
.sap-db-header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Welcome */
.sap-db-welcome {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}
.sap-db-account-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #AAA;
    margin-bottom: 6px;
}
.sap-db-greeting {
    font-size: 30px;
    font-weight: 700;
    color: #1D1D1B;
    line-height: 1.1;
}
.sap-db-welcome-btns { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Stats grid */
.sap-db-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #E8E8E8;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    overflow: hidden;
    gap: 1px;
    margin-bottom: 24px;
    margin-top: 0;
}
.sap-db-stat {
    background: #fff;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sap-db-stat--muted { background: #FAFAFA; }
.sap-db-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #AAA;
    margin-bottom: 2px;
}
.sap-db-stat-main { display: flex; align-items: center; gap: 14px; }
.sap-db-stat-value { font-size: 28px; font-weight: 700; color: #1D1D1B; line-height: 1; }
.sap-db-stat--muted .sap-db-stat-value { color: #CCC; }
.sap-db-stat-meta {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Sparkline */
.sap-db-sparkline { width: 80px; height: 32px; color: #E29B1E; opacity: 0.65; flex-shrink: 0; }

/* Inline change badge */
.sap-db-change {
    font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: 3px;
}
.sap-db-change--up   { background: #e8f5e9; color: #1a7a1a; }
.sap-db-change--down { background: #fde8e8; color: #E41D3A; }

/* Inline stat badges */
.sap-db-badge {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 2px 8px; border-radius: 3px;
}
.sap-db-badge--overdue { background: #fde8e8; color: #E41D3A; }
.sap-db-badge--ok      { background: #e8f5e9; color: #1a7a1a; }

/* Body two-column grid */
.sap-db-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
.sap-db-right { display: flex; flex-direction: column; gap: 20px; }

/* Card shell */
.sap-db-card {
    background: #fff;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    overflow: hidden;
}
.sap-db-card-head {
    display: flex;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid #F2F2F2;
}
.sap-db-card-title { font-size: 15px; font-weight: 700; color: #1D1D1B; }
.sap-db-view-all {
    margin-left: auto;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: #E29B1E;
    transition: color .15s;
}
.sap-db-view-all:hover { color: #A11827; }
.sap-db-empty { padding: 30px 22px; color: #AAA; font-size: 13px; text-align: center; }

/* Orders table */
.sap-db-table-wrap { overflow-x: auto; }
.sap-db-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sap-db-table th {
    padding: 10px 16px !important;
    text-align: left !important;
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.07em !important;
    color: #AAA !important;
    background: #FAFAFA !important;
    border: none !important;
    border-bottom: 1px solid #F0F0F0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}
.sap-db-table td {
    padding: 13px 16px !important;
    color: #1D1D1B !important;
    border: none !important;
    border-bottom: 1px solid #F4F4F4 !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}
.sap-db-table tbody tr:last-child td { border-bottom: none; }
.sap-db-table tbody tr:hover td { background: #FAFAFA; }
.sap-db-order-num { font-weight: 700; font-size: 13px; }

/* Order status pill */
.sap-db-order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px; font-weight: 600;
}
.sap-db-order-status--complete   { background: #e8f5e9; color: #1a7a1a; }
.sap-db-order-status--shipped    { background: #e8f0fe; color: #1565c0; }
.sap-db-order-status--processing { background: #fff3e0; color: #b36000; }
.sap-db-order-status--pending    { background: #fff3e0; color: #b36000; }
.sap-db-order-status--cancelled  { background: #fde8e8; color: #c0392b; }

/* Row chevron */
.sap-db-row-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #DDD;
    transition: color .15s;
}
.sap-db-row-link svg { width: 16px; height: 16px; }
.sap-db-row-link:hover { color: #E41D3A; }

/* Outstanding card */
.sap-db-eyebrow {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: #AAA;
    padding: 16px 22px 0;
}
.sap-db-outstanding-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 22px 14px;
    border-bottom: 1px solid #F2F2F2;
}
.sap-db-outstanding-label { font-size: 14px; color: #777; }
.sap-db-outstanding-total { font-size: 20px; font-weight: 700; color: #1D1D1B; }

/* Invoice list */
.sap-db-inv-list { }
.sap-db-inv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
    border-bottom: 1px solid #F8F8F8;
}
.sap-db-inv-row:last-child { border-bottom: none; }
.sap-db-inv-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sap-db-inv-num  { font-size: 13px !important; font-weight: 700 !important; color: #1D1D1B !important; text-decoration: none !important; transition: color .15s !important; }
.sap-db-inv-num:hover  { color: #E41D3A !important; }
.sap-db-inv-date { font-size: 11px !important; color: #AAA !important; }
.sap-db-inv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.sap-db-inv-amount { font-size: 14px; font-weight: 700; color: #1D1D1B; }

/* Invoice status badges */
.sap-db-inv-badge {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 2px 8px; border-radius: 3px;
}
.sap-db-inv-badge--unpaid  { background: #fff3e0; color: #b36000; }
.sap-db-inv-badge--overdue { background: #fde8e8; color: #E41D3A; }
.sap-db-inv-badge--partial { background: #e8f0fe; color: #1565c0; }

/* Pay outstanding CTA — full-width red action; uses sap-btn-* prefix so the
 * .sap-db a:hover theme-defeat exclusion catches it automatically. */
.sap-db-pay-all-wrap { padding: 12px 16px 16px; }
.sap-btn-pay-all {
    display: block !important;
    text-align: center !important;
    padding: 13px 16px !important;
    background: #E41D3A !important;
    color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important;
    font-family: inherit !important;
    border-radius: 4px !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    transition: background .18s !important;
}
.sap-btn-pay-all:hover { background: #A0102B !important; color: #fff !important; text-decoration: none !important; }

/* Company chip */
.sap-db-company-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #1D1D1B;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none !important;
}

/* Credit progress bar */
.sap-db-change--neutral { background: #EFEFEF; color: #555; }
.sap-db-progress {
    width: 100%;
    height: 4px;
    background: #EFEFEF;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}
.sap-db-progress-bar {
    height: 100%;
    background: #E41D3A;
    border-radius: 2px;
    transition: width 0.3s ease;
    min-width: 2px;
}

/* Dashboard responsive */
@media (max-width: 1100px) {
    .sap-db-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
    .sap-db-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .sap-db-stats { grid-template-columns: 1fr 1fr; }
    .sap-db-welcome { flex-direction: column; align-items: flex-start; }
    .sap-db-welcome-btns { margin-left: 0; }
    .sap-db-greeting { font-size: 24px !important; }
    .sap-db-company-chip { display: none; } /* hide on very small screens */
}
@media (max-width: 420px) {
    .sap-db-stats { grid-template-columns: 1fr; }
}

/* New design: page headers */
.sap-page-supertitle {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #999 !important;
    margin: 0 0 8px !important;
}
.sap-page-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}
.sap-page-header h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1D1D1B !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    flex: 1 !important;
}
.sap-page-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Detail page header (single order / invoice) */
.sap-detail-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #AAA !important;
    text-decoration: none !important;
    margin-bottom: 12px !important;
    transition: color .15s !important;
}
.sap-detail-back:hover { color: #1D1D1B !important; }
.sap-detail-meta-line {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #999 !important;
    margin-bottom: 6px !important;
}
.sap-detail-header {
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}
.sap-detail-header h2 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #1D1D1B !important;
    margin: 0 !important;
    flex: 1 !important;
    line-height: 1.1 !important;
}
.sap-detail-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 2px !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────
 * Four canonical button classes. Use these everywhere — no legacy
 * .sap-db-btn--* variants. Each hover state sets `color` explicitly so
 * theme rules (a:hover etc.) cannot override and produce unreadable text.
 *
 *  .sap-btn-ghost     Transparent base, dark bg + white text on hover.
 *                     (Download PDF, Cancel modals.)
 *  .sap-btn-dark      Black base, red bg + white text on hover.
 *                     (Use Full Balance — secondary dark CTA.)
 *  .sap-btn-orange    Orange base (#E29B1E), inverts to white-bg/
 *                     orange-text on hover. Uppercase label.
 *                     (Start new order — primary dashboard CTA.)
 *  .sap-btn-red       Red base, darker red bg + white text on hover.
 *                     (Pay outstanding, Make Payment, hero pay buttons.)
 *  .sap-btn-pay-pill  Red outline pill, solid red + white text on hover.
 *                     (Inline pay action on invoice rows.)
 */

/* Shared box model for the three main action buttons */
.sap-btn-ghost,
.sap-btn-dark,
.sap-btn-red,
.sap-btn-orange {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-family: inherit !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease, opacity .15s ease !important;
}
.sap-btn-ghost svg,
.sap-btn-dark svg,
.sap-btn-red svg,
.sap-btn-orange svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }

/* Ghost: transparent → dark on hover */
.sap-btn-ghost {
    color: #1D1D1B !important;
    background: #fff !important;
    border: 1.5px solid #D8D8D8 !important;
    font-weight: 600 !important;
}
.sap-btn-ghost:hover {
    color: #fff !important;
    background: #1D1D1B !important;
    border-color: #1D1D1B !important;
    text-decoration: none !important;
}
.sap-btn-ghost:active { transform: translateY(1px) !important; }

/* Dark: black → red on hover, text stays white */
.sap-btn-dark {
    color: #fff !important;
    background: #1D1D1B !important;
    border: 1.5px solid #1D1D1B !important;
    font-weight: 700 !important;
}
.sap-btn-dark:hover {
    color: #fff !important;
    background: #E41D3A !important;
    border-color: #E41D3A !important;
    text-decoration: none !important;
}
.sap-btn-dark:active { transform: translateY(1px) !important; }

/* Orange: orange → white (orange text) on hover. Uppercase label. */
.sap-btn-orange {
    color: #fff !important;
    background: #E29B1E !important;
    border: 1.5px solid #E29B1E !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.sap-btn-orange:hover {
    color: #E29B1E !important;
    background: #fff !important;
    border-color: #E29B1E !important;
    text-decoration: none !important;
}
.sap-btn-orange:active { transform: translateY(1px) !important; }

/* Red: red → darker red on hover, text stays white */
.sap-btn-red {
    color: #fff !important;
    background: #E41D3A !important;
    border: 1.5px solid #E41D3A !important;
    font-weight: 700 !important;
}
.sap-btn-red:hover {
    color: #fff !important;
    background: #A0102B !important;
    border-color: #A0102B !important;
    box-shadow: 0 2px 8px rgba(192, 22, 46, 0.25) !important;
    text-decoration: none !important;
}
.sap-btn-red:active {
    transform: translateY(1px) !important;
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}
.sap-btn-red:disabled,
.sap-btn-red.is-loading {
    opacity: 0.65 !important;
    cursor: wait !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}
.sap-btn-red.is-loading {
    position: relative !important;
    padding-right: 38px !important;
}
.sap-btn-red.is-loading::after {
    content: "" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: sap-spin 0.7s linear infinite !important;
}

/* Pay pill: small inline action on invoice rows */
.sap-btn-pay-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    color: #E41D3A !important;
    background: transparent !important;
    border: 1.5px solid #E41D3A !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease, transform .08s ease, opacity .15s ease !important;
}
.sap-btn-pay-pill:hover {
    color: #fff !important;
    background: #A0102B !important;
    border-color: #A0102B !important;
    text-decoration: none !important;
}
.sap-btn-pay-pill:active { transform: translateY(1px) !important; }
.sap-btn-pay-pill.is-loading,
.sap-btn-pay-pill:disabled {
    opacity: 0.65 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

/* Filter tabs */
.sap-filter-pills {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
}
.sap-filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 13px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #555 !important;
    background: transparent !important;
    border: 1.5px solid #DCDCDC !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: border-color .12s, background .12s, color .12s !important;
    line-height: 1.2 !important;
}
.sap-filter-pill:hover { border-color: #1D1D1B !important; color: #1D1D1B !important; background: transparent !important; }
.sap-filter-pill.is-active { background: #1D1D1B !important; border-color: #1D1D1B !important; color: #fff !important; }
.sap-filter-pill-count {
    font-size: 10px !important;
    font-weight: 700 !important;
    opacity: 0.65 !important;
    line-height: 1 !important;
}
.sap-filter-pill.is-active .sap-filter-pill-count { opacity: 0.75 !important; }

/* Search/filter row */
.sap-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}
.sap-search-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    border: 1.5px solid #E8E8E8 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    flex: 1 !important;
    min-width: 200px !important;
    max-width: 340px !important;
}
.sap-search-wrap svg { color: #AAA !important; flex-shrink: 0 !important; }
.sap-search-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13px !important;
    color: #1D1D1B !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    width: 100% !important;
}
.sap-search-input::placeholder { color: #AAA !important; }

/* Data card */
.sap-card {
    background: #fff !important;
    border: 1px solid #EBEBEB !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}
.sap-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #F0F0F0 !important;
}
.sap-card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1D1D1B !important;
    margin: 0 !important;
}
.sap-card-meta {
    font-size: 12px !important;
    color: #999 !important;
    font-weight: 500 !important;
}
.sap-card-body { padding: 20px !important; }

/* Clean table (new design -- white header, grey text) */
.sap-tbl {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
    margin-bottom: 0 !important;
}
.sap-tbl thead tr { background: transparent !important; border-bottom: 1px solid #EBEBEB !important; }
.sap-tbl thead th {
    padding: 10px 16px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: #AAA !important;
    background: transparent !important;
    border: none !important;
    white-space: nowrap !important;
    text-align: left !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
}
.sap-tbl tbody tr {
    border-bottom: 1px solid #F5F5F5 !important;
    background: #fff !important;
    transition: background .12s !important;
    cursor: pointer !important;
}
.sap-tbl tbody tr:last-child { border-bottom: none !important; }
.sap-tbl tbody tr:hover { background: #FAFAFA !important; }
.sap-tbl td {
    padding: 13px 16px !important;
    color: #1D1D1B !important;
    vertical-align: middle !important;
    border: none !important;
    line-height: 1.3 !important;
    background: transparent !important;
}
.sap-tbl tbody tr:nth-child(odd) td { background-color: transparent !important; }
.sap-tbl tfoot tr { background: #FAFAFA !important; border-top: 2px solid #EBEBEB !important; }
.sap-tbl tfoot td {
    padding: 12px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: none !important;
    color: #1D1D1B !important;
    vertical-align: middle !important;
    background: #FAFAFA !important;
}
.sap-tbl .sap-muted { color: #717171 !important; }

/* Status stack — pairs the computed status dot with an optional Overdue flag. */
.sap-status-stack { display: inline-flex !important; flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; }
.sap-db-inv-row .sap-status-stack { align-items: flex-end !important; }
.sap-status-flag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    padding: 3px 7px 3px 6px !important;
    border-radius: 3px !important;
}
.sap-status-flag svg { width: 11px !important; height: 11px !important; }
.sap-status-flag--overdue { color: #fff !important; background: #E41D3A !important; }
.sap-filter-pill--overdue { color: #E41D3A !important; border-color: #E41D3A !important; }
.sap-filter-pill--overdue.is-active { background: #E41D3A !important; border-color: #E41D3A !important; color: #fff !important; }
.sap-filter-pill--overdue:hover { border-color: #C0162E !important; color: #C0162E !important; }
.sap-filter-pill--overdue.is-active:hover { background: #C0162E !important; border-color: #C0162E !important; color: #fff !important; }
.sap-db-inv-date--overdue { color: #E41D3A !important; font-weight: 700 !important; }

/* Invoice list — download-PDF icon button in the row actions cell. */
.sap-row-pdf {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    color: #E41D3A !important;
    text-decoration: none !important;
    transition: color .15s !important;
}
.sap-row-pdf:hover { color: #A0102B !important; }

/* Dashboard outstanding-invoices pager. */
.sap-db-inv-pager {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    border-top: 1px solid #F0F0F0 !important;
}
.sap-db-inv-pager-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    border: none !important;
    background: transparent !important;
    color: #717171 !important;
    cursor: pointer !important;
    transition: color .15s !important;
}
.sap-db-inv-pager-btn:hover:not(:disabled) { color: #1D1D1B !important; }
.sap-db-inv-pager-btn:disabled { color: #D8D8D8 !important; cursor: default !important; }
.sap-db-inv-pager-count { font-size: 12px !important; color: #717171 !important; font-weight: 600 !important; }
.sap-db-inv-pager-count .sap-db-inv-pager-current { color: #1D1D1B !important; }
.sap-tbl .sap-bold  { font-weight: 700 !important; }
.sap-tbl-wrap { overflow-x: auto !important; }
.sap-tbl-checkbox { width: 36px !important; text-align: center !important; }
.sap-tbl input[type=checkbox] { width: 14px !important; height: 14px !important; accent-color: #E41D3A !important; cursor: pointer !important; }
.sap-tbl .sap-chevron { color: #717171 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; }
.sap-tbl tr:hover .sap-chevron { color: #1D1D1B !important; }

/* Status pills */
/* Status dot — coloured dot + coloured text, no background fill */
.sap-status-dot {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.sap-status-dot::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    flex-shrink: 0 !important;
}
/* Green — completed / paid */
.sap-status-dot--completed,
.sap-status-dot--complete,
.sap-status-dot--paid          { color: #1B7A1B !important; }
/* Blue — fully dispatched / shipped / due / unpaid */
.sap-status-dot--fully-dispatched,
.sap-status-dot--shipped,
.sap-status-dot--due,
.sap-status-dot--unpaid        { color: #1A56A0 !important; }
/* Amber — processing / partially dispatched / partial / part-paid */
.sap-status-dot--processing,
.sap-status-dot--partially-dispatched,
.sap-status-dot--partial,
.sap-status-dot--part-paid     { color: #9A6200 !important; }
/* Red — overdue */
.sap-status-dot--overdue       { color: #C0162E !important; }
/* Grey — fallback */
.sap-status-dot--default       { color: #AAA !important; }

/* Discount badge */
.sap-disc-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    background: #FDEAED !important;
    color: #E41D3A !important;
    white-space: nowrap !important;
    border: none !important;
}

/* Order / invoice row number link */
.sap-row-num {
    font-weight: 700 !important;
    color: #1D1D1B !important;
    text-decoration: none !important;
}
.sap-row-num:hover { color: #E41D3A !important; }
.sap-row-link {
    color: #717171 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.sap-row-link:hover { color: #E41D3A !important; }

/* Two-column detail card */
.sap-detail-card {
    background: #fff !important;
    border: 1px solid #EBEBEB !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    margin-bottom: 16px !important;
}
.sap-detail-panel {
    padding: 20px 24px !important;
}
.sap-detail-panel + .sap-detail-panel {
    border-left: 1px solid #F0F0F0 !important;
}
.sap-detail-panel-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #AAA !important;
    margin-bottom: 14px !important;
}
.sap-totals-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 5px 0 !important;
    font-size: 13px !important;
    color: #555 !important;
    border-bottom: 1px solid #F5F5F5 !important;
}
.sap-totals-row:last-child { border-bottom: none !important; }
.sap-totals-row--gross {
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1.5px solid #EBEBEB !important;
    border-bottom: none !important;
}
.sap-totals-row--gross .sap-totals-label { font-weight: 700 !important; color: #1D1D1B !important; font-size: 14px !important; }
.sap-totals-row--gross .sap-totals-amount { font-weight: 700 !important; color: #1D1D1B !important; font-size: 18px !important; }
.sap-totals-row--paid .sap-totals-amount { color: #1B7A1B !important; }
.sap-totals-row--outstanding .sap-totals-label { font-weight: 700 !important; color: #1D1D1B !important; }
.sap-totals-row--outstanding .sap-totals-amount { font-weight: 700 !important; color: #1D1D1B !important; font-size: 16px !important; }
.sap-totals-label { flex: 1 !important; }
.sap-totals-amount { font-weight: 600 !important; color: #1D1D1B !important; }
.sap-address-block { font-size: 13px !important; line-height: 1.7 !important; color: #555 !important; }
.sap-address-block strong { color: #1D1D1B !important; font-weight: 600 !important; }
.sap-panel-divider { border: none !important; border-top: 1px solid #F0F0F0 !important; margin: 14px 0 !important; }
.sap-panel-subsection { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #CCC !important; margin-bottom: 6px !important; }
.sap-payment-terms { font-size: 13px !important; color: #555 !important; margin: 0 !important; }

/* Invoice hero card */
.sap-inv-hero {
    background: #1D1D1B !important;
    border-radius: 8px !important;
    padding: 24px 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}
.sap-inv-hero-pay-btn {
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
.sap-inv-hero-amount {
    flex: 1 !important;
    min-width: 180px !important;
}
.sap-inv-hero-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,.45) !important;
    margin-bottom: 4px !important;
}
.sap-inv-hero-value {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}
.sap-inv-hero-sub {
    font-size: 12px !important;
    color: rgba(255,255,255,.45) !important;
}
.sap-inv-hero-due-overdue { color: #FF6B7E !important; font-weight: 700 !important; }
.sap-inv-hero-meta {
    display: flex !important;
    gap: 32px !important;
    flex-wrap: wrap !important;
}
.sap-inv-hero-meta-item { }
.sap-inv-hero-meta-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(255,255,255,.4) !important;
    margin-bottom: 4px !important;
}
.sap-inv-hero-meta-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
}
/* Payments tab — stat-card CTA link + history-table "View" link. Most layout reuses .sap-card / .sap-db-stats / .sap-tbl from dashboard and lists. */
.sap-stat-cta {
    color: #B71C1C;
    text-decoration: none;
    font-weight: 600;
}
.sap-stat-cta:hover { text-decoration: underline; }
.sap-table-view {
    color: #B71C1C;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.sap-table-view:hover { text-decoration: underline; }

/* Pagination */
.sap-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px !important;
    font-size: 12px !important;
    color: #888 !important;
    border-top: 1px solid #F0F0F0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.sap-pagination-pages {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}
.sap-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border: 1.5px solid #E8E8E8 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #555 !important;
    text-decoration: none !important;
    background: #fff !important;
    transition: border-color .12s, color .12s !important;
}
.sap-page-btn:hover { border-color: #1D1D1B !important; color: #1D1D1B !important; text-decoration: none !important; }
.sap-page-btn.is-active { background: #1D1D1B !important; border-color: #1D1D1B !important; color: #fff !important; }
.sap-overdue-date { color: #E41D3A !important; font-weight: 600 !important; }
.sap-paid-amount  { color: #1B7A1B !important; font-weight: 600 !important; }

/* SKU mono style */
.sap-sku {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: 11px !important;
    color: #888 !important;
}

/* Responsive detail card */
@media (max-width: 820px) {
    .sap-detail-card { grid-template-columns: 1fr !important; }
    .sap-detail-panel + .sap-detail-panel { border-left: none !important; border-top: 1px solid #F0F0F0 !important; }
    .sap-inv-hero { flex-direction: column !important; align-items: flex-start !important; }
    .sap-inv-hero-value { font-size: 32px !important; }
    .sap-page-header h2, .sap-detail-header h2 { font-size: 22px !important; }
}

/* ── Bulk pay bar ─────────────────────────────────────────────────── */
.sap-bulk-bar {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 10px 16px !important;
    margin-bottom: 10px !important;
    background: #1D1D1B !important;
    border-radius: 6px !important;
    color: #fff !important;
}
.sap-bulk-bar-label {
    font-size: 12px !important;
    flex: 1 !important;
    color: rgba(255,255,255,0.85) !important;
}
.sap-bulk-bar-label strong { color: #fff !important; }

/* ── Payment modal ────────────────────────────────────────────────── */
#sap-payment-modal {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
}
#sap-payment-modal.is-open {
    display: flex !important;
}
.sap-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
}
.sap-modal-box {
    position: relative !important;
    background: #fff !important;
    border-radius: 8px !important;
    padding: 28px 32px !important;
    max-width: 420px !important;
    width: 90% !important;
    z-index: 1 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
}
.sap-modal-message {
    font-size: 14px !important;
    color: #1D1D1B !important;
    margin: 0 0 20px !important;
    line-height: 1.5 !important;
}
.sap-modal-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

/* ── Account payment page ─────────────────────────────────────────── */
.sap-acct-pay-balance {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #EBEBEB !important;
}
.sap-acct-pay-balance-label {
    font-size: 12px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-weight: 600 !important;
}
.sap-acct-pay-balance-amount {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1D1D1B !important;
}
.sap-acct-pay-form { display: flex !important; flex-direction: column !important; gap: 10px !important; max-width: 320px !important; }
.sap-acct-pay-label { font-size: 12px !important; font-weight: 600 !important; color: #555 !important; }
.sap-amount-wrap {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #DCDCDC !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
}
.sap-amount-prefix {
    padding: 0 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #888 !important;
    background: #F4F4F4 !important;
    border-right: 1.5px solid #DCDCDC !important;
    line-height: 38px !important;
}
.sap-amount-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1D1D1B !important;
    background: transparent !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}
.sap-amount-input::-webkit-outer-spin-button,
.sap-amount-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.sap-acct-pay-hint { font-size: 11px !important; color: #888 !important; margin: 0 !important; }
.sap-acct-pay-fill { align-self: flex-start !important; }
.sap-acct-pay-btn { align-self: flex-start !important; margin-top: 6px !important; }

@keyframes sap-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Cart quantity lock for SAP payment items ────────────────────── */
.sap-cart-qty {
    font-weight: 600 !important;
    color: #555 !important;
}