/*
 * Shopee BI design system — standalone, hand-written stylesheet (NOT
 * Tailwind-generated). Originally built for Overview and the Pesanan >
 * Import tab, now promoted to the APP-WIDE design system (layout sidebar/
 * topbar, shared Blade components, every module page) — see the `:root`
 * block below. `.ov2-*` class names are kept as-is everywhere (not renamed
 * to something generic) to avoid duplicating ~250 rules under a second
 * prefix; the name is a historical artifact of where this system was first
 * built, not a scoping boundary anymore.
 *
 * This project's Tailwind build is a static, pre-purged file compiled on a
 * separate machine with Node — this production host has no npm/node/tailwind
 * CLI at all, so any Tailwind utility class not already present in the
 * committed public/css/app.css simply has no effect here. That's why this
 * is a small, plain-CSS system rather than more Tailwind classes.
 */

:root {
    --ov-bg: #F5F7FA;
    --ov-card: #FFFFFF;
    --ov-ink: #172033;
    --ov-muted: #64748B;
    --ov-border: #E2E8F0;
    --ov-accent: #4F46E5;
    --ov-accent-soft: #EEEDFC;
    --ov-success: #059669;
    --ov-success-soft: #E7F6F0;
    --ov-warning: #D97706;
    --ov-warning-soft: #FDF1E1;
    --ov-danger: #DC2626;
    --ov-danger-soft: #FCEAEA;
    --ov-accent2: #7C8DB5;
    --ov-accent2-soft: #EEF0F6;
}

body {
    background: var(--ov-bg);
    color: var(--ov-ink);
}

