/* ============================================================
 * Dashboard metric hierarchy
 * Scoped to [data-dashboard-page] so report pages are unaffected.
 *
 * Core rule: black numbers carry the information; green/coral only
 * explain direction; mint quietly marks the best outcomes; gray
 * makes zero/inactive values recede.
 * ============================================================ */

/* Tabular numerals for all dashboard metric numbers and deltas so
 * digits align across cards and don't shift width on refresh. */
[data-dashboard-page] .metric-value > h1,
[data-dashboard-page] .metric-currency-symbol,
[data-dashboard-page] .metric-label h7 {
    font-variant-numeric: tabular-nums;
}

/* Currency symbol alignment: center the smaller symbol vertically
 * against the larger number so it reads as a natural prefix, neither
 * sunk to the baseline nor floating at the top. Tight line-heights on
 * both the h1 and the symbol keep the centering precise. */
[data-dashboard-page] .metric-value,
[data-dashboard-page] .metric-value.d-inline-block {
    align-items: center;
}

/* All main values use the same strong black weight. The .text-success /
 * .text-neg-profit classes on Profit and Gross Margin override this. */
[data-dashboard-page] .metric-value > h1 {
    font-weight: 700;
    color: var(--pc-primary-ink);
    line-height: 1;
}

/* Currency symbol: attached to the value, same weight so it reads as
 * part of the number. Slightly muted relative to the numeral but not
 * ghosted. line-height:1 keeps the box tight so centering is precise. */
[data-dashboard-page] .metric-value > .metric-currency-symbol {
    color: var(--pc-chart-ink);
    font-weight: 700;
    line-height: 1;
}

/* ---- Outcome cards (Profit, Gross Margin, ROAS) ---- */
/* The outcome cards no longer carry a green/mint background wash; they
 * render on the same flat white surface as the other dashboard cards.
 * The class is retained as a semantic hook for future styling. */
[data-dashboard-page] .dashboard-outcome-card {
    background-color: var(--pc-card);
}

/* ---- Softer card borders, hover-only shadow ---- */
/* Default: lighter border, no shadow. Hover: slightly stronger border +
 * soft lift shadow. Makes the dashboard feel less boxed-in. */
[data-dashboard-page] .card-dashboard {
    border: 1px solid var(--pc-border);
    box-shadow: none;
}

[data-dashboard-page] .card-dashboard:hover {
    border-color: var(--pc-card-border);
    box-shadow: var(--pc-shadow-hover);
}

/* Restore the Profit left accent stripe that the card-dashboard border
 * shorthand above would otherwise reset. The --profit-health-color
 * variable is set by .profit-accent-card and its modifier classes
 * (positive/negative/neutral) toggled by updateUI.js. */
[data-dashboard-page] .profit-accent-card {
    border-left: 4px solid var(--profit-health-color);
}

/* ---- Label contrast: slightly darker than the old --pc-muted ---- */
[data-dashboard-page] .card-dashboard .card-header {
    color: #5A625C;
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: -0.005em;
}

/* ---- Zero state: muted value that recedes but stays readable ---- */
/* --pc-inactive (#D9DEDA) is too pale against white cards; --pc-muted
 * keeps zeros legible while still quieter than the strong primary ink. */
[data-dashboard-page] .metric-value--zero > h1,
[data-dashboard-page] .metric-value--zero > .metric-currency-symbol {
    color: var(--pc-muted);
}

/* ---- Percentage deltas: smaller, lighter, hover for context ---- */
/* nowrap prevents the icon + delta text from wrapping to two lines in
 * narrow cards (especially the em-dash zero-state text). */
[data-dashboard-page] .metric-label {
    white-space: nowrap;
}

[data-dashboard-page] .metric-label h7 {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.72;
    white-space: nowrap;
    line-height: 1;
    transition: opacity 0.15s ease;
}

[data-dashboard-page] .card-dashboard:hover .metric-label h7 {
    opacity: 1;
}

/* Direction icons next to deltas stay compact. */
[data-dashboard-page] .metric-label .fa {
    font-size: 0.72rem;
}

/* ---- Gentle value refresh transition ---- */
/* Applied by JS after a value changes. Not used for profit (which has
 * its own count-up) to avoid double-animation. */
.metric-value-flash {
    animation: metric-value-flash 0.35s ease-out;
}

