/* DevExpress Blazing Berry theme (blazing-berry.bs5.min.css) includes Bootstrap 5  */
/* and all base styles. Only add app-specific overrides below.                      */

/* Per-layout background images */
.public-layout-bg {
    min-height: 100dvh;
    background-image: url('/logos/public-background.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.private-layout-bg {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(160deg, #faf8ff 0%, #f5fbff 50%, #f5fff8 100%);
    transition: padding-right 0.25s ease;
}

/* When the contextual Help side-panel is open, shrink the main layout horizontally
   so the panel sits beside the page content instead of overlaying it. Grids with
   MinWidth set on their stretchy columns will overflow this area and DevExpress
   will render its native horizontal scrollbar — no CSS overflow handling needed. */
.private-layout-bg.help-panel-shifted {
    padding-right: 480px;
}

/* Lock html/body scroll for private layout only — prevents outer browser scrollbar */
html:has(.private-layout-bg),
html:has(.private-layout-bg) body {
    overflow: hidden;
    height: 100%;
}

/* Blazor form validation — maps to Bootstrap .invalid-feedback color */
.validation-message {
    color: var(--bs-danger);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    display: block;
}

/* Accounts popup edit form — wider to accommodate address fields */
.accounts-edit-popup {
    min-width: 780px;
}

/* Channels popup edit form — wide enough for market info badges */
.channels-edit-popup {
    min-width: 750px;
}

/* Grid popup edit forms: Save/Cancel are always present — header close button is redundant.
   Multiple selectors required: DevExpress v23.2 may use different class names per version.
   !important required to override DevExpress theme specificity. */
[class*="-edit-popup"] .dxbl-popup-header-toolbar { display: none !important; }
[class*="-edit-popup"] .dxbl-popup-close-btn { display: none !important; }
[class*="-edit-popup"] .dxbl-popup-header-button { display: none !important; }
[class*="-edit-popup"] .dxbl-popup-header-btns { display: none !important; }
[class*="-edit-popup"] .dxbl-popup-header button { display: none !important; }

/* Products popup edit form — wider to fit pricing + dimensions fields */
.products-edit-popup {
    min-width: 780px;
}

/* Fulfillment Centers popup edit form — wider to accommodate address + config + capabilities */
.fulfillment-centers-edit-popup {
    min-width: 820px;
}

/* Alternate row style — uses Bootstrap gray from the active theme */
.alt-item > td:not(.dxbl-grid-empty-cell),
.alt-item > td:not(.dxbl-grid-indent-cell) {
    background-color: color-mix(in srgb, var(--bs-gray-300), transparent 50%);
}

/* Center-align badge pills within table cells (DxGrid cells and HTML tables).
   display:table shrink-wraps the badge to its content width; margin:auto centers it. */
td .badge {
    display: table;
    margin: 0 auto;
}

/* A badge that shares its grid cell with a command button (e.g. Purchase Failed + refresh).
   The badge and the button are both inline-level, so they sit side by side on their own — the ONLY thing
   that separated them was the `td .badge { display: table }` rule above (which centres a lone badge), so
   the badge opts out of it by carrying this class.

   Style the CONTENTS of a grid cell, never the cell or its column: setting `display` on the <td>, or a
   CssClass on a DxGridCommandColumn, collapses the column out of DevExpress's table layout — header and
   all. That is how the Actions column vanished from /channels/fulfillment-rates, taking the page's only
   per-row action with it. */
/* A badge + action button sharing one grid cell (e.g. Rates Ready + Refresh on /channels/fulfillment-rates).
   The pair lives in an inline-flex SPAN so it stays on one centred baseline and does not make its row taller
   than a badge-only row. It is a span INSIDE the cell — never style the <td> or its column (see below). */
.dq-cell-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
}

/* Opts the badge out of the `td .badge { display: table }` rule above, which would otherwise make it a block
   box and push the button onto its own line. */
