/* FoxUp Merchant panel */
:root {
    --mp-brand: #F45B5B;
    --mp-brand-dark: #D94848;
    --mp-ink: #1E2433;
    --mp-muted: #6B7280;
    --mp-side: #161B2E;
    --mp-side-ink: #A9B0C6;
    --mp-bg: #F4F6FA;
    --mp-line: #E6E9F0;
    --mp-series: #3B4A8C;   /* primary data series (validated with --mp-card-series) */
    --mp-card-series: #E8615E;
    --mp-sidebar-w: 248px;

    /* Variables the theme's Bootstrap build (copied from Admin) expects from its app.css. */
    --vz-input-bg: #fff;
    --vz-input-border: #ced4da;
    --vz-input-check-border: #ced4da;
    --vz-input-disabled-bg: #eff2f7;
    --vz-input-focus-border: #9aa6d6;
    --vz-input-group-addon-bg: #eff2f7;
    --vz-card-bg-custom: #fff;
    --vz-list-group-hover-bg: #f3f6f9;
    --vz-body-font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--vz-body-font-family);
}

body { background: var(--mp-bg); color: var(--mp-ink); font-size: .925rem; font-family: var(--vz-body-font-family); }
a { color: #2F4AA8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sidebar */
/* !important: Bootstrap's .offcanvas-lg makes the background transparent on large screens. */
.mp-sidebar { background: var(--mp-side) !important; color: var(--mp-side-ink); width: var(--mp-sidebar-w); display: flex; flex-direction: column; }
@media (min-width: 992px) {
    .mp-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; }
    .mp-main { margin-left: var(--mp-sidebar-w); }
}
@media (max-width: 991.98px) {
    .mp-sidebar.offcanvas-lg { --bs-offcanvas-width: var(--mp-sidebar-w); --bs-offcanvas-bg: var(--mp-side); }
}
.mp-brand { display: flex; align-items: center; gap: .5rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.mp-brand img { height: 30px; }
.mp-brand-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: rgba(244,91,91,.25); border-radius: 4px; padding: 2px 6px; }
.mp-nav { padding: .5rem .75rem; flex: 1; overflow-y: auto; }
.mp-nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #6C7593; padding: 1rem .75rem .35rem; }
.mp-nav a { display: flex; align-items: center; gap: .65rem; color: var(--mp-side-ink); padding: .55rem .75rem; border-radius: 8px; margin-bottom: 2px; }
.mp-nav a i { font-size: 1.1rem; }
.mp-nav a:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.mp-nav a.active { background: rgba(244,91,91,.16); color: #fff; box-shadow: inset 3px 0 0 var(--mp-brand); }
.mp-sidebar-foot { font-size: .75rem; color: #6C7593; padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.06); }

/* Top bar */
.mp-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; height: 60px; padding: 0 1.5rem; background: #fff; border-bottom: 1px solid var(--mp-line); }
.mp-menu-btn { font-size: 1.4rem; color: var(--mp-ink); padding: 0; }
.mp-merchant { font-weight: 600; }
.mp-merchant i { color: var(--mp-brand); margin-right: .25rem; }
.mp-user { display: flex; align-items: center; gap: .5rem; border: 0; }
.mp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--mp-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; }

.mp-content { padding: 1.5rem; max-width: 1600px; }
.mp-footer { padding: 1rem 1.5rem 2rem; font-size: .75rem; color: var(--mp-muted); }

/* Breadcrumb: the theme's divider is an icon-font glyph the panel does not load. */
.breadcrumb { --vz-breadcrumb-divider: "›"; --bs-breadcrumb-divider: "›"; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; font-family: inherit; }

/* Page head */
.mp-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.mp-page-head h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .15rem; }
.mp-period { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mp-period-custom { display: flex; gap: .35rem; align-items: center; }
.mp-period-custom input[type=date] { width: 140px; }

/* Cards and tiles */
.mp-card { border: 1px solid var(--mp-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.mp-card > .card-header { background: #fff; border-bottom: 1px solid var(--mp-line); padding: .85rem 1.1rem; border-radius: 12px 12px 0 0; }
.mp-card-title { font-size: 1rem; font-weight: 600; margin: 0; }
.mp-subtitle { font-size: .85rem; font-weight: 600; color: var(--mp-muted); text-transform: uppercase; letter-spacing: .04em; }
.mp-kpi { display: block; background: #fff; border: 1px solid var(--mp-line); border-radius: 12px; padding: 1rem 1.1rem; height: 100%; color: inherit; }
a.mp-kpi:hover { text-decoration: none; border-color: #C9CFDB; }
.mp-kpi-label { color: var(--mp-muted); font-size: .82rem; display: flex; align-items: center; gap: .35rem; }
.mp-kpi-label i { color: var(--mp-brand); font-size: 1rem; }
.mp-kpi-value { font-size: 1.65rem; font-weight: 700; margin: .25rem 0; font-variant-numeric: tabular-nums; }
.mp-kpi-value small { font-size: .8rem; font-weight: 500; color: var(--mp-muted); }
.mp-kpi-foot { font-size: .78rem; color: var(--mp-muted); }
.mp-kpi-foot .text-success, .mp-kpi-foot .text-danger { font-weight: 600; }
.mp-mini { background: #fff; border: 1px solid var(--mp-line); border-radius: 10px; padding: .7rem .9rem; height: 100%; }
.mp-mini span { display: block; font-size: .78rem; color: var(--mp-muted); }
.mp-mini strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.mp-mini strong small { font-size: .75rem; font-weight: 400; color: var(--mp-muted); }
.mp-mini-warn { border-color: #F5C26B; background: #FFFBF2; }
.mp-stat-label { font-size: .78rem; color: var(--mp-muted); }
.mp-stat { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tables */
.mp-table { font-size: .875rem; }
.mp-table > thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mp-muted); font-weight: 600; background: #FAFBFD; border-bottom: 1px solid var(--mp-line); white-space: nowrap; padding: .65rem .9rem; }
.mp-table > tbody td, .mp-table > tfoot td { padding: .6rem .9rem; vertical-align: middle; border-color: var(--mp-line); font-variant-numeric: tabular-nums; }
.mp-table > tfoot td { background: #FAFBFD; }
.mp-row-link { cursor: pointer; }
.mp-row-link:hover > td { background: #F7F9FC; }
.mp-sortable th[data-sort] { cursor: pointer; user-select: none; }
.mp-sortable th[data-sort]::after { content: " ⇅"; opacity: .35; }
.mp-sortable th[data-dir=asc]::after { content: " ↑"; opacity: 1; }
.mp-sortable th[data-dir=desc]::after { content: " ↓"; opacity: 1; }
.mp-empty { color: var(--mp-muted); text-align: center; padding: 1.75rem 1rem !important; margin: 0; }
.mp-dl dt { font-weight: 500; color: var(--mp-muted); }
.mp-dl dd { margin-bottom: .55rem; }

/* Filters */
.mp-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; width: 100%; }
.mp-filters .form-select, .mp-filters input[type=search] { width: auto; min-width: 150px; max-width: 240px; }

/* Charts and bars */
.mp-chart { position: relative; height: 290px; }
.mp-bar-row { display: block; color: inherit; margin-bottom: .7rem; }
.mp-bar-row:hover { text-decoration: none; }
.mp-bar-row:hover .mp-bar span { background: #2B3870; }
.mp-bar { height: 8px; background: #EEF0F5; border-radius: 4px; margin-top: 4px; overflow: hidden; }
.mp-bar span { display: block; height: 100%; background: var(--mp-series); border-radius: 0 4px 4px 0; }
.mp-split { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; }
.mp-split-wallet { background: var(--mp-series); }
.mp-split-card { background: var(--mp-card-series); }
.mp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.mp-dot-wallet { background: var(--mp-series); }
.mp-dot-card { background: var(--mp-card-series); }

/* Buttons - the theme's "secondary" is orange; the panel uses neutral grey outlines. */
.btn-outline-secondary { --vz-btn-color: #4B5563; --vz-btn-border-color: #D1D5DB; --vz-btn-hover-color: #fff; --vz-btn-hover-bg: #1E2433;
    --vz-btn-hover-border-color: #1E2433; --vz-btn-active-color: #fff; --vz-btn-active-bg: #1E2433; --vz-btn-active-border-color: #1E2433;
    color: #4B5563; border-color: #D1D5DB; background: #fff; }
.btn-outline-secondary:hover, .btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary { color: #fff; background: #1E2433; border-color: #1E2433; }
.btn-dark { background: #1E2433; border-color: #1E2433; }
.btn-brand { background: var(--mp-brand); border-color: var(--mp-brand); color: #fff; font-weight: 600; }
.btn-brand:hover, .btn-brand:focus { background: var(--mp-brand-dark); border-color: var(--mp-brand-dark); color: #fff; }

/* Login */
.mp-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--mp-side); padding: 1rem; }
.mp-login-panel { display: flex; width: 100%; max-width: 920px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.mp-login-brand { flex: 1; background: linear-gradient(160deg, #1F2640 0%, #161B2E 100%); color: #C9CEDD; padding: 2.5rem; }
.mp-login-brand img { height: 40px; margin-bottom: 2rem; }
.mp-login-brand h1 { color: #fff; font-size: 1.6rem; font-weight: 700; }
.mp-login-brand ul { list-style: none; padding: 0; margin-top: 2rem; }
.mp-login-brand li { margin-bottom: .8rem; }
.mp-login-brand li i { color: var(--mp-brand); margin-right: .5rem; }
.mp-login-form { flex: 1; padding: 2.5rem; }
.mp-login-form h2 { font-size: 1.4rem; font-weight: 700; }
@media (max-width: 767.98px) { .mp-login-brand { display: none; } }

/* Print: just the content */
@media print {
    .mp-sidebar, .mp-topbar, .mp-footer, .mp-period, .mp-filters, .btn, .pagination, details summary { display: none !important; }
    .mp-main { margin: 0 !important; }
    .mp-content { padding: 0; }
    body { background: #fff; }
    .mp-card, .mp-kpi, .mp-mini { box-shadow: none; break-inside: avoid; }
}