/* Deferred customer and cohort cards remain useful after first paint while
 * their slower identity-based calculations finish. */
.metric-value--loading > h1 {
    display: inline-flex;
    gap: 0.04em;
}

.metric-loading-dot {
    animation: metric-loading-dot 1.2s ease-in-out infinite;
    opacity: 0.25;
}

.metric-loading-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.metric-loading-dot:nth-child(3) {
    animation-delay: 0.3s;
}

/* Keep the header visible while deferred order data is pending. The plugin
 * writes pagination display inline, so scoped pending states must override it. */
[data-order-profitability-state="loading"] tbody,
[data-order-profitability-state="error"] tbody,
[data-order-profitability-state="loading"] .fixed-table-pagination,
[data-order-profitability-state="error"] .fixed-table-pagination {
    display: none !important;
}

.order-profitability-status {
    padding: 0.5rem;
    text-align: center;
}

.order-profitability-dots:not([hidden]) {
    display: inline-flex;
    gap: 0.04em;
    font-size: 1.5rem;
    line-height: 1;
}

@keyframes metric-loading-dot {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-0.12em); }
}

@keyframes metric-value-flash {
    0% { opacity: 0.45; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .metric-value-flash,
    .metric-loading-dot {
        animation: none;
    }

    .metric-loading-dot {
        opacity: 0.65;
    }
}

/* -------------------------------------------------------------------------
   Profit calculation explanation
   ------------------------------------------------------------------------- */

.profit-explanation-trigger,
.cost-breakdown-trigger {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 1;
    width: 28px;
    height: 28px;
    border: 1px solid var(--pc-card-border);
    background: var(--pc-card);
    color: var(--pc-primary-ink);
    box-shadow: 0 1px 2px rgba(23, 26, 24, 0.08);
    cursor: pointer;
    font-size: 15px;
    line-height: 26px;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.profit-explanation-trigger:hover:not(:disabled),
.profit-explanation-trigger:focus-visible,
.cost-breakdown-trigger:hover:not(:disabled),
.cost-breakdown-trigger:focus-visible {
    background: var(--pc-hover-neutral);
    color: var(--pc-primary-ink);
    box-shadow: 0 3px 8px rgba(23, 26, 24, 0.16);
    transform: translateY(-1px);
}

.profit-explanation-trigger:focus-visible,
.cost-breakdown-trigger:focus-visible {
    outline: 2px solid var(--pc-primary-ink);
    outline-offset: 2px;
}

.profit-explanation-trigger:disabled,
.cost-breakdown-trigger:disabled {
    cursor: default;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--pc-muted);
    opacity: 0.7;
}

.pc-pe-popup {
    max-width: calc(100vw - 2rem);
    padding: 1.4rem;
    border: 1px solid var(--pc-card-border);
    border-radius: var(--pc-radius);
    background: var(--pc-card);
    box-shadow: 0 18px 48px rgba(23, 26, 24, 0.16);
    font-family: Nunito, sans-serif;
}

.pc-pe-popup .swal2-header {
    align-items: stretch;
    padding: 0 2.25rem 0 0;
}

.pc-pe-popup .swal2-title {
    margin: 0 0 1rem;
    color: var(--pc-primary-ink);
    font-family: Nunito, sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: left;
}

.pc-pe-popup .swal2-close {
    top: 0.8rem;
    right: 0.8rem;
    width: 2rem;
    height: 2rem;
    border-radius: var(--pc-radius-sm);
    color: var(--pc-muted);
    font-size: 1.75rem;
    line-height: 1;
}

.pc-pe-popup .swal2-close:hover {
    background: var(--pc-hover-neutral);
    color: var(--pc-primary-ink);
}

.pc-pe-popup .swal2-close:focus-visible,
.pc-pe-toggle:focus-visible,
.pc-pe-link:focus-visible {
    outline: 2px solid var(--pc-primary-ink);
    outline-offset: 2px;
}

.pc-pe-popup .swal2-content {
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    color: var(--pc-primary-ink);
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
}

.pc-pe-scroll {
    text-align: left;
}

.pc-pe-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin: 0 0 1rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-sm);
    background: var(--pc-app-bg);
    font-size: 0.85rem;
    color: var(--pc-muted);
}

.pc-pe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.pc-pe-table th,
.pc-pe-table td {
    padding: 0.6rem 0.65rem;
    border-bottom: 1px solid var(--pc-border);
    vertical-align: top;
}