.badge.dq-cell-badge {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

/* A command-style icon button living in a DATA column's cell (the Refresh above — its action lives in the
   Status column rather than a command column).

   DevExpress only renders an Outline button borderless inside a COMMAND column; in a data column it draws the
   border at rest, so the same button reads as a boxed control instead of a flat icon. This restores the
   command-column look — no border until hover — and trims the button's padding/min-height so a row carrying one
   is exactly as tall as a row that only carries a badge. */
.dxbl-btn.dq-cell-btn {
    border-color: transparent;
    background-color: transparent;
    padding: 0.125rem 0.25rem;
    min-height: 0;
    line-height: 1;
}

.dxbl-btn.dq-cell-btn:hover {
    border-color: currentColor;
    background-color: transparent;
}

/* Compact grid toolbar — overrides DevExpress theme padding/min-height variables */
.dxbl-grid {
    --dxbl-grid-toolbar-container-padding-y: 0.25rem;
    --dxbl-grid-toolbar-container-min-height: 2.25rem;
}

/* CSS-based password masking — keeps input as type="text" so the DOM element
   is never replaced on reveal toggle, preventing value loss in Blazor */
.text-masked input {
    -webkit-text-security: disc;
}

/* Font size preference — applied as a class on <html> by PrivateLayout.razor.js */
html.font-small  { font-size: 12px; }
html.font-medium { font-size: 14px; }
html.font-large  { font-size: 16px; }

/* Top-bar menu button — hover effect.
   Must live in app.css (global) not PrivateLayout.razor.css (scoped) because
   Blazor scoped CSS appends a scope attribute that DxButton does not forward to its
   rendered <button> element, so :hover pseudo-class selectors never match.
   .dxbl-btn is chained to beat DevExpress's own :hover specificity. */
.dxbl-btn.top-bar-logo-btn {
    padding: 5px;
    border-radius: 8px;
    transition: background-color 0.18s ease;
    cursor: pointer;
}

.dxbl-btn.top-bar-logo-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Per-platform badge colors — used in Platform CellDisplayTemplate across all grids */
.badge-platform-amazon      { background-color: #6f42c1; color: #fff; }
.badge-platform-beyond      { background-color: #20c997; color: #212529; }
.badge-platform-ebay        { background-color: #dc3545; color: #fff; }
.badge-platform-faire       { background-color: #d63384; color: #fff; }
.badge-platform-homeroot    { background-color: #fd7e14; color: #fff; }
.badge-platform-lowesmirakl { background-color: #0d6efd; color: #fff; }
.badge-platform-walmart     { background-color: #084298; color: #fff; }
.badge-platform-wayfair     { background-color: #0dcaf0; color: #212529; }
.badge-platform-keepa       { background-color: #b8860b; color: #fff; }

/* Business model badge colors — Markets.BusinessModel and Suppliers.BusinessModel */
.badge-bm-marketplace { background-color: #198754; color: #fff; }
.badge-bm-retail      { background-color: #0a58ca; color: #fff; }
.badge-bm-wholesale   { background-color: #6610f2; color: #fff; }
.badge-bm-commission  { background-color: #e67e22; color: #fff; }
.badge-bm-mixed       { background-color: #0dcaf0; color: #212529; }

/* ══════════════════════════════════════════════════════════════
   Dashboard — widget card system (dq-widget)
   ══════════════════════════════════════════════════════════════ */

/* Outer page grid — responsive columns, min 480px each */
.dq-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
    gap: 1.25rem;
    padding: 1rem;
    align-items: start;
}

/* Widget card shell */
.dq-widget {
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Widget header bar */
.dq-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--bs-gray-200);
    background: linear-gradient(90deg, #f5f3ff 0%, #ffffff 100%);
}

.dq-widget-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dq-widget-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.dq-widget-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-gray-800);
}

/* DevExpress "View All" link button inside header */
.dq-widget-link.dxbl-btn {
    font-size: 0.8rem;
    color: #7048b8;
    padding: 0;
}

.dq-widget-link.dxbl-btn:hover {
    text-decoration: underline;
}

/* Widget scrollable body */
.dq-widget-body {
    padding: 0.5rem 0;
    overflow-y: auto;
    max-height: 440px;
}

/* Account section header (GA/GM only) */
.dq-account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem 0.25rem;
    margin-top: 0.25rem;
}

.dq-account-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--bs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Connections table */
.dq-connections-table {
    margin-bottom: 0.25rem;
    table-layout: fixed;
}

.dq-connections-table td {
    vertical-align: middle;
    padding: 0.35rem 0.75rem;
    font-size: 0.825rem;
    border-bottom: 1px solid var(--bs-gray-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dq-connections-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--bs-gray-100), transparent 30%);
}

/* Column sizing hints */
.dq-col-status   { width: 80px; }
.dq-col-supplier { width: 30%; }
.dq-col-arrow    { width: 24px; text-align: center; color: var(--bs-gray-400); }
.dq-col-market   { width: 28%; }
.dq-col-platform { width: 110px; }
.dq-col-sync     { width: 90px; white-space: nowrap; }

/* Channel status badge */
.dq-status-badge {
    display: inline-block;
    padding: 0.2em 0.55em;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dq-status-active   { background-color: #d1e7dd; color: #0f5132; }
.dq-status-inactive { background-color: #f8d7da; color: #842029; }

/* Sync on/off pill labels */
.dq-sync {
    display: inline-block;
    padding: 0.15em 0.45em;
    border-radius: 0.25rem;
    font-size: 0.68rem;
    font-weight: 500;
    margin-right: 0.2rem;
}

.dq-sync-on  { background-color: #d1e7dd; color: #0f5132; }
.dq-sync-off { background-color: #f8f9fa; color: #6c757d; border: 1px solid var(--bs-gray-300); }

/* Empty state */
.dq-widget-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--bs-gray-500);
    font-size: 0.875rem;
    text-align: center;
}

.dq-widget-empty p {
    margin: 0;
}

.dq-empty-icon {
    width: 32px;
    height: 32px;
    opacity: 0.35;
}

/* Welcome card (GS / AS roles) */
.dq-welcome {
    margin: 1rem;
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.625rem;
    padding: 2.5rem;
    text-align: center;
    color: var(--bs-gray-600);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.dq-welcome h5 {
    color: var(--bs-gray-700);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Widget header — right-side action group (toggle + link) */
.dq-widget-header-right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Toggle buttons (Platforms / Suppliers) inside widget header */
.dq-widget-toggle.dxbl-btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.65rem;
    min-height: unset;
    height: auto;
}

/* Channel widget — platform × supplier matrix */
.dq-channel-matrix-wrap {
    overflow-x: auto;
    padding: 0.5rem 0.75rem;
}

.dq-channel-matrix {
    border-collapse: collapse;
    font-size: 0.78rem;
    width: 100%;
}

.dq-channel-matrix th,
.dq-channel-matrix td {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--bs-gray-200);
    text-align: center;
    white-space: nowrap;
}

.dq-cm-corner {
    background: var(--bs-gray-100);
}

.dq-cm-col-header {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--bs-gray-700);
    background: var(--bs-gray-50);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dq-cm-row-header {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 1;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.dq-cm-cell {
    font-size: 0.75rem;
    vertical-align: middle;
}

/* Cell: not fully listed */
.dq-cm-cell-incomplete { }

/* Cell: 100% listed */
.dq-cm-cell-complete { }

/* Listings count — same size, normal weight */
.dq-cm-listings {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--bs-gray-800);
}

/* Separator */
.dq-cm-sep {
    font-size: 0.9rem;
    color: var(--bs-gray-400);
    margin: 0 0.1rem;
}

/* Total products — same size, bold */
.dq-cm-total {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bs-gray-800);
}

/* Red listings when not fully converted */
.dq-cm-cell-incomplete .dq-cm-listings {
    color: #dc3545;
}

.dq-cm-cell-empty {
    color: var(--bs-gray-300);
}

.dq-cm-dash {
    font-size: 0.9rem;
}

/* DxPivotGrid channel widget — synced count cell values */
.dq-pivot-synced {
    font-size: 0.85rem;
    font-weight: 600;
}

.dq-pivot-complete {
    color: #198754;
}

.dq-pivot-partial {
    color: #fd7e14;
}

.dq-pivot-zero {
    color: #dc3545;
}

/* Platform badge inside DxPivotGrid header cells */
.dq-platform-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.dq-platform-link {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.dq-platform-link:hover {
    opacity: 0.82;
    text-decoration: underline;
}

/* Supplier header — Platforms tab (column): 3-line stacked, centered */
.dq-supplier-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    line-height: 1.3;
    text-align: center;
}

/* Supplier header — Suppliers tab (row): single-line inline */
.dq-sh-code {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6f42c1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dq-sh-sep {
    font-size: 0.75rem;
    color: var(--bs-gray-400);
}

.dq-sh-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: #0d6efd;
    white-space: nowrap;
}

.dq-sh-total {
    font-size: 0.75rem;
    font-weight: 700;
    color: #198754;
}

.field-required {
    color: #dc3545;
    font-weight: 600;
}

/* Toolbar page title — absolutely centered within the DxToolbar.
   fc-toolbar is added via CssClass on DxToolbar which applies to the outer .dxbl-toolbar element. */
.dxbl-toolbar.fc-toolbar {
    position: relative;
}
.toolbar-page-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    white-space: nowrap;
}

/* Market ID links — sky-blue on normal rows, light on focused (purple) rows.
   :visited forced to the same color so the link remains readable after being clicked. */
.market-id-link,
.market-id-link:visited {
    color: #0ea5e9;
    text-decoration: underline;
    text-decoration-color: #0ea5e9;
}

.market-id-link:hover {
    color: #0284c7;
    text-decoration-color: #0284c7;
}

/* Muted subtext (e.g. market/supplier code lines) on focused (purple) rows */
.dxbl-grid-focused-row .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

.dxbl-grid-focused-row .market-id-link,
.dxbl-grid-focused-row .market-id-link:visited {
    color: #bfdbfe !important;
    text-decoration-color: #bfdbfe !important;
}

.dxbl-grid-focused-row .market-id-link:hover {
    color: #fff !important;
    text-decoration-color: #fff !important;
}

/* Grid cell icon buttons on the focused (purple #7048b8) row.
   app-icon paints itself with `background-color: currentColor`, so an icon takes the button's theme colour —
   and Info blue / Success green / Warning amber all but disappear against the purple. Lighten each to its
   pastel tint so every icon stays legible AND keeps its own hue: the Packing Slip / Shipping Label / Bill of
   Lading trio must remain tellable apart on the selected row exactly as it is on an unselected one. */
.dxbl-grid-focused-row .dxbl-btn-outline-info,
.dxbl-grid-focused-row .dxbl-btn-info {
    color: #93c5fd !important;   /* blue-300  — Shipping Label */
}

.dxbl-grid-focused-row .dxbl-btn-outline-success,
.dxbl-grid-focused-row .dxbl-btn-success {
    color: #86efac !important;   /* green-300 — Packing Slip */
}

.dxbl-grid-focused-row .dxbl-btn-outline-warning,
.dxbl-grid-focused-row .dxbl-btn-warning {
    color: #fcd34d !important;   /* amber-300 — Bill of Lading */
}

.dxbl-grid-focused-row .dxbl-btn-outline-danger,
.dxbl-grid-focused-row .dxbl-btn-danger {
    color: #fca5a5 !important;   /* red-300 */
}

.dxbl-grid-focused-row .dxbl-btn-outline-secondary,
.dxbl-grid-focused-row .dxbl-btn-secondary {
    color: #e2e8f0 !important;   /* slate-200 */
}

/* Hover on the focused row: go full white with a visible outline, so the button still reads as interactive. */
.dxbl-grid-focused-row .dxbl-btn:hover {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   Market Landing Pages — Orders Analytics Card
   ══════════════════════════════════════════════════════════════ */

/* Orders analytics card shell */
.dq-orders-card {
    background: #fff;
    overflow: hidden;
}

/* Card header row: metric selector left, period buttons right */
.dq-orders-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--bs-gray-200);
    background: linear-gradient(90deg, #f5f3ff 0%, #ffffff 100%);
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Period button group — plain Bootstrap group using DxButton */
.dq-period-group {
    display: flex;
    gap: 0.25rem;
}

/* Period button active state — override via CSS class on the DxButton wrapper div */
.dq-period-active .dxbl-btn {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: #fff !important;
}

/* KPI summary row */
.dq-orders-kpi {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--bs-gray-100);
    flex-wrap: wrap;
}

.dq-kpi-block {
    flex: 1;
    min-width: 140px;
    padding: 0.25rem 1rem;
}

.dq-kpi-block + .dq-kpi-block {
    border-left: 1px solid var(--bs-gray-200);
}

.dq-kpi-label {
    font-size: 0.75rem;
    color: var(--bs-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.dq-kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bs-gray-900);
    line-height: 1.1;
}

.dq-kpi-sub {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    margin-top: 0.1rem;
}

.dq-kpi-delta-up {
    color: #198754;
    font-weight: 600;
    font-size: 0.9rem;
}

.dq-kpi-delta-down {
    color: #dc3545;
    font-weight: 600;
    font-size: 0.9rem;
}

.dq-kpi-delta-neutral {
    color: var(--bs-gray-500);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Chart area */
.dq-orders-chart {
    padding: 1rem 1.25rem 0.5rem;
    overflow-x: auto;
}

/* SVG bar chart: bars */
.dq-bar-current {
    fill: #6f42c1;
    transition: opacity 0.15s;
}

.dq-bar-current:hover {
    opacity: 0.8;
}

/* Chart x-axis labels */
.dq-chart-label {
    font-size: 10px;
    fill: #6c757d;
    font-family: inherit;
}

/* Chart value labels above bars */
.dq-chart-value {
    font-size: 10px;
    fill: #495057;
    font-family: inherit;
    font-weight: 600;
}

/* Sales trend chart tooltip */
.dq-chart-tooltip {
    padding: 4px 8px;
}

.dq-chart-tooltip-series {
    color: #6c757d;
    margin-bottom: 2px;
}

.dq-chart-tooltip-value {
    font-weight: 600;
}

/* Chart baseline */
.dq-chart-baseline {
    stroke: var(--bs-gray-300);
    stroke-width: 1;
}

/* No-data placeholder */
.dq-orders-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    color: var(--bs-gray-400);
    font-size: 0.875rem;
}

/* Compact stats table used on the Amazon stats page */
.dq-stats-table th {
    font-weight: 600;
    color: var(--bs-gray-700);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--bs-gray-200);
}

.dq-stats-table td {
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-gray-100);
}

/* Stacked horizontal bar (status / coverage breakdown) */
.dq-stacked-bar {
    display: flex;
    width: 100%;
    height: 10px;
    background: var(--bs-gray-100);
    border-radius: 6px;
    overflow: hidden;
}

.dq-stacked-bar-seg {
    height: 100%;
    transition: width 0.2s;
}

/* Account selector bar — shown above tabs for GA/GM/GS */
.dq-orders-account-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem 0.75rem;
}

.dq-orders-account-label {
    font-weight: 600;
    color: var(--bs-gray-700);
    font-size: 0.9rem;
}

.dq-orders-account-select {
    width: 360px;
    max-width: 100%;
}

.dq-orders-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-gray-500);
    font-size: 0.95rem;
    border: 1px dashed var(--bs-gray-300);
    border-radius: 0.5rem;
    background: var(--bs-gray-50, #fafafa);
}

.dq-orders-tabs {
    margin-top: 0.25rem;
}

/* Stretch tab items to fill full width equally.
   DxTabs may render the ul directly under tablist, or wrapped in a scroll-viewer — cover both. */
.dq-dashboard-tabs .dxbl-tabs-tablist {
    width: 100%;
}

.dq-dashboard-tabs .dxbl-tabs-tablist .dxbl-scroll-viewer,
.dq-dashboard-tabs .dxbl-tabs-tablist .dxbl-scroll-viewer-content {
    width: 100%;
}

.dq-dashboard-tabs .dxbl-tabs-tablist ul {
    display: flex !important;
    width: 100%;
}

.dq-dashboard-tabs .dxbl-tabs-tablist ul > li {
    flex: 1;
}

.dq-dashboard-tabs .dxbl-tabs-tablist ul > li > .dxbl-tabs-item {
    width: 100%;
    justify-content: center;
}

/* ── Parent tabs (Orders / Supply Chain) — bold, full-width ── */
.dq-dashboard-tabs .dxbl-tabs-tablist ul > li > .dxbl-tabs-item {
    font-weight: 600;
    font-size: 0.9rem;
}

/* ── Child tabs (Trend / Breakdown) — compact, left-aligned ── */
.dq-orders-tabs .dxbl-tabs-tablist ul {
    width: auto !important;
}

.dq-orders-tabs .dxbl-tabs-tablist ul > li {
    flex: 0 0 auto !important;
}

.dq-orders-tabs .dxbl-tabs-tablist ul > li > .dxbl-tabs-item {
    width: auto !important;
    font-size: 0.82rem;
}

/* Trend / Breakdown shared controls row (Group by, Filters, Row dim, Col dim) */
.dq-orders-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--bs-gray-100);
    background: #fbfbfd;
}

.dq-control {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 180px;
    flex: 1 1 200px;
}

.dq-control-label {
    font-size: 0.7rem;
    color: var(--bs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.dq-control-input {
    width: 100%;
}

/* DxChart wrapper — gives it a sensible default height */
.dq-orders-chart-wrap {
    padding: 1rem 1.25rem 0.5rem;
}

.dq-trend-chart {
    height: 360px;
}

/* Breakdown matrix (plain HTML table) */
.dq-breakdown-wrap {
    padding: 0.75rem 1.25rem 1rem;
    overflow-x: auto;
}

.dq-breakdown-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.dq-breakdown-table th,
.dq-breakdown-table td {
    border-bottom: 1px solid var(--bs-gray-200);
    border-right: 1px solid var(--bs-gray-200);
    padding: 0.5rem 0.75rem;
    text-align: right;
    vertical-align: middle;
    background: #fff;
}

.dq-breakdown-table thead th {
    background: linear-gradient(90deg, #f5f3ff 0%, #ffffff 100%);
    font-weight: 600;
    color: var(--bs-gray-800);
    border-top: 1px solid var(--bs-gray-200);
    text-align: center;
    white-space: nowrap;
}

.dq-breakdown-table .dq-bd-corner,
.dq-breakdown-table .dq-bd-row {
    text-align: left;
    font-weight: 600;
    color: var(--bs-gray-700);
    background: #fafafa;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
}

.dq-breakdown-table .dq-bd-cell {
    min-width: 110px;
}

.dq-breakdown-table .dq-bd-total {
    background: #f3effd;
    font-weight: 700;
}

.dq-breakdown-table .dq-bd-total-row td,
.dq-breakdown-table .dq-bd-total-row th {
    background: #f3effd;
    font-weight: 700;
    border-top: 2px solid var(--bs-gray-300);
}

.dq-bd-current {
    font-weight: 600;
    color: var(--bs-gray-900);
    line-height: 1.1;
}

.dq-bd-delta-up {
    font-size: 0.75rem;
    color: #198754;
    font-weight: 600;
    margin-top: 0.1rem;
}

.dq-bd-delta-down {
    font-size: 0.75rem;
    color: #dc3545;
    font-weight: 600;
    margin-top: 0.1rem;
}

.dq-bd-delta-neutral {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    font-weight: 600;
    margin-top: 0.1rem;
}

/* ── Contextual help panel content (used in HelpPanel + /help/* route) ── */
.help-content h5 {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.4rem;
}

.help-content .help-steps {
    list-style: none;
    counter-reset: help-step-counter;
    padding-left: 0;
    margin-bottom: 1rem;
}

.help-content .help-step {
    counter-increment: help-step-counter;
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.6rem;
    background: #ffffff;
}

.help-content .help-step-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.help-content .help-step-icon,
.help-content .help-step-number {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.help-content .help-step-number {
    background: #1e88bb;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
}

.help-content .help-tip {
    margin-top: 0.4rem;
    padding: 0.35rem 0.55rem;
    background: #f0f9ff;
    border-left: 3px solid #38bdf8;
    border-radius: 0.25rem;
    color: #0c4a6e;
}

.help-content ul,
.help-content ol {
    padding-left: 1.25rem;
}

.help-page-container {
    max-width: 820px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

/* ── Global help (/help/global) — extends .help-content with browse-style cards ── */
.help-content .help-global-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4a2a8a;
    font-weight: 700;
    border-bottom: 2px solid #ede8ff;
    padding-bottom: 0.45rem;
    margin-bottom: 1rem;
}

.help-content .topbar-replica {
    background: linear-gradient(135deg, #f0c8ff 0%, #aa66dd 12%, #2244aa 28%, #1e88bb 50%, #1a6040 75%, #99eebb 100%);
    border-radius: 10px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    margin: 0.5rem 0 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.help-content .tb-logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 26px;
    background: rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-weight: 900;
    flex-shrink: 0;
}

.help-content .tb-title-area {
    flex: 1;
    text-align: center;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
}

.help-content .tb-icon-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-content .tb-icon-btn .app-icon {
    width: 18px;
    height: 18px;
}

.help-content .icon-white {
    color: #fff;
}

.help-content .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}

.help-content .icon-row {
    background: #fff;
    border: 1px solid #ddd6f8;
    border-radius: 9px;
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.help-content .icon-swatch {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-content .icon-swatch .app-icon {
    width: 18px;
    height: 18px;
}

.help-content .icon-info strong {
    display: block;
}

.help-content .icon-info span {
    color: #6b6b6b;
}

.help-content .nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.7rem;
    margin: 0.75rem 0 1rem;
}

.help-content .nav-card {
    background: #fff;
    border: 1px solid #ddd6f8;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.help-content .nav-icon-wrap {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: #f5f0ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.help-content .nav-icon-wrap .app-icon {
    width: 18px;
    height: 18px;
}

.help-content .nav-card h4 {
    color: #4a2a8a;
    font-weight: 700;
    margin-bottom: 0.18rem;
}

.help-content .nav-card p {
    color: #6b6b6b;
    margin: 0;
    line-height: 1.5;
}

.help-content .tip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin: 0.75rem 0 1rem;
}

.help-content .tip-card {
    background: #fff;
    border: 1px solid #ddd6f8;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.help-content .tip-card h4 {
    color: #4a2a8a;
    font-weight: 700;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.help-content .tip-card p {
    color: #6b6b6b;
    margin: 0;
}


/* Channels → Listings → B2C Offers / B2B Offers tabs */
.offers-section-title {
    font-weight: 600;
    color: #4a2a8a;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.offers-chart-wrap {
    height: 320px;
    width: 100%;
}

.offers-chart {
    height: 100%;
    width: 100%;
}