/* Internal console only: leave customer and partner brand themes intact. */
.console-ui { background-image: none; }
.console-ui .app-sidebar { background-image: none; }
.console-ui .btn-primary, .console-ui .btn-grad, .console-ui .guide-launcher,
.console-ui .nav-item.active { background: var(--accent); box-shadow: none; }
.console-ui .card { box-shadow: none !important; backdrop-filter: none; }
.console-ui .card::before, .console-ui .kpi::before { display: none; }
.console-ui .brand-mark, .console-ui .user-avatar { box-shadow: none; }
.console-ui .kpi:hover, .console-ui .card.lift:hover { transform: none; }
.console-ui .kpi-label { overflow-wrap: anywhere; word-break: normal; }
:root:not([data-theme="dark"]) .console-ui .text-warning { color: #865500 !important; }
:root:not([data-theme="dark"]) .console-ui .text-info { color: #086879 !important; }
.console-ui .topbar { display: none; }
.console-ui .page { padding-top: 28px; }
.console-ui .page > .d-flex:first-child { flex-wrap: wrap; gap: 12px; }
html:not(.nav-pinned.nav-open) .console-ui .topbar { display: flex; min-height: 56px; }
.console-ui .nav-folder { margin: 2px 0; }
.console-ui .nav-folder > summary { padding: 10px 12px; color: var(--sidebar-ink); font-weight: 600; cursor: pointer; border-radius: 8px; }
.console-ui .nav-folder > summary:hover { background: rgba(255,255,255,.08); }
.console-ui .nav-folder .nav-item { margin-left: 16px; padding: 7px 12px; font-size: .85rem; }
.console-ui .nav-settings { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.console-ui .sidebar-nav { padding-top: 6px; }
.console-ui .sidebar-tools { padding: 8px 18px 0; }
.console-ui .sidebar-head { padding-bottom: 8px; }
.console-ui .app-scope { padding-bottom: 6px; }
.console-ui .store-sync { padding: 8px 24px 16px; margin-top: 0; gap: 6px; }
.console-ui .store-sync-btn { width: auto; max-width: 100%; min-height: 32px; padding: 5px 10px; gap: 6px; border-radius: 8px; font-size: .75rem; }
.console-ui .store-sync-icon { width: 13px; height: 13px; }
.console-ui .nav-folder > summary, .console-ui .sidebar-nav > .nav-item { padding: 6px 12px; line-height: 20px; }
.console-ui .nav-folder .nav-item { padding: 4px 12px; line-height: 20px; }
.console-ui .sidebar-foot { padding: 10px 18px; }
.console-ui .sidebar-user { padding: 6px 12px; }
.sidebar-help { padding: 6px 12px; border-top: 1px solid var(--line); }
.section-navigation { margin-bottom: 24px; }
.section-navigation-label { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.section-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); padding: 2px 2px 0; }
.section-tab { flex: 0 0 auto; padding: 10px 14px; color: var(--muted); font-size: .9rem; font-weight: 600; border-bottom: 3px solid transparent; text-decoration: none; }
.section-tab:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.section-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.section-tab:focus-visible, .sidebar-help a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.console-ui .sidebar-nav > .nav-item { padding: 10px 12px; margin: 3px 0; }
.console-ui .metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin-left: 0; margin-right: 0; }
.console-ui .metric-grid.metric-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.console-ui .metric-grid.metric-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.console-ui .metric-grid > div { width: auto; min-width: 0; padding: 0; margin-top: 0; }
.console-ui .metric-grid .card { height: 100%; }
.console-ui .metric-grid .card-body { display: flex; flex-direction: column; gap: 6px; }
.console-ui .metric-grid .kpi-label { min-height: 2lh; }
.console-ui .metric-grid .kpi-value { margin-top: auto; overflow-wrap: anywhere; }
.console-ui .row > [class*="col-"] > .card.kpi { height: 100%; }
@media (max-width: 1100px) { .console-ui .metric-grid, .console-ui .metric-grid.metric-grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .console-ui .metric-grid, .console-ui .metric-grid.metric-grid-four, .console-ui .metric-grid.metric-grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.console-ui summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.console-ui .offers-table { width: 100%; table-layout: fixed; }
.console-ui .offers-table th, .console-ui .offers-table td { white-space: normal; overflow-wrap: anywhere; }
.console-ui .offers-table th:first-child { width: 30%; }
.console-ui .offers-table th:nth-child(2) { width: 11%; }
.console-ui .offers-table th:nth-child(3) { width: 13%; }
.console-ui .offers-table th:last-child { width: 12%; }
.console-ui .offers-table .badge { white-space: normal; text-align: left; line-height: 1.35; }
.console-ui .offers-table td { padding: 14px 12px; }
.console-ui .offer-meta { margin-top: 5px; color: var(--muted); font-size: .8rem; }
.console-ui .offer-actions summary { cursor: pointer; color: var(--accent); }
.console-ui .offer-actions a { display: block; padding: 8px 0; }
.console-ui .attention-list > div { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.console-ui [hidden] { display: none !important; }
.console-ui .guide-step summary { cursor: pointer; display: list-item; }
.console-ui .guide-step-text { margin-top: 8px; }
.console-ui .guide-launcher.is-new { animation: none; }
.console-ui .guide-panel { width: min(340px, calc(100vw - 36px)); }
@media (min-width: 1100px) { html.guide-open:not(.nav-pinned.nav-open) .console-ui .app-content { padding-right: 364px; } }
@media (min-width: 1380px) { html.guide-open .console-ui .app-content { padding-right: 364px; } }
@media (max-width: 767px) {
    .console-ui .topbar { display: flex; }
    .console-ui .offers-table thead { display: none; }
    .console-ui .offers-table, .console-ui .offers-table tbody, .console-ui .offers-table tr, .console-ui .offers-table td { display: block; width: 100%; }
    .console-ui .offers-table tr { border-bottom: 2px solid var(--line); padding: 8px 0; }
    .console-ui .offers-table td { border: 0; text-align: left !important; padding: 6px 14px; }
    .console-ui .offers-table td[data-label]::before { content: attr(data-label) ': '; font-weight: 600; }
}

/* ===========================================================================
   Soft console skin — airy light dashboard: pale blue canvas, floating white
   sidebar, borderless white cards with diffuse shadows, one confident blue.
   Layout rules apply to both themes; the palette only to light, so the dark
   console keeps its black-and-blue look.
   =========================================================================== */
.console-ui { font-family: 'Poppins', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; }
.console-ui h1, .console-ui .h3 { font-weight: 700; letter-spacing: -.01em; }
.console-ui h2, .console-ui h3, .console-ui .h5 { font-weight: 600; letter-spacing: 0; }

/* Floating sidebar panel. Its right edge still lands on --sidebar-w, so the pinned
   content offset in site.css keeps working untouched. */
.console-ui .app-sidebar {
    inset: 16px auto 16px 16px;
    width: calc(var(--sidebar-w) - 16px);
    border-radius: 22px;
    border: 1px solid var(--sidebar-line);
    transform: translateX(calc(-100% - 32px));
}
html.nav-open .console-ui .app-sidebar { transform: translateX(0); }
.console-ui .page { padding: 32px 32px 8px; }

/* Card surfaces: bigger radius, roomier bodies, title-case headings. */
.console-ui .card { border-radius: 20px; }
.console-ui .card .card-body { padding: 22px 24px; }
.console-ui h2.h6.text-muted { font-size: 1rem !important; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink) !important; }
.console-ui .kpi-label { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; }
.console-ui .kpi-value { font-weight: 700; letter-spacing: -.01em; }
.console-ui .btn { border-radius: 10px; font-weight: 500; letter-spacing: 0; }
.console-ui .badge { font-weight: 500; border-radius: 8px; padding: .45em .8em; }
.console-ui .table > thead th { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; }

/* Active nav item: blue text with a bar on the panel's edge instead of a filled pill. */
.console-ui .nav-item { font-weight: 500; }
.console-ui .nav-item.active { font-weight: 600; }
.console-ui .nav-item.active::before { left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sidebar-accent); }
/* Dark rail: white on the bright dark-mode accent (#60a5fa) is ~2.5:1, so tint the row instead. */
:root[data-theme="dark"] .console-ui .nav-item.active { background: var(--sidebar-accent-soft); color: #fff; }

/* ------------------------------------------------------------ Light palette */
:root:not([data-theme="dark"]) .console-ui {
    --accent: #1f6fd6;
    --accent-600: #1859b4;
    --grad: linear-gradient(120deg, #3b8af0, #1f6fd6);
    --grad-soft: linear-gradient(120deg, #f3f7fe, #eef4fd);
    --ink: #1d2433;
    --ink-soft: #4b5566;
    --muted: #7d879b;
    --line: #e7edf6;
    --bg: #edf2fa;
    --card: #ffffff;
    --card-2: #f6f9fe;
    --card-border: transparent;
    --input-bg: #f6f9fe;
    --topbar-bg: color-mix(in srgb, #edf2fa 88%, transparent);

    --sidebar-bg: #ffffff;
    --sidebar-ink: #6f7a90;
    --sidebar-ink-dim: #98a2b6;
    --sidebar-accent: #1f6fd6;
    --sidebar-line: #e7edf6;
    --sidebar-control-bg: #f6f9fe;

    --shadow-sm: 0 6px 22px rgba(40, 80, 150, .06);
    --shadow: 0 10px 32px rgba(40, 80, 150, .08);
    --shadow-lg: 0 16px 44px rgba(40, 80, 150, .12);
    background-color: var(--bg);
}
:root:not([data-theme="dark"]) .console-ui .app-sidebar { box-shadow: var(--shadow); }
:root:not([data-theme="dark"]) .console-ui .card,
:root:not([data-theme="dark"]) .console-ui .card.shadow-sm { border-color: transparent; box-shadow: var(--shadow-sm) !important; }
:root:not([data-theme="dark"]) .console-ui .card .card { box-shadow: none !important; border: 1px solid var(--line); }

/* Sidebar text that site.css hard-codes white for the dark rail. */
:root:not([data-theme="dark"]) .console-ui .brand,
:root:not([data-theme="dark"]) .console-ui .brand:hover { color: var(--ink); }
:root:not([data-theme="dark"]) .console-ui .brand-text strong { color: var(--accent); }
:root:not([data-theme="dark"]) .console-ui .nav-section,
:root:not([data-theme="dark"]) .console-ui .nav-group-title { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 600; }
:root:not([data-theme="dark"]) .console-ui .nav-item:hover,
:root:not([data-theme="dark"]) .console-ui .nav-folder > summary:hover { background: #f3f7fe; color: var(--accent); }
:root:not([data-theme="dark"]) .console-ui .nav-item.active { background: transparent; color: var(--accent); }
:root:not([data-theme="dark"]) .console-ui .nav-sub.active::after { background: var(--accent); }
:root:not([data-theme="dark"]) .console-ui .user-name { color: var(--ink); }
:root:not([data-theme="dark"]) .console-ui .sidebar-user-button:hover,
:root:not([data-theme="dark"]) .console-ui .sidebar-user-button[aria-expanded="true"] { color: var(--ink); background: #f3f7fe; border-color: var(--line); }
:root:not([data-theme="dark"]) .console-ui .user-avatar { background: #e6effc; color: var(--accent); }
:root:not([data-theme="dark"]) .console-ui .pin-btn:hover { color: var(--accent); background: #f3f7fe; }
:root:not([data-theme="dark"]) .console-ui .hamburger-sidebar { background: #f6f9fe; border-color: var(--line); }
:root:not([data-theme="dark"]) .console-ui .hamburger-sidebar .menu-line { stroke: var(--ink); }
:root:not([data-theme="dark"]) .console-ui .hamburger-sidebar:hover { background: #eef4fd; border-color: var(--line); }
:root:not([data-theme="dark"]) .console-ui .app-scope-select,
:root:not([data-theme="dark"]) .console-ui .store-sync-btn { color: var(--ink); border-color: var(--line); }
:root:not([data-theme="dark"]) .console-ui .app-scope-select:hover,
:root:not([data-theme="dark"]) .console-ui .store-sync-btn:hover { background: #eef4fd; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
:root:not([data-theme="dark"]) .console-ui .store-sync-last:hover { color: var(--accent); }
:root:not([data-theme="dark"]) .console-ui .store-sync-last.is-partial { color: #9a5b00; }
:root:not([data-theme="dark"]) .console-ui .store-sync-last.is-failed { color: #c62f45; }
:root:not([data-theme="dark"]) .console-ui .env-dot { box-shadow: 0 0 0 3px rgba(52,211,153,.2); }

/* Content controls. */
:root:not([data-theme="dark"]) .console-ui .btn-primary,
:root:not([data-theme="dark"]) .console-ui .btn-grad { background: var(--accent); box-shadow: 0 6px 16px rgba(31, 111, 214, .24); }
:root:not([data-theme="dark"]) .console-ui .btn-primary:hover,
:root:not([data-theme="dark"]) .console-ui .btn-grad:hover { background: var(--accent-600); box-shadow: 0 8px 20px rgba(31, 111, 214, .3); transform: none; filter: none; }
:root:not([data-theme="dark"]) .console-ui .btn-outline-secondary { background: #fff; border-color: var(--line); }
:root:not([data-theme="dark"]) .console-ui .form-control,
:root:not([data-theme="dark"]) .console-ui .form-select { border-color: #e3eaf5; }
:root:not([data-theme="dark"]) .console-ui .form-control:focus,
:root:not([data-theme="dark"]) .console-ui .form-select:focus { background-color: #fff; }
:root:not([data-theme="dark"]) .console-ui .table-hover > tbody > tr:hover > * { background: #f5f8fe; }
:root:not([data-theme="dark"]) .console-ui .table-light,
:root:not([data-theme="dark"]) .console-ui .table > thead.table-light { --bs-table-bg: #fff; }
:root:not([data-theme="dark"]) .console-ui .bg-success { background: #e3f6ee !important; color: #13784e !important; }
:root:not([data-theme="dark"]) .console-ui .bg-primary { background: #e6effc !important; color: var(--accent-600) !important; }
:root:not([data-theme="dark"]) .console-ui .bg-warning { background: #fdf1dc !important; color: #9a5b00 !important; }