.pc-pe-table thead th {
    border-bottom-color: var(--pc-card-border);
    background: var(--pc-hover-neutral);
}

.pc-pe-head-label,
.pc-pe-head-amount {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pc-chart-ink);
}

.pc-pe-head-amount {
    text-align: right;
}

.pc-pe-amount {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pc-pe-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--pc-primary-ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pc-pe-row:hover > td {
    background: var(--pc-app-bg);
}

.pc-pe-toggle::before {
    content: '\25B8';
    display: inline-block;
    transition: transform 150ms ease;
    color: var(--pc-muted);
}

.pc-pe-toggle[aria-expanded='true']::before {
    transform: rotate(90deg);
}

.pc-pe-details > td {
    border-bottom: 1px solid var(--pc-border);
    background: var(--pc-app-bg);
}

.pc-pe-details[hidden] {
    display: none;
}

.pc-pe-description {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    color: var(--pc-muted);
}

.pc-pe-children {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
}

.pc-pe-child {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0;
    font-size: 0.87rem;
}

.pc-pe-child-amount {
    text-align: right;
    white-space: normal;
    font-variant-numeric: tabular-nums;
}

.pc-pe-child-amount--zero {
    color: var(--pc-muted);
    font-style: normal;
    letter-spacing: 0.08em;
}

.pc-pe-note {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--pc-muted);
}

.pc-pe-rounding-row th,
.pc-pe-rounding-row td {
    font-size: 0.8rem;
    color: var(--pc-muted);
    border-bottom: 1px solid var(--pc-border);
    font-weight: 400;
}

.pc-pe-total-row th,
.pc-pe-total-row td {
    border-top: 1px solid var(--pc-card-border);
    border-bottom: none;
    background: var(--pc-mint-soft);
    font-weight: 700;
    font-size: 1rem;
}

.pc-pe-total-row th {
    box-shadow: inset 3px 0 0 var(--pc-positive);
}

.pc-pe-footer {
    margin-top: 1rem;
    padding: 0.95rem;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-sm);
    background: var(--pc-app-bg);
    color: var(--pc-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.pc-pe-footer-settings-title {
    margin: 0;
    color: var(--pc-ink, #27272a);
    font-size: 0.84rem;
    font-weight: 700;
}

.pc-pe-footer-settings {
    margin: 0;
    padding: 0;
}

.pc-pe-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.55rem 0 0;
}

.pc-pe-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--pc-card-border);
    border-radius: 0.4rem;
    background: var(--pc-card);
    color: var(--pc-primary-ink);
    font-size: 0.82rem;
}

.pc-pe-link:hover {
    border-color: var(--pc-primary-ink);
    background: var(--pc-hover-neutral);
    color: var(--pc-primary-ink);
}

.pc-pe-all-stores-note {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    color: var(--pc-muted);
}