.ov2 {
    /* Re-declares the identical values already on :root above — kept here
       so this block (and Overview's own visuals) never depends on load
       order or on the :root block continuing to exist. */
    --ov-bg: #F5F7FA;
    --ov-card: #FFFFFF;
    --ov-ink: #172033;
    --ov-muted: #64748B;
    --ov-border: #E2E8F0;
    --ov-accent: #4F46E5;
    --ov-accent-soft: #EEEDFC;
    --ov-success: #059669;
    --ov-success-soft: #E7F6F0;
    --ov-warning: #D97706;
    --ov-warning-soft: #FDF1E1;
    --ov-danger: #DC2626;
    --ov-danger-soft: #FCEAEA;
    --ov-accent2: #7C8DB5;
    --ov-accent2-soft: #EEF0F6;

    background: var(--ov-bg);
    color: var(--ov-ink);
    margin: -1rem -1rem 0;
    padding: 1rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- per-metric-category color system ----------
 * Each category is a self-contained set of CSS custom properties
 * (--acc-primary / --acc-secondary / --acc-soft) consumed by the generic
 * .ov2-icon-box / .ov2-accent-value / .ov2-accent-top utilities below —
 * wrap any card/section in one of these classes to theme it, rather than
 * hand-picking a color per element.
 */
.ov2-acc-sales      { --acc-primary: #4F46E5; --acc-secondary: #6366F1; --acc-soft: rgba(79,70,229,.10); }
.ov2-acc-income     { --acc-primary: #059669; --acc-secondary: #10B981; --acc-soft: rgba(5,150,105,.10); }
.ov2-acc-orders     { --acc-primary: #7C3AED; --acc-secondary: #8B5CF6; --acc-soft: rgba(124,58,237,.10); }
.ov2-acc-unit       { --acc-primary: #0891B2; --acc-secondary: #06B6D4; --acc-soft: rgba(8,145,178,.10); }
.ov2-acc-traffic    { --acc-primary: #0284C7; --acc-secondary: #38BDF8; --acc-soft: rgba(2,132,199,.10); }
.ov2-acc-conversion { --acc-primary: #D97706; --acc-secondary: #F59E0B; --acc-soft: rgba(217,119,6,.10); }
.ov2-acc-ads        { --acc-primary: #EA580C; --acc-secondary: #FB923C; --acc-soft: rgba(234,88,12,.10); }
.ov2-acc-roas       { --acc-primary: #059669; --acc-secondary: #34D399; --acc-soft: rgba(5,150,105,.10); }
.ov2-acc-video      { --acc-primary: #DB2777; --acc-secondary: #F472B6; --acc-soft: rgba(219,39,119,.10); }
.ov2-acc-live       { --acc-primary: #7C3AED; --acc-secondary: #A78BFA; --acc-soft: rgba(124,58,237,.10); }
.ov2-acc-opportunity{ --acc-primary: #0F766E; --acc-secondary: #14B8A6; --acc-soft: rgba(15,118,110,.10); }
.ov2-acc-warning    { --acc-primary: #D97706; --acc-secondary: #F59E0B; --acc-soft: rgba(217,119,6,.10); }
.ov2-acc-problem    { --acc-primary: #DC2626; --acc-secondary: #F87171; --acc-soft: rgba(220,38,38,.10); }
.ov2-acc-slate      { --acc-primary: #64748B; --acc-secondary: #94A3B8; --acc-soft: rgba(100,116,139,.10); }

.ov2-icon-box {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--acc-soft, #EEF0F6); color: var(--acc-primary, #7C8DB5);
}
.ov2-icon-box .ov2-icon { width: 16px; height: 16px; }
.ov2-accent-value { color: var(--acc-primary, var(--ov-ink)); }
.ov2-accent-top { border-top: 3px solid var(--acc-primary, transparent); }
.ov2-accent-left { border-left: 3px solid var(--acc-primary, transparent); }
.ov2-accent-text { color: var(--acc-primary, var(--ov-muted)); }

@media (min-width: 640px) {
    .ov2 { margin: -1.5rem -1.5rem 0; padding: 1.5rem; }
}

.ov2 * { box-sizing: border-box; }
.ov2 a { color: inherit; }

/* ---------- layout helpers ---------- */

.ov2-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.ov2-grid { display: grid; gap: 1rem; }
.ov2-grid-5 { grid-template-columns: repeat(1, 1fr); }
.ov2-grid-3 { grid-template-columns: repeat(1, 1fr); }
.ov2-grid-2 { grid-template-columns: repeat(1, 1fr); }
.ov2-grid-6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
    .ov2-grid-5 { grid-template-columns: repeat(2, 1fr); }
    .ov2-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .ov2-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .ov2-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .ov2-grid-5 { grid-template-columns: repeat(5, 1fr); }
    .ov2-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .ov2-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .ov2-grid-6 { grid-template-columns: repeat(6, 1fr); }
}
.ov2-span-2 { grid-column: span 1; }
@media (min-width: 640px) { .ov2-span-2 { grid-column: span 2; } }
.ov2-w-full { grid-column: 1 / -1; }
.ov2-overflow-x { overflow-x: auto; }
.ov2-no-scrollbar-x { max-width: 100%; }

/* ---------- page chrome ---------- */

.ov2-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ov2-title { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; color: var(--ov-ink); line-height: 1.25; }
.ov2-subtitle { font-size: 13px; color: var(--ov-muted); margin-top: 2px; }
.ov2-meta { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.ov2-meta-item { font-size: 11.5px; color: var(--ov-muted); display: flex; align-items: center; gap: 6px; background: var(--ov-card); border: 1px solid var(--ov-border); border-radius: 999px; padding: 5px 10px; }
.ov2-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.ov2-dot-ok { background: var(--ov-success); }
.ov2-dot-warn { background: var(--ov-warning); }
.ov2-dot-idle { background: var(--ov-accent2); }

/* ---------- filter bar ---------- */

.ov2-filterbar { background: var(--ov-card); border: 1px solid var(--ov-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 1.25rem; }
.ov2-filterbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ov2-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1 1 150px; }
.ov2-field label { font-size: 11px; font-weight: 600; color: var(--ov-muted); text-transform: uppercase; letter-spacing: .03em; }
.ov2-input, .ov2-select {
    height: 34px; border: 1px solid var(--ov-border); border-radius: 8px; background: #fff;
    padding: 0 10px; font-size: 13px; color: var(--ov-ink); width: 100%;
}
.ov2-input:focus, .ov2-select:focus { outline: none; border-color: var(--ov-accent); box-shadow: 0 0 0 3px var(--ov-accent-soft); }
.ov2-btn:focus-visible, .ov2-nav-item:focus-visible, .ov2-nav-sub-item:focus-visible, .ov2-tab-btn:focus-visible, .ov2-link:focus-visible, .ov2-icon-btn:focus-visible, .ov2-pill-toggle:focus-visible {
    outline: 2px solid var(--ov-accent); outline-offset: 2px;
}
.ov2-input.is-error, .ov2-select.is-error { border-color: #FCA5A5; }
.ov2-input.is-error:focus, .ov2-select.is-error:focus { border-color: var(--ov-danger); box-shadow: 0 0 0 3px var(--ov-danger-soft); }
.ov2-input:disabled, .ov2-select:disabled { background: #F8FAFC; color: #94A3B8; cursor: not-allowed; }
.ov2-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ov2-btn { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ov2-btn-lg { height: 44px; padding: 0 18px; font-size: 13.5px; border-radius: 10px; }
.ov2-btn-primary { background: var(--ov-accent); color: #fff; transition: background 180ms ease; }
.ov2-btn-primary:hover { background: #4338CA; }
.ov2-btn-ghost { background: #fff; color: var(--ov-muted); border-color: var(--ov-border); }
.ov2-btn-ghost:hover { color: var(--ov-ink); border-color: #cbd5e1; }

/* ---------- cards & sections ---------- */

.ov2-card { background: var(--ov-card); border: 1px solid var(--ov-border); border-radius: 12px; padding: 18px; box-shadow: 0 1px 2px rgba(23,32,51,.04); transition: box-shadow 180ms ease, border-color 180ms ease; }
.ov2-card:hover { box-shadow: 0 4px 14px rgba(23,32,51,.07); border-color: #D7DEE9; }
.ov2-kpi:hover .ov2-icon-box { transform: scale(1.05); }
.ov2-icon-box { transition: transform 180ms ease; }
.ov2-card-flush { padding: 0; }
.ov2-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; flex-wrap: wrap; }
.ov2-section-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; color: var(--ov-ink); }
.ov2-section-title .ov2-icon { color: var(--ov-accent2); }
.ov2-section-sub { font-size: 12px; color: var(--ov-muted); margin-top: 2px; }
.ov2-source-tag { font-size: 10.5px; color: #94A3B8; margin-top: 10px; }

.ov2-icon { width: 17px; height: 17px; flex-shrink: 0; }
.ov2-icon-sm { width: 14px; height: 14px; }

/* ---------- KPI cards ---------- */

.ov2-kpi { padding: 16px 18px; }
.ov2-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--ov-muted); text-transform: uppercase; letter-spacing: .035em; display: flex; align-items: center; gap: 6px; }
.ov2-kpi-value { font-size: 25px; font-weight: 700; color: var(--ov-ink); margin-top: 8px; letter-spacing: -0.01em; }
.ov2-kpi-value.is-empty { color: #C7CEDA; font-weight: 600; }
.ov2-kpi-delta { font-size: 11px; font-weight: 700; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; }
.ov2-kpi-delta.up { color: var(--ov-success); background: var(--ov-success-soft); }
.ov2-kpi-delta.down { color: var(--ov-danger); background: var(--ov-danger-soft); }
.ov2-kpi-delta.flat { color: var(--ov-accent2); background: var(--ov-accent2-soft); }
.ov2-kpi-delta .ov2-kpi-vs { font-weight: 500; }
.ov2-kpi-delta-note { font-size: 11px; color: #94A3B8; margin-top: 6px; }
.ov2-kpi-vs { color: #94A3B8; font-weight: 500; }
.ov2-kpi-source { font-size: 10.5px; color: #94A3B8; margin-top: 8px; }
.ov2-kpi-caption { font-size: 10.5px; color: #94A3B8; margin-top: 4px; line-height: 1.4; }

/* ---------- Overview's combined KPI row — every card the exact same
   height regardless of how many optional lines (delta/note/source/caption)
   it happens to render, and every value sits in the exact same position
   (right after label+icon) since that's simply the 2nd item in a column
   flow — scoped to .ov2-kpi-overview only, the shared .ov2-kpi base above
   (used app-wide via <x-stat-card>) is untouched. ---------- */
.ov2-kpi-overview { display: flex; flex-direction: column; min-height: 168px; }
.ov2-kpi-overview .ov2-kpi-uniform-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ov2-kpi-overview .ov2-kpi-caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- badges ---------- */

.ov2-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.ov2-badge-high { background: var(--ov-danger-soft); color: var(--ov-danger); }
.ov2-badge-medium { background: var(--ov-warning-soft); color: var(--ov-warning); }
.ov2-badge-low { background: var(--ov-accent2-soft); color: var(--ov-accent2); }
.ov2-badge-success { background: var(--ov-success-soft); color: var(--ov-success); }
.ov2-badge-neutral { background: #F1F4F9; color: var(--ov-muted); }
.ov2-badge.normal-case { text-transform: none; letter-spacing: normal; font-weight: 600; }

/* ---------- business health ---------- */

.ov2-health { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; }
.ov2-health-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; padding: 6px 12px; border-radius: 8px; flex-shrink: 0; }
.ov2-health-good { background: var(--ov-success-soft); color: var(--ov-success); }
.ov2-health-watch { background: var(--ov-warning-soft); color: var(--ov-warning); }
.ov2-health-bad { background: var(--ov-danger-soft); color: var(--ov-danger); }
.ov2-health-neutral { background: #F1F4F9; color: var(--ov-muted); }
.ov2-health-reason { font-size: 13px; color: var(--ov-muted); flex: 1; min-width: 220px; line-height: 1.5; }

/* ---------- empty state ---------- */

.ov2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.25rem 1rem; color: var(--ov-muted); }
.ov2-empty .ov2-icon { width: 26px; height: 26px; color: #C7CEDA; margin-bottom: 8px; }
.ov2-empty p { font-size: 13px; }
.ov2-banner { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 9px 12px; border-radius: 8px; margin-bottom: 14px; }
.ov2-banner-warn { background: var(--ov-warning-soft); color: var(--ov-warning); }

/* ---------- ranking / horizontal bars ---------- */

.ov2-rank-list { display: flex; flex-direction: column; gap: 14px; }
.ov2-rank-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; }
.ov2-rank-num {
    width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; background: var(--acc-primary, var(--ov-accent2));
}
.ov2-rank-row:nth-child(1) .ov2-rank-num { opacity: 1; }
.ov2-rank-row:nth-child(2) .ov2-rank-num { opacity: .8; }
.ov2-rank-row:nth-child(3) .ov2-rank-num { opacity: .6; }
.ov2-rank-row:nth-child(n+4) .ov2-rank-num { opacity: .4; }
.ov2-rank-bar-fill { background: var(--acc-primary, var(--ov-accent)) !important; }
.ov2-rank-main { min-width: 0; }
.ov2-rank-name { font-size: 13px; font-weight: 600; color: var(--ov-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov2-rank-bar-track { background: #EEF1F6; border-radius: 999px; height: 6px; margin-top: 6px; overflow: hidden; }
.ov2-rank-bar-fill { background: var(--ov-accent); height: 100%; border-radius: 999px; }
.ov2-rank-value { font-size: 13px; font-weight: 650; color: var(--ov-ink); white-space: nowrap; text-align: right; }
.ov2-rank-sub { font-size: 11px; color: var(--ov-muted); white-space: nowrap; }

/* generic horizontal bar (channel/source contribution) */
.ov2-hbar-list { display: flex; flex-direction: column; gap: 12px; }
.ov2-hbar-row { display: flex; align-items: center; gap: 10px; }
.ov2-hbar-label { font-size: 12.5px; color: var(--ov-ink); font-weight: 550; width: 108px; flex-shrink: 0; }
.ov2-hbar-track { flex: 1; background: #EEF1F6; border-radius: 999px; height: 9px; overflow: hidden; }
.ov2-hbar-fill { height: 100%; border-radius: 999px; background: var(--acc-primary, var(--ov-accent2)); }
.ov2-hbar-value { font-size: 12px; font-weight: 650; color: var(--ov-ink); width: 96px; text-align: right; flex-shrink: 0; }

/* ---------- fee/settlement breakdown rows ----------
 * Grid (not fixed-width flex) so a long label WRAPS to a second line
 * instead of being ellipsis-truncated or pushing the nominal off-card —
 * label column is 1fr/min-width:0, value column is auto-width/nowrap, so
 * the nominal is never squeezed out regardless of label length or
 * viewport width. The progress bar sits on its own full-width row below,
 * so it can never visually dominate/overrun the label+value row.
 */
.ov2-fee-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ov2-fee-row { min-width: 0; }
.ov2-fee-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.ov2-fee-label { font-size: 12.5px; color: var(--ov-ink); font-weight: 550; min-width: 0; overflow-wrap: break-word; word-break: break-word; line-height: 1.4; display: flex; align-items: flex-start; gap: 7px; }
.ov2-fee-label .ov2-dot { margin-top: 5px; }
.ov2-fee-value { font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; text-align: right; flex-shrink: 0; }
.ov2-fee-track { width: 100%; max-width: 100%; background: #E2E8F0; border-radius: 999px; height: 6px; overflow: hidden; margin-top: 7px; }
.ov2-fee-fill { height: 100%; border-radius: 999px; background: #10B981; max-width: 100%; }
.ov2-fee-pct { font-size: 10.5px; color: var(--ov-muted); margin-top: 4px; }
.ov2-fee-total-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-top: 1px dashed var(--ov-border); border-bottom: 1px dashed var(--ov-border); margin: 2px 0 4px; }
.ov2-fee-total-label { font-size: 12.5px; font-weight: 650; color: var(--ov-ink); }
.ov2-fee-total-value { font-size: 13.5px; font-weight: 700; color: #334155; white-space: nowrap; text-align: right; }

/* ---------- opportunity / problem cards ---------- */

.ov2-list-card { border: 1px solid var(--ov-border); border-radius: 10px; padding: 13px 14px; display: flex; gap: 12px; align-items: flex-start; }
.ov2-list-num { font-size: 15px; font-weight: 700; color: var(--acc-primary, #CBD3E1); width: 22px; flex-shrink: 0; line-height: 1.4; opacity: .75; }
.ov2-list-title { font-size: 13px; font-weight: 650; color: var(--ov-ink); }
.ov2-list-text { font-size: 12.5px; color: var(--ov-muted); margin-top: 3px; line-height: 1.5; }
.ov2-list-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- recommendation cards ---------- */

.ov2-reco-card { border: 1px solid var(--ov-border); border-radius: 10px; padding: 14px 16px; }
.ov2-reco-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ov2-reco-title { font-size: 13.5px; font-weight: 650; color: var(--ov-ink); }
.ov2-reco-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
@media (min-width: 768px) { .ov2-reco-grid { grid-template-columns: repeat(3, 1fr); } }
.ov2-reco-block-label { font-size: 10.5px; font-weight: 700; color: var(--ov-accent2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.ov2-reco-block-body { font-size: 12.5px; color: var(--ov-ink); line-height: 1.5; }
.ov2-reco-actions { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ov-border); }
.ov2-reco-actions ol { margin: 0; padding-left: 18px; }
.ov2-reco-actions li { font-size: 12px; color: var(--ov-muted); margin-bottom: 3px; line-height: 1.5; }

/* ---------- funnel ---------- */

.ov2-funnel-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .ov2-funnel-grid { grid-template-columns: 1.5fr 1fr; } }
.ov2-funnel-steps { display: flex; flex-direction: column; }
.ov2-funnel-step { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 0; }
.ov2-funnel-step + .ov2-funnel-step { border-top: 1px dashed var(--ov-border); }
.ov2-funnel-step-label { font-size: 12.5px; color: var(--ov-muted); font-weight: 550; }
.ov2-funnel-step-value { font-size: 15px; font-weight: 700; color: var(--ov-ink); text-align: right; }
.ov2-funnel-step-rate { font-size: 11px; color: var(--ov-accent2); font-weight: 600; text-align: right; margin-top: 2px; }
.ov2-funnel-track { grid-column: 1 / -1; background: #EEF1F6; border-radius: 999px; height: 8px; overflow: hidden; margin-top: 2px; }
.ov2-funnel-fill { height: 100%; border-radius: 999px; background: var(--acc-primary, var(--ov-accent)); }
.ov2-findings { display: flex; flex-direction: column; gap: 10px; }
.ov2-finding-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid #F1F4F9; }
.ov2-finding-label { color: var(--ov-muted); }
.ov2-finding-value { font-weight: 650; }
.ov2-conclusion { margin-top: 12px; padding: 12px 14px; background: var(--ov-accent-soft); border-radius: 8px; font-size: 12.5px; color: #3730A3; line-height: 1.55; }

/* ---------- store comparison table ---------- */

.ov2-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ov2-table th { text-align: right; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ov-muted); padding: 10px 14px; border-bottom: 1px solid var(--ov-border); white-space: nowrap; }
.ov2-table th:first-child, .ov2-table td:first-child { text-align: left; }
.ov2-table td { padding: 11px 14px; border-bottom: 1px solid #F1F4F9; text-align: right; white-space: nowrap; }
.ov2-table tr:last-child td { border-bottom: none; }
.ov2-table tr.is-best td { background: var(--ov-accent-soft); }
.ov2-table .ov2-store-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ov2-rank-chip { width: 20px; height: 20px; border-radius: 6px; background: #F1F4F9; color: var(--ov-accent2); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
tr.is-best .ov2-rank-chip { background: var(--ov-accent); color: #fff; }
.ov2-muted-cell { color: #C7CEDA; }

/* ---------- small stat rows (per-module compact metrics) ---------- */

.ov2-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ov2-stat-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 480px) { .ov2-stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.ov2-stat { padding: 2px 0; }
.ov2-stat-label { font-size: 11px; color: var(--ov-muted); font-weight: 550; }
.ov2-stat-value { font-size: 16.5px; font-weight: 700; color: var(--ov-ink); margin-top: 3px; }
.ov2-stat-hero { padding: 4px 0 10px; border-bottom: 1px dashed var(--ov-border); margin-bottom: 10px; }
.ov2-stat-hero .ov2-stat-value { font-size: 27px; }
.ov2-stat-hero-delta { font-size: 12px; font-weight: 650; margin-top: 4px; }

.ov2-insight-line { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ov-muted); line-height: 1.55; padding-top: 10px; margin-top: 10px; border-top: 1px dashed var(--ov-border); }
.ov2-insight-line .ov2-icon { color: var(--ov-accent2); margin-top: 1px; }

/* ---------- misc text helpers ---------- */

.ov2-text-muted { color: var(--ov-muted); }
.ov2-text-xs { font-size: 12px; }
.ov2-mb-0 { margin-bottom: 0 !important; }

/* ---------- chart canvas containers ---------- */

.ov2-chart-lg { height: 300px; }
.ov2-chart-md { height: 190px; }
.ov2-chart-sm { height: 84px; }

/* ---------- business score gauge ---------- */

.ov2-score-wrap { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.ov2-score-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.ov2-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ov2-score-ring-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--ov-ink); }
.ov2-score-meta { min-width: 0; }
.ov2-score-label { font-size: 11px; font-weight: 700; color: var(--ov-muted); text-transform: uppercase; letter-spacing: .04em; }
.ov2-score-status { font-size: 13px; font-weight: 650; margin-top: 2px; }
.ov2-score-coverage { font-size: 11px; color: #94A3B8; margin-top: 2px; }
.ov2-score-breakdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ov-border); }
@media (min-width: 768px) { .ov2-score-breakdown { grid-template-columns: repeat(4, 1fr); } }
.ov2-score-cat { }
.ov2-score-cat-label { font-size: 10.5px; color: var(--ov-muted); font-weight: 600; }
.ov2-score-cat-bar { background: #EEF1F6; border-radius: 999px; height: 5px; margin-top: 5px; overflow: hidden; }
.ov2-score-cat-fill { height: 100%; border-radius: 999px; }
.ov2-score-cat-value { font-size: 11px; font-weight: 650; color: var(--ov-ink); margin-top: 3px; }

/* ---------- product matrix (2x2) ---------- */

.ov2-matrix-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .ov2-matrix-grid { grid-template-columns: repeat(2, 1fr); } }
.ov2-matrix-cell { border: 1px solid var(--ov-border); border-radius: 10px; padding: 12px 14px; }
.ov2-matrix-cell-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ov2-matrix-cell-label { font-size: 12px; font-weight: 650; color: var(--ov-ink); }
.ov2-matrix-cell-count { font-size: 18px; font-weight: 700; color: var(--ov-ink); }
.ov2-matrix-example { font-size: 11.5px; color: var(--ov-muted); padding: 3px 0; border-top: 1px dashed #F1F4F9; }
.ov2-matrix-example:first-child { border-top: none; }

/* ---------- pareto ---------- */

.ov2-pareto-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.ov2-pareto-pct { width: 46px; font-size: 13px; font-weight: 700; color: var(--ov-accent); flex-shrink: 0; }
.ov2-pareto-track { flex: 1; background: #EEF1F6; border-radius: 999px; height: 8px; overflow: hidden; }
.ov2-pareto-fill { height: 100%; border-radius: 999px; background: var(--acc-primary, var(--ov-accent2)); }
.ov2-pareto-text { font-size: 12px; color: var(--ov-muted); flex-shrink: 0; white-space: nowrap; }

/* ---------- decision buckets (ads) ---------- */

.ov2-decision-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .ov2-decision-grid { grid-template-columns: repeat(2, 1fr); } }
.ov2-decision-col-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.ov2-decision-item { font-size: 12px; color: var(--ov-muted); padding: 6px 0; border-top: 1px solid #F1F4F9; }
.ov2-decision-item:first-child { border-top: none; }
.ov2-decision-item strong { color: var(--ov-ink); font-weight: 650; }

/* ---------- RFM segments ---------- */

.ov2-segment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .ov2-segment-grid { grid-template-columns: repeat(5, 1fr); } }
.ov2-segment-cell { text-align: center; padding: 10px 6px; border: 1px solid var(--ov-border); border-radius: 8px; }
.ov2-segment-count { font-size: 18px; font-weight: 700; color: var(--acc-primary, var(--ov-ink)); }
.ov2-segment-label { font-size: 10px; color: var(--ov-muted); margin-top: 2px; }

/* ---------- data quality ---------- */

.ov2-quality-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #F1F4F9; font-size: 12.5px; }
.ov2-quality-row:last-child { border-bottom: none; }
.ov2-quality-label { color: var(--ov-ink); font-weight: 550; }

/* ---------- action center ---------- */

.ov2-action-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F4F9; }
.ov2-action-row:last-child { border-bottom: none; }
.ov2-action-num { width: 24px; height: 24px; border-radius: 7px; background: var(--ov-accent-soft); color: var(--ov-accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ov2-action-text { font-size: 12.5px; color: var(--ov-ink); line-height: 1.5; }

/* ---------- kpi dictionary ---------- */

.ov2-dict-row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid #F1F4F9; font-size: 12px; }
.ov2-dict-row:last-child { border-bottom: none; }
.ov2-dict-label { font-weight: 650; color: var(--ov-ink); }
.ov2-dict-source { color: var(--ov-accent2); }
.ov2-dict-def { color: var(--ov-muted); }
.ov2-collapsible summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--ov-ink); list-style: none; display: flex; align-items: center; gap: 6px; }
.ov2-collapsible summary::-webkit-details-marker { display: none; }
.ov2-collapsible summary::before { content: '▸'; color: var(--ov-accent2); font-size: 11px; transition: transform .15s; }
.ov2-collapsible[open] summary::before { transform: rotate(90deg); }
.ov2-collapsible[open] summary { margin-bottom: 10px; }

/* ============================================================
 * Import workspace (Pesanan > Import tab)
 * ============================================================ */

/* ---------- page header ---------- */

.ov2-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .875rem; }
.ov2-page-title-row { display: flex; align-items: center; gap: 10px; }
.ov2-page-title { font-size: 18px; font-weight: 700; color: var(--ov-ink); line-height: 1.2; }
.ov2-page-subtitle { font-size: 13px; color: var(--ov-muted); margin-top: 3px; }

/* ---------- workflow step indicator ---------- */

.ov2-steps { display: flex; align-items: flex-start; gap: 0; margin-bottom: 1.25rem; overflow-x: auto; }
.ov2-step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 4px 0; }
.ov2-step-badge {
    width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0; background: #F1F4F9; color: #94A3B8; transition: all 180ms ease;
}
.ov2-step.is-active .ov2-step-badge { background: #4F46E5; color: #fff; }
.ov2-step.is-done .ov2-step-badge { background: #059669; color: #fff; }
.ov2-step-title { font-size: 12.5px; font-weight: 650; color: #94A3B8; }
.ov2-step.is-active .ov2-step-title { color: #4F46E5; }
.ov2-step.is-done .ov2-step-title { color: #059669; }
.ov2-step-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
.ov2-step-arrow { width: 28px; height: 1px; background: var(--ov-border); margin: 0 10px; flex-shrink: 0; align-self: center; }
@media (max-width: 640px) {
    .ov2-step-sub { display: none; }
    .ov2-step-arrow { width: 16px; margin: 0 6px; }
}

/* ---------- substep label (01 Pilih Toko, 02 Upload File) ---------- */

.ov2-substep-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ov2-substep-num {
    width: 18px; height: 18px; border-radius: 6px; background: var(--ov-accent-soft); color: var(--ov-accent);
    font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ov2-substep-title { font-size: 12.5px; font-weight: 650; color: var(--ov-ink); }
.ov2-substep-helper { font-size: 11.5px; color: var(--ov-muted); margin-bottom: 8px; line-height: 1.45; }

/* ---------- store select with icon ---------- */

.ov2-select-icon-wrap { position: relative; }
.ov2-select-icon-wrap .ov2-select-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ov-muted); pointer-events: none; }
.ov2-select-tall { height: 44px; padding-left: 38px; font-size: 13.5px; }

/* ---------- dropzone ---------- */

.ov2-dropzone {
    position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; text-align: left;
    min-height: 76px; padding: 14px 16px; border: 1px dashed #CBD5E1; border-radius: 10px; background: #F8FAFC;
    cursor: pointer; transition: border-color 180ms ease, background 180ms ease;
}
.ov2-dropzone:hover, .ov2-dropzone.is-dragover { border-color: #4F46E5; background: #EEF0FE; }
.ov2-dropzone-lg { flex-direction: column; text-align: center; min-height: auto; }
.ov2-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ov2-dropzone-icon { width: 32px; height: 32px; border-radius: 8px; background: #EEF0FE; color: #4F46E5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ov2-dropzone-text { min-width: 0; }
.ov2-dropzone-title { font-size: 13px; font-weight: 650; color: var(--ov-ink); }
.ov2-dropzone-sub { font-size: 11.5px; color: var(--ov-muted); }
.ov2-dropzone-format { font-size: 11px; color: #94A3B8; }

/* ---------- file-selected card ---------- */

.ov2-file-card {
    display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 12px 14px;
    border: 1px solid var(--ov-border); border-radius: 10px; background: #fff;
}
.ov2-file-icon { width: 32px; height: 32px; border-radius: 8px; background: #E7F6EE; color: #16A34A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ov2-file-info { min-width: 0; flex: 1; }
.ov2-file-name { font-size: 12.5px; font-weight: 650; color: var(--ov-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov2-file-meta { font-size: 11px; color: #059669; font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.ov2-file-replace { flex-shrink: 0; }

/* ---------- checklist / status rows ---------- */

.ov2-checklist { display: flex; flex-direction: column; gap: 4px; }
.ov2-check-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #059669; font-weight: 550; }
.ov2-check-row.is-pending { color: var(--ov-muted); font-weight: 500; }

/* ---------- info strip ---------- */

.ov2-info-strip { display: flex; align-items: flex-start; gap: 10px; background: #F8FAFC; border: 1px solid var(--ov-border); border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: var(--ov-muted); line-height: 1.55; }
.ov2-info-strip .ov2-icon { color: #4F46E5; flex-shrink: 0; margin-top: 1px; }
.ov2-info-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #94A3B8; }
.ov2-info-line .ov2-icon { color: var(--ov-accent2); flex-shrink: 0; }

/* compact card padding modifier — used where a section needs to feel dense, not spacious */
.ov2-card-compact { padding: 14px 16px; }

/* ---------- alert cards (warning / danger, distinct from Overview's compact banner) ---------- */

.ov2-alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; }
.ov2-alert-warn { background: #FDF1E1; color: #92400E; border: 1px solid #FBD9A5; }
.ov2-alert-danger { background: #FCEAEA; color: #991B1B; border: 1px solid #F5B8B8; }
.ov2-alert-title { font-weight: 700; margin-bottom: 2px; }
.ov2-alert .ov2-icon { flex-shrink: 0; margin-top: 1px; }

/* ---------- help / guide steps ---------- */

.ov2-help-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .ov2-help-grid { grid-template-columns: repeat(3, 1fr); } }
.ov2-help-num { font-size: 18px; font-weight: 700; color: var(--ov-accent2); margin-bottom: 4px; }
.ov2-help-text { font-size: 12.5px; color: var(--ov-muted); line-height: 1.5; }

/* ---------- key-value definition rows (file info, preview meta) ---------- */

.ov2-kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
@media (min-width: 768px) { .ov2-kv-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 480px) and (max-width: 767px) { .ov2-kv-grid.cols-5 { grid-template-columns: repeat(3, 1fr); } }
.ov2-kv-label { font-size: 11px; color: var(--ov-muted); font-weight: 550; text-transform: uppercase; letter-spacing: .02em; }
.ov2-kv-value { font-size: 14px; color: var(--ov-ink); font-weight: 650; margin-top: 3px; overflow-wrap: break-word; }

/* ---------- empty state (history) ---------- */

.ov2-empty-lg { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1rem; }
.ov2-empty-lg .ov2-icon-box { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 14px; }
.ov2-empty-lg .ov2-icon-box .ov2-icon { width: 26px; height: 26px; }
.ov2-empty-lg-title { font-size: 14px; font-weight: 650; color: var(--ov-ink); }
.ov2-empty-lg-sub { font-size: 12.5px; color: var(--ov-muted); margin-top: 4px; max-width: 320px; line-height: 1.5; }
.ov2-empty-lg-action { margin-top: 16px; }

/* ---------- disabled primary button ---------- */

.ov2-btn-primary:disabled, .ov2-btn-primary.is-disabled { background: #C7CEDA; cursor: not-allowed; }
.ov2-btn-primary:disabled:hover, .ov2-btn-primary.is-disabled:hover { background: #C7CEDA; }
.ov2-btn[disabled] { opacity: 1; }
.ov2-btn-danger-subtle { background: transparent; color: #DC2626; border: 1px solid transparent; }
.ov2-btn-danger-subtle:hover { background: #FCEAEA; }

/* ---------- small spinner (loading state) ---------- */

.ov2-spinner { width: 14px; height: 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; display: inline-block; animation: ov2-spin .7s linear infinite; }

/* ---------- import guide bar (compact single-line "Panduan Import") ---------- */

.ov2-guide-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.ov2-guide-bar-icon { width: 16px; height: 16px; flex-shrink: 0; color: #4F46E5; }
.ov2-guide-bar-label { font-size: 13px; font-weight: 600; color: var(--ov-ink); white-space: nowrap; flex-shrink: 0; }
.ov2-guide-bar-text { font-size: 13px; color: #64748B; line-height: 1.4; }
.ov2-guide-bar-file {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    background: #EEF2FF;
    color: #4F46E5;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
@media (min-width: 1024px) {
    .ov2-guide-bar { flex-wrap: nowrap; }
    .ov2-guide-bar-label, .ov2-guide-bar-text { font-size: 12px; white-space: nowrap; }
}
@keyframes ov2-spin { to { transform: rotate(360deg); } }

/* ============================================================
 * App shell — sidebar, topbar (global, promoted from Overview design system)
 * ============================================================ */

/* Dark navy (not pure black) — see §15 of the sidebar premium-revision brief. */
.ov2-sidebar { background: #0F1629; color: #94A3B8; font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.ov2-sidebar-brand { border-bottom: 1px solid rgba(148,163,255,.10); }
.ov2-sidebar-logo {
    width: 40px; height: 40px; border-radius: 11px; font-size: 14.5px;
    background: var(--ov-accent); color: #fff;
    box-shadow: 0 3px 10px rgba(79,70,229,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
.ov2-sidebar-title { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.ov2-sidebar-subtitle { color: #7C89B3; font-size: 11.5px; letter-spacing: .02em; margin-top: 1px; }

/* Main nav items (Dashboard / Marketplace / Admin toggles) */
.ov2-nav-item, .ov2-nav-group-label {
    color: #94A3B8; font-weight: 500; font-size: 15px; border-radius: 10px;
    min-height: 42px; padding: 0 12px;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.ov2-nav-item:hover, .ov2-nav-group-label:hover { background: rgba(99,102,241,.14); color: #fff; transform: translateX(2px); }
.ov2-nav-item.is-active {
    background: var(--ov-accent); color: #fff; font-weight: 600;
    box-shadow: 0 4px 14px rgba(79,70,229,.35), 0 1px 2px rgba(79,70,229,.5);
}
.ov2-nav-item .ov2-icon, .ov2-nav-group-label svg { opacity: .8; transition: opacity 180ms ease; }
.ov2-nav-item:hover .ov2-icon, .ov2-nav-item.is-active .ov2-icon,
.ov2-nav-group-label:hover svg { opacity: 1; }
.ov2-nav-group-label svg:last-child { transition: transform 180ms ease, opacity 180ms ease; }

/* Submenu (Shopee's Overview/Pesanan/... and Admin's Kelola Admin/Toko) */
.ov2-nav-sub { border-left: 1px solid rgba(148,163,255,.14); }
.ov2-nav-sub-item {
    color: #7C89B3; font-weight: 500; font-size: 14.5px; border-radius: 8px;
    min-height: 38px; display: flex; align-items: center; padding: 0 12px;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.ov2-nav-sub-item:hover { background: rgba(99,102,241,.14); color: #fff; transform: translateX(2px); }
.ov2-nav-sub-item.is-active {
    background: var(--ov-accent); color: #fff; font-weight: 600;
    box-shadow: 0 2px 10px rgba(79,70,229,.4);
}

.ov2-sidebar-footer { border-top: 1px solid rgba(148,163,255,.10); }
.ov2-sidebar-user-name { color: #E7EAF3; font-size: 14px; font-weight: 600; }
.ov2-sidebar-user-email { color: #66739E; font-size: 11.5px; }

@media (hover: none) {
    .ov2-nav-item:hover, .ov2-nav-group-label:hover, .ov2-nav-sub-item:hover { transform: none; }
}

.ov2-topbar { background: var(--ov-card); border-bottom: 1px solid var(--ov-border); }
.ov2-topbar-title { color: var(--ov-ink); font-weight: 650; }
.ov2-topbar-subtitle { color: #94A3B8; }
.ov2-topbar-user-name { color: var(--ov-ink); font-weight: 550; }
.ov2-topbar-user-role { color: #94A3B8; }
.ov2-avatar { background: var(--ov-accent-soft); color: var(--ov-accent); font-weight: 650; }
.ov2-icon-btn { color: #94A3B8; border-radius: 8px; transition: background 150ms ease, color 150ms ease; }
.ov2-icon-btn:hover { color: var(--ov-ink); background: #F1F4F9; }

/* ---------- flash messages (session success/error) ---------- */

.ov2-flash { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 1rem; border: 1px solid transparent; line-height: 1.5; }
.ov2-flash-success { background: var(--ov-success-soft); color: #065F46; border-color: #A7E4CB; }
.ov2-flash-danger { background: var(--ov-danger-soft); color: #991B1B; border-color: #F5B8B8; }

/* ---------- modal ---------- */

.ov2-modal-overlay { background: rgba(23,32,51,.5); }
.ov2-modal-panel { background: #fff; border-radius: 16px; box-shadow: 0 20px 40px rgba(23,32,51,.16); }
.ov2-modal-head { border-bottom: 1px solid #F1F4F9; }
.ov2-modal-title { font-weight: 650; color: var(--ov-ink); }
.ov2-modal-close { color: #94A3B8; }
.ov2-modal-close:hover { color: var(--ov-ink); }

/* ---------- inline text link ---------- */

.ov2-link { color: var(--ov-accent); font-weight: 600; text-decoration: none; }
.ov2-link:hover { color: #4338CA; }
.ov2-hover-link { transition: color 150ms ease; }
.ov2-hover-link:hover { color: var(--ov-accent); }

/* ---------- extra button variants (primary/ghost already existed) ---------- */

.ov2-btn-secondary { background: #fff; color: var(--ov-ink); border-color: var(--ov-border); }
.ov2-btn-secondary:hover { background: #F8FAFC; border-color: #cbd5e1; }
.ov2-btn-danger { background: var(--ov-danger); color: #fff; transition: background 180ms ease; }
.ov2-btn-danger:hover { background: #B91C1C; }
.ov2-btn-quiet { background: transparent; color: #94A3B8; border-color: transparent; }
.ov2-btn-quiet:hover { background: #F1F4F9; color: var(--ov-ink); }

/* ---------- module page header + tab nav (Pesanan/Iklan/Trafik/... index pages) ---------- */

.ov2-page-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.ov2-page-heading { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; color: var(--ov-ink); line-height: 1.25; }
.ov2-page-subheading { font-size: 13px; color: var(--ov-muted); margin-top: 4px; }

.ov2-tabnav { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--ov-border); margin-bottom: 1.5rem; overflow-x: auto; }
.ov2-tab-btn {
    padding: 10px 16px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 150ms ease, border-color 150ms ease;
    color: var(--ov-muted); background: none;
}
.ov2-tab-btn:hover { color: var(--ov-ink); }
.ov2-tab-btn.is-active { color: var(--ov-accent); border-color: var(--ov-accent); }

/* ---------- small pill toggle group (granularity/sort switches) ---------- */

.ov2-pill-toggle { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ov-muted); border: 1px solid transparent; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.ov2-pill-toggle:hover { background: #F1F4F9; }
.ov2-pill-toggle.is-active { background: var(--ov-accent); color: #fff; border-color: var(--ov-accent); }
.ov2-pill-toggle-outline { border-color: var(--ov-border); color: var(--ov-muted); }
.ov2-pill-toggle-outline:hover { background: #F8FAFC; }
.ov2-pill-toggle-outline.is-active { background: var(--ov-accent); border-color: var(--ov-accent); color: #fff; }

/* ---------- record-list table variant (left-aligned text columns, e.g. Admin) ---------- */

.ov2-table-list th, .ov2-table-list td { text-align: left; }
.ov2-table tbody tr:hover td { background: #FAFBFD; }
.ov2-row-aggregate { background: var(--ov-accent-soft); }

/* ---------- generic table polish for hand-rolled tables that keep their own
   per-cell text-align (a raw `text-right` class on a <td> must still win —
   so alignment here is set ONCE on the table root and left to inherit down,
   exactly like the plain `<thead class="text-left">` pattern this replaces,
   rather than on `.ov2-table-auto th/td` where it would out-specificity any
   individual cell's own alignment class). ---------- */
.ov2-table-auto { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.ov2-table-auto th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ov-muted); padding: 10px 12px; border-bottom: 1px solid var(--ov-border); white-space: nowrap; }
.ov2-table-auto td { padding: 10px 12px; border-bottom: 1px solid #F1F4F9; }
.ov2-table-auto tbody tr:last-child td { border-bottom: none; }
.ov2-table-auto tbody tr:hover td { background: #FAFBFD; }
.ov2-table-auto tbody tr.is-best td { background: var(--ov-accent-soft); }

/* ---------- generic bordered sub-card (chart/table block inside a section,
   e.g. Analisis Voucher Shopee / Analisis Total Pembayaran Pembeli) ---------- */
.ov2-subcard { border: 1px solid var(--ov-border); border-radius: 12px; padding: 14px 16px; background: var(--ov-card); }
.ov2-subcard-title { font-size: 12.5px; font-weight: 650; color: var(--ov-ink); }
.ov2-subcard-sub { font-size: 11px; color: var(--ov-muted); margin-top: 2px; margin-bottom: 10px; }

/* ---------- wide financial table variant (many columns, e.g. Data Pesanan):
   header stays readable while scrolling both directions, opt-in per table
   via `.ov2-table-scroll` on the wrapper so other .ov2-table-auto tables are
   unaffected. ---------- */
.ov2-table-scroll { max-height: 72vh; overflow: auto; }
.ov2-table-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--ov-card); box-shadow: 0 1px 0 var(--ov-border); }
.ov2-col-num { min-width: 100px; }
.ov2-col-wide { min-width: 220px; }
.ov2-col-id { min-width: 150px; }
.ov2-col-text { min-width: 130px; }

/* ---------- selectable stat tile (toggle button styled as a KPI card) ---------- */

.ov2-tile-select.is-active { border-color: var(--ov-accent); box-shadow: 0 0 0 3px var(--ov-accent-soft); }

/* ============================================================
 * Period filter — "Periode Data" date-range picker.
 * Trigger field + two-pane dropdown (left: quick presets/granularity menu,
 * right: calendar/month-grid/year-grid depending on which granularity is
 * active). One reusable component for every module's period filter.
 * ============================================================ */

.ov2-period { position: relative; }
.ov2-period-trigger {
    display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
    border: 1px solid var(--ov-border); border-radius: 8px; background: #fff;
    font-size: 13px; cursor: pointer; width: 100%; min-width: 200px; text-align: left;
}
.ov2-period-trigger:hover { border-color: #cbd5e1; }
.ov2-period-trigger.is-open { border-color: var(--ov-accent); box-shadow: 0 0 0 3px var(--ov-accent-soft); }
.ov2-period-trigger-label { color: var(--ov-muted); font-weight: 600; flex-shrink: 0; }
.ov2-period-trigger-value { color: var(--ov-ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov2-period-trigger-icon { margin-left: auto; color: #94A3B8; flex-shrink: 0; }

.ov2-period-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    display: flex; background: #fff; border: 1px solid var(--ov-border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(23,32,51,.14); overflow: hidden; min-width: 560px;
}
@media (max-width: 640px) {
    .ov2-period-panel { flex-direction: column; min-width: 0; width: calc(100vw - 2rem); left: 50%; transform: translateX(-50%); max-height: 80vh; overflow-y: auto; }
}

.ov2-period-menu { width: 190px; flex-shrink: 0; padding: 8px; border-right: 1px solid var(--ov-border); }
@media (max-width: 640px) { .ov2-period-menu { width: 100%; border-right: none; border-bottom: 1px solid var(--ov-border); } }
.ov2-period-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    width: 100%; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 550;
    color: var(--ov-ink); text-align: left; transition: background 120ms ease, color 120ms ease;
}
.ov2-period-menu-item:hover { background: #F1F4F9; }
.ov2-period-menu-item.is-active { background: var(--ov-accent-soft); color: var(--ov-accent); font-weight: 650; }
.ov2-period-menu-item .ov2-icon { width: 14px; height: 14px; color: #94A3B8; flex-shrink: 0; }
.ov2-period-menu-sep { height: 1px; background: var(--ov-border); margin: 6px 4px; }

.ov2-period-pane { padding: 14px 16px; min-width: 320px; }
@media (max-width: 640px) { .ov2-period-pane { min-width: 0; } }
.ov2-period-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ov2-period-nav-btn {
    width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ov-muted); transition: background 120ms ease, color 120ms ease;
}
.ov2-period-nav-btn:hover { background: #F1F4F9; color: var(--ov-ink); }
.ov2-period-nav-btn .ov2-icon { width: 15px; height: 15px; }
.ov2-period-nav-title { font-size: 13.5px; font-weight: 650; color: var(--ov-ink); }

.ov2-period-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ov2-period-cell {
    padding: 9px 4px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--ov-ink);
    text-align: center; transition: background 120ms ease, color 120ms ease;
}
.ov2-period-cell:hover { background: #F1F4F9; }
.ov2-period-cell.is-active { background: var(--ov-accent); color: #fff; font-weight: 650; }
.ov2-period-cell.is-disabled { color: #C7CEDA; cursor: not-allowed; }
.ov2-period-cell.is-disabled:hover { background: none; }
.ov2-period-cell.is-empty { visibility: hidden; }

.ov2-period-day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ov2-period-day-head { font-size: 10px; font-weight: 700; color: #94A3B8; text-align: center; padding: 4px 0; text-transform: uppercase; }
.ov2-period-day-cell {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 7px;
    font-size: 12.5px; color: var(--ov-ink); transition: background 120ms ease, color 120ms ease;
}
.ov2-period-day-cell:hover { background: #F1F4F9; }
.ov2-period-day-cell.is-active { background: var(--ov-accent); color: #fff; font-weight: 650; }
.ov2-period-day-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--ov-accent2); }
.ov2-period-day-cell.is-muted { color: #C7CEDA; }
.ov2-period-day-row.is-week-active .ov2-period-day-cell { background: var(--ov-accent-soft); }
.ov2-period-day-row.is-week-active .ov2-period-day-cell.is-active { background: var(--ov-accent); color: #fff; }

.ov2-period-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; margin-top: 12px; border-top: 1px dashed var(--ov-border); }
.ov2-period-footer-hint { font-size: 11.5px; color: #94A3B8; }

/* ---------- global auto-apply loading bar (thin top progress bar) ---------- */

.ov2-loadbar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: var(--ov-accent); z-index: 9999; opacity: 0;
    transition: width 200ms ease, opacity 200ms ease;
    box-shadow: 0 0 8px var(--ov-accent);
}
.ov2-loadbar.is-active { opacity: 1; width: 85%; transition: width 6s cubic-bezier(0.1,0.6,0.2,1), opacity 200ms ease; }