.pc-pe-unavailable-title {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.pc-pe-unavailable-body {
    margin: 0;
    color: var(--pc-muted);
}

@media (max-width: 576px) {
    .pc-pe-popup {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        overflow: hidden;
        padding: 1rem;
    }

    .pc-pe-popup .swal2-header {
        flex: 0 0 auto;
        padding: 0 2rem 0 0;
    }

    .pc-pe-popup .swal2-title {
        margin-bottom: 0.75rem;
        font-size: 1.2rem;
    }

    .pc-pe-popup .swal2-content {
        flex: 0 1 auto;
        max-height: none;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .pc-pe-context {
        margin-bottom: 0.75rem;
        padding: 0.6rem;
    }

    .pc-pe-table th,
    .pc-pe-table td {
        padding: 0.5rem 0.4rem;
    }

    .pc-pe-table {
        font-size: 0.85rem;
    }

    .pc-pe-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .pc-pe-child-amount {
        text-align: right;
    }
}

.pc-pe-child.pc-pe-rounding {
    color: var(--pc-muted);
    font-size: 0.8rem;
}

/* Dashboard review prompt */
#background-modal.review-prompt-backdrop{display:flex;align-items:center;justify-content:center;padding:24px;z-index:10000;background:#11182799}.review-prompt-shell{width:min(680px,100%)}.review-prompt-modal.base-review-modal{position:relative;top:auto;left:auto;transform:none;width:min(680px,100%);max-width:100%;min-height:360px;height:auto;padding:42px 46px 38px;border:1px solid #e5e8ee;border-radius:8px;background:#fff;color:#20232a;text-align:left;box-shadow:0 24px 70px #11182738;pointer-events:auto}.review-prompt-close.modal-close{position:absolute;top:18px;right:18px;width:34px;height:34px;margin:0;border:0;border-radius:50%;background:#f4f6f8;color:#8b94a3;font-size:26px;line-height:30px;text-align:center}.review-prompt-close.modal-close:hover{background:#e8ecf1;color:#343941}.review-prompt-content{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;width:100%;gap:24px}.review-prompt-header{text-align:center;max-width:540px}.review-prompt-eyebrow{margin:0 0 10px;color:#5a8064;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.review-prompt-title.modal-title{margin:0;color:#252934;font-size:28px;font-weight:700;line-height:1.25}.review-prompt-copy{margin:12px auto 0;max-width:520px;color:#5d6470;font-size:16px;line-height:1.55;text-align:center}.review-rating-row{display:grid;grid-template-columns:repeat(5,minmax(82px,1fr));gap:10px;width:100%;max-width:560px}.review-rating-button{min-width:0;height:72px;border:1px solid #d9dee7;border-radius:8px;background:#fff;color:#252934;box-shadow:0 1px 2px #1118270f;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s}.review-rating-button:hover,.review-rating-button:focus{border-color:#3f4652;background:#fbfcfd;box-shadow:0 8px 20px #1118271a;transform:translateY(-1px);outline:0}.review-rating-button-featured{border-color:#1f2329;background:#1f2329;color:#fff}.review-rating-button-featured:hover,.review-rating-button-featured:focus{background:#323841;border-color:#323841}.review-rating-number{font-size:19px;font-weight:800;line-height:1}.review-rating-stars{color:#d7a72f;font-size:12px;line-height:1;white-space:nowrap}.review-rating-button-featured .review-rating-stars{color:#f5c54b}.review-founder-note{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:22px;width:100%;max-width:560px}.review-founder-avatar{width:86px;height:86px;border-radius:50%;object-fit:cover;box-shadow:0 10px 28px #11182724}.review-founder-text .review-prompt-title,.review-founder-text .review-prompt-copy{text-align:left}.review-prompt-actions{display:flex;flex-direction:column;align-items:center;gap:12px}.review-primary-cta.modal-accept{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin:0;padding:14px 26px;border:0;border-radius:8px;background:#1f2329;color:#fff;font-size:16px;font-weight:800;line-height:1;text-decoration:none;box-shadow:0 10px 24px #11182724;transition:background-color .15s,box-shadow .15s,transform .15s}.review-primary-cta.modal-accept:hover,.review-primary-cta.modal-accept:focus{background:#343a43;color:#fff;box-shadow:0 14px 28px #1118272e;transform:translateY(-1px);outline:0}.review-secondary-action{border:0;background:transparent;color:#6c7280;cursor:pointer;font-size:14px;text-decoration:underline}.review-secondary-action:hover{color:#252934}.review-feedback-panel{width:100%;max-width:560px;text-align:center}.review-feedback-textarea{width:100%;min-height:126px;margin:22px 0 20px;padding:14px 16px;border:1px solid #d8dde6;border-radius:8px;color:#252934;font-size:15px;line-height:1.45;box-shadow:inset 0 1px 2px #1118270a;resize:vertical}.review-feedback-textarea:focus{border-color:#6f7785;box-shadow:0 0 0 3px #3f46521f;outline:0}.review-thank-you{text-align:center;max-width:520px}@media only screen and (width<=768px){#background-modal.review-prompt-backdrop{padding:16px}.review-prompt-modal.base-review-modal{width:100%;min-height:auto;padding:36px 20px 28px}.review-prompt-content{min-height:0;gap:20px}.review-prompt-title.modal-title{font-size:23px}.review-prompt-copy{font-size:15px}.review-rating-row{grid-template-columns:repeat(5,minmax(52px,1fr));gap:7px}.review-rating-button{height:62px}.review-rating-stars{font-size:10px}.review-founder-note{grid-template-columns:1fr;justify-items:center;text-align:center}.review-founder-text .review-prompt-title,.review-founder-text .review-prompt-copy{text-align:center}.review-founder-avatar{width:76px;height:76px}.review-primary-cta.modal-accept{width:100%;max-width:320px}}