/* MUNNS RUIXI enterprise admin UI v3
   Visual and interaction layer only: no field, data or workflow changes. */
:root {
    --eui-bg: #f5f7fa;
    --eui-surface: #ffffff;
    --eui-surface-subtle: #f8fafc;
    --eui-text: #0f172a;
    --eui-text-2: #475569;
    --eui-muted: #64748b;
    --eui-faint: #94a3b8;
    --eui-line: #e2e8f0;
    --eui-line-strong: #cbd5e1;
    --eui-primary: #2563eb;
    --eui-primary-hover: #1d4ed8;
    --eui-primary-soft: #eff6ff;
    --eui-success: #15803d;
    --eui-success-soft: #f0fdf4;
    --eui-warning: #b45309;
    --eui-warning-soft: #fff7ed;
    --eui-danger: #dc2626;
    --eui-danger-soft: #fef2f2;
    --eui-radius: 10px;
    --eui-radius-control: 8px;
    --eui-shadow-float: 0 12px 32px rgba(15, 23, 42, .12);
    --eui-focus: 0 0 0 3px rgba(37, 99, 235, .18);
    --eui-topbar: 64px;
}

/* Influencer library: keep the advanced filter as a full-width second row.
   main.js adds `.unified-filter-bar` to GET filters, so this override must
   explicitly restore the form's grid layout instead of letting its children
   become flex items. */
body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
}

body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-filter-primary {
    display: grid !important;
    grid-template-columns: minmax(240px, 1.55fr) repeat(4, minmax(130px, 1fr)) auto auto !important;
    align-items: end !important;
    gap: 10px !important;
    width: 100%;
}

body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-more-filter {
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid #e5ebf3;
}

body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-more-filter summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 4px;
    font-weight: 700;
}

body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-more-filter[open] summary {
    margin-bottom: 10px;
}

body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-filter-more-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
    padding: 12px;
    border: 1px solid #dce6f2;
    border-radius: 8px;
    background: #f8fbff;
}

body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-filter-more-grid label {
    min-width: 0 !important;
}

@media (max-width: 1200px) {
    body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-filter-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-filter-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-filter-primary,
    body:has(.influencer-page-v2) .asset-filter-panel.unified-filter-bar .asset-filter-more-grid {
        grid-template-columns: 1fr !important;
    }
}

/* P0: shared searchable product picker */
.product-picker { position: relative; display: grid; gap: 10px; }
.product-picker-search { display: grid; gap: 6px; }
.product-picker-search > span { color: var(--text-secondary, #53657d); font-size: 13px; font-weight: 600; }
.product-picker-results { position: absolute; z-index: 30; top: 70px; left: 0; right: 0; max-height: 320px; overflow: auto; padding: 6px; border: 1px solid #d8e0eb; border-radius: 10px; background: #fff; box-shadow: 0 16px 40px rgba(25, 45, 75, .16); }
.product-picker-result { width: 100%; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #17243a; text-align: left; cursor: pointer; }
.product-picker-result:hover, .product-picker-result:focus-visible { background: #eef5ff; outline: none; }
.product-picker-result span, .product-picker-selection-copy span { color: #6a788d; font-size: 12px; }
.product-picker-result-image { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; color: #8a98aa; background: #f0f3f7; border-radius: 7px; font-size: 10px; }
.product-picker-result-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #f7f8fa; }
.product-picker-result-copy { display: grid; min-width: 0; gap: 3px; }.product-picker-result-copy strong, .product-picker-result-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-picker-message { padding: 16px; color: #6a788d; text-align: center; }
.product-picker-message.is-error { color: #ba2d3b; }
.product-picker-selected { display: grid; gap: 8px; }
.product-picker-selection, .product-picker-multi-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(190px, 1.2fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid #cfe0f8; border-radius: 10px; background: #f7fbff; }
.product-picker-multi-row { grid-template-columns: minmax(160px, 1.3fr) minmax(180px, 1.3fr) 88px minmax(120px, 1fr) auto; }
.product-picker-multi-row.product-picker-allocation-row { grid-template-columns:minmax(220px,1fr) minmax(480px,2fr) auto; }
.product-picker-allocation { display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:10px; }
.product-picker-allocation label { display:grid;gap:5px;color:#53657d;font-size:12px;font-weight:600; }
.product-picker-allocation input { min-width:0;width:100%; }
.product-picker-selection-copy { display: grid; gap: 3px; min-width: 0; }
.product-picker-remove { border: 0; background: transparent; color: #ba2d3b; cursor: pointer; }
@media (max-width: 900px) {
  .product-picker-selection, .product-picker-multi-row { grid-template-columns: 1fr; }
}

html,
body {
    background: var(--eui-bg) !important;
    color: var(--eui-text);
    font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
    text-rendering: optimizeLegibility;
}

body:not(.login-page),
body:not(.login-page) .page,
body:not(.login-page) .stitch-main,
body:not(.login-page) .stitch-scroll {
    background: var(--eui-bg) !important;
}

button,
input,
select,
textarea {
    font-family: inherit !important;
}

input,
select,
textarea,
button,
a {
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease;
}

:where(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--eui-primary) !important;
    outline-offset: 2px;
    box-shadow: var(--eui-focus);
}

:where(button, input, select, textarea):disabled,
.disabled,
[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: .5;
}

::selection {
    background: #bfdbfe;
    color: #172554;
}

/* Global shell: quiet surfaces and reliable navigation context. */
.sidebar,
.side-user,
.side-brand,
.app-topbar,
.topbar {
    background: var(--eui-surface) !important;
}

.sidebar {
    border-right-color: var(--eui-line) !important;
}

.side-nav a {
    min-height: 38px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.side-nav a.active {
    background: var(--eui-primary) !important;
    box-shadow: none !important;
    font-weight: 650 !important;
}

.nav-group {
    color: var(--eui-faint) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}

.app-topbar,
.topbar {
    border-bottom-color: var(--eui-line) !important;
}

.app-search,
.top-search {
    background: var(--eui-surface-subtle) !important;
    border-color: var(--eui-line) !important;
}

/* Shared typography. */
:where(.kol-topbar, .asset-topbar, .pt-head, .ship-title-line, .settle-header,
       .pa-header, .pf-header, .materials-titlebar, .page-heading, .ops-head,
       .mgmt-head, .bc-head, .ct-page-head, .mrf-head) h1 {
    color: var(--eui-text) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: -.02em !important;
}

:where(.kol-topbar, .asset-topbar, .pt-head, .ship-title-line, .settle-header,
       .pa-header, .pf-header, .materials-titlebar, .page-heading, .ops-head,
       .mgmt-head, .bc-head, .ct-page-head, .mrf-head) p,
.meta-line,
.cell-sub,
.helper-text {
    color: var(--eui-muted) !important;
}

:where(.card-heading, .section-head, .ship-section-head, .pf-card-head,
       .bc-card-head, .template-library-head) h2,
:where(.ops-card, .mgmt-card, .bc-card, .pt-card, .settle-card) > h2 {
    color: var(--eui-text) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
}

/* Controls: one hierarchy, one rhythm. */
:where(.kol-primary-btn, .asset-primary-btn, .pt-btn.primary, .ship-primary-btn,
       .primary-action, .pa-btn.primary, .pf-btn.primary, .ops-primary,
       .mgmt-button.primary, .bc-primary, .ct-primary, .primary) {
    background: var(--eui-primary) !important;
    border-color: var(--eui-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

:where(.kol-primary-btn, .asset-primary-btn, .pt-btn.primary, .ship-primary-btn,
       .primary-action, .pa-btn.primary, .pf-btn.primary, .ops-primary,
       .mgmt-button.primary, .bc-primary, .ct-primary, .primary):hover {
    background: var(--eui-primary-hover) !important;
    border-color: var(--eui-primary-hover) !important;
}

:where(.kol-primary-btn, .kol-ghost-btn, .asset-primary-btn, .asset-light-btn,
       .pt-btn, .ship-primary-btn, .ship-ghost-btn, .primary-action, .ghost-action,
       .pa-btn, .pf-btn, .ops-primary, .ops-secondary, .mgmt-button, .bc-primary,
       .bc-secondary, .ct-primary, .ct-secondary) {
    align-items: center;
    border-radius: var(--eui-radius-control) !important;
    display: inline-flex;
    font-size: 13px !important;
    font-weight: 650 !important;
    justify-content: center;
    min-height: 36px !important;
    padding: 8px 13px !important;
    white-space: nowrap;
}

:where(.kol-ghost-btn, .asset-light-btn, .pt-btn.ghost, .ship-ghost-btn,
       .ghost-action, .pa-btn.outline, .pf-btn.ghost, .ops-secondary,
       .mgmt-button.secondary, .bc-secondary, .ct-secondary) {
    background: var(--eui-surface) !important;
    border-color: var(--eui-line-strong) !important;
    color: var(--eui-text-2) !important;
    box-shadow: none !important;
}

:where(.danger, .mgmt-button.danger, .ops-secondary.danger, .mini-button.danger) {
    color: var(--eui-danger) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    background: var(--eui-surface) !important;
    border-color: var(--eui-line-strong) !important;
    border-radius: var(--eui-radius-control) !important;
    color: var(--eui-text) !important;
    font-size: 13px !important;
}

/* Cards are structural, not decorative. */
:where(.stitch-card, .kol-card, .asset-overview-card, .asset-section-card,
       .pt-card, .ship-panel, .settle-card, .settle-list-main, .settle-detail-panel,
       .pa-list-card, .pa-card, .pa-detail-panel, .pf-card, .material-filter-card,
       .material-card, .panel, .ops-card, .faith-card, .mgmt-card, .bc-card,
       .ct-card, .mrf-card, .backup-card, .dashboard-block) {
    background: var(--eui-surface) !important;
    border-color: var(--eui-line) !important;
    border-radius: var(--eui-radius) !important;
    box-shadow: none !important;
}

/* KPI rows: white surfaces, semantic color only on the message. */
:where(.kpi-card, .kol-kpi-card, .asset-focus-card, .ship-metric, .settle-kpi,
       .pt-stat, .pf-kpis article, .material-kpi-grid article, .api-kpis article,
       .bc-kpis article, .team-kpis-v2 .ct-card, .faith-kpis > *,
       .import-summary-grid .ops-card, .quality-overview .ops-card) {
    background: var(--eui-surface) !important;
    border: 1px solid var(--eui-line) !important;
    border-radius: var(--eui-radius) !important;
    box-shadow: none !important;
}

:where(.kpi-card, .kol-kpi-card, .ship-metric, .settle-kpi, .pt-stat)::before,
:where(.kpi-card, .kol-kpi-card, .ship-metric, .settle-kpi, .pt-stat)::after {
    box-shadow: none !important;
}

:where(.kpi-value, .kol-kpi-card strong, .asset-focus-card strong, .ship-metric strong,
       .settle-kpi strong, .pt-stat strong, .pf-kpis strong, .api-kpis strong,
       .bc-kpis strong, .team-kpis-v2 strong) {
    color: var(--eui-text) !important;
    font-variant-numeric: tabular-nums;
}

/* Tables: consistent scan line, sticky context, calm actions. */
.table-wrap,
.mgmt-table-wrap,
.ship-table-wrap,
.pf-table-wrap,
.reference-table-scroll,
.table-scroll,
.task-table-wrap,
.bc-table-wrap {
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-width: thin;
}

:where(.table-wrap, .mgmt-table-wrap, .ship-table-wrap, .pf-table-wrap,
       .reference-table-scroll, .table-scroll, .task-table-wrap, .bc-table-wrap) table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

:where(.data-table, .mgmt-table, .ship-data-table, .pf-table, .task-table,
       .settle-order-table, .settle-mini-table, .bc-table) th {
    background: var(--eui-surface-subtle) !important;
    color: var(--eui-muted) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    position: sticky;
    text-transform: none !important;
    top: 0;
    white-space: nowrap;
    z-index: 4;
}

:where(.data-table, .mgmt-table, .ship-data-table, .pf-table, .task-table,
       .settle-order-table, .settle-mini-table, .bc-table) td {
    border-color: var(--eui-line) !important;
    color: var(--eui-text-2) !important;
    font-size: 13px !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.45 !important;
}

:where(.data-table, .mgmt-table, .ship-data-table, .pf-table, .task-table,
       .settle-order-table, .settle-mini-table, .bc-table) tbody tr:hover td {
    background: #f8fbff !important;
}

:where(.row-actions, .action-row, .backup-actions, .ship-row-actions) {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

:where(.row-actions a, .row-actions button, .action-row a, .action-row button,
       .ship-row-actions a, .ship-row-actions button, .row-action) {
    font-size: 12px !important;
    min-height: 30px;
    white-space: nowrap;
}

:where(.status, .badge, .role-pill, .connection-status, .ship-tag, .settle-pill,
       .crm-status, .bc-status, .pa-badge, .asset-badge, .pf-status) {
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
    white-space: nowrap;
}

.empty-cell,
.empty-panel,
.mgmt-empty,
.recycle-empty,
.pa-detail-empty,
.empty-state {
    color: var(--eui-muted) !important;
}

/* Dashboard: tasks first, status second. */
.dashboard-workbench-v3 .welcome-row {
    padding-bottom: 12px !important;
}

.dashboard-workbench-v3 .dashboard-quick-actions {
    gap: 8px !important;
}

.dashboard-workbench-v3 .kpi-grid {
    gap: 12px !important;
}

.dashboard-workbench-v3 .kpi-card {
    min-height: 104px !important;
    padding: 16px !important;
}

.dashboard-workbench-v3 .kpi-card.kpi-risk {
    border-top: 1px solid var(--eui-line) !important;
}

.dashboard-workbench-v3 .task-table-wrap {
    max-height: 520px;
    overflow: auto;
}

.dashboard-workbench-v3 .row-action {
    background: var(--eui-surface) !important;
    border: 1px solid var(--eui-line-strong) !important;
    color: var(--eui-primary) !important;
}

.dashboard-workbench-v3 .empty-panel {
    min-height: 88px !important;
}

/* Collaboration workspace. */
.kol-workbench {
    gap: 16px !important;
}

.kol-kpi-grid {
    gap: 12px !important;
}

.kol-kpi-card {
    min-height: 92px !important;
    padding: 14px 16px !important;
}

.kol-kpi-card small {
    color: var(--eui-muted) !important;
}

.collaboration-visual-board { margin: 0 0 16px; overflow: hidden; border: 1px solid var(--eui-line) !important; border-radius: 10px !important; background: var(--eui-surface) !important; }
.collaboration-visual-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--eui-line); }
.collaboration-visual-heading h2 { margin: 0; color: var(--eui-text); font-size: 15px; }.collaboration-visual-heading p { margin: 3px 0 0; color: var(--eui-muted); font-size: 12px; }.collaboration-visual-heading a { color: var(--eui-primary); font-size: 12px; font-weight: 600; }
.collaboration-visual-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; padding: 16px 18px 18px; }
.collaboration-stage-bars { display: grid; gap: 12px; }.collaboration-stage-bar > div { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }.collaboration-stage-bar span { color: var(--eui-text-secondary); font-size: 12px; }.collaboration-stage-bar strong { color: var(--eui-text); font-size: 15px; }.collaboration-stage-bar i { display: block; height: 8px; overflow: hidden; background: #edf1f6; border-radius: 999px; }.collaboration-stage-bar b { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: #3673e8; }.collaboration-stage-bar b.orange { background: #f59e0b; }.collaboration-stage-bar b.purple { background: #7c6cf2; }.collaboration-stage-bar b.red { background: #ea5b63; }
.collaboration-cost-brief { display: grid; gap: 10px; align-content: center; padding: 12px 14px; background: #f7faff; border: 1px solid #dce8fb; border-radius: 8px; }
.collaboration-period-filter { display: grid; gap: 7px; }
.period-filter-title { color: var(--eui-text); font-size: 12px; font-weight: 700; }
.collaboration-period-filter > select,
.collaboration-period-filter > input[type="date"] { min-width: 0; width: 100%; height: 30px; border: 1px solid #d8e0eb; border-radius: 5px; background: #fff; color: var(--eui-text); padding: 0 7px; font-size: 11px; }
.collaboration-period-filter .quick-periods { width: 100%; overflow: visible; }
.collaboration-period-filter .quick-periods > button,
.collaboration-period-filter .quick-more > summary { flex: 1; padding: 0 6px; font-size: 11px; }
.collaboration-period-filter .date-range-arrow { display: none; }
.collaboration-period-filter .period-apply { height: 30px; border: 1px solid #2d6cdf; border-radius: 5px; background: #2f67df; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.collaboration-cost-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #dce8fb; padding-top: 9px; }
.collaboration-cost-metrics div { display: grid; gap: 3px; }
.collaboration-cost-metrics span { color: var(--eui-text-secondary); font-size: 10px; }
.collaboration-cost-metrics strong { color: var(--eui-text); font-size: 16px; }

.kol-filter,
.kol-bulk {
    box-shadow: none !important;
}

.kol-workbench .kol-table-xbar,
.kol-workbench .table-card {
    overflow: auto;
}

.kol-workbench .kol-data-row,
.kol-workbench tbody tr {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.kol-workbench .kol-main-grid {
    align-items: start !important;
}

.kol-workbench .kol-side-column {
    position: sticky;
    top: calc(var(--eui-topbar) + 16px);
}

@media (max-width: 900px) {
    .collaboration-visual-body { grid-template-columns: 1fr; }
}

/* Influencer library: keep the list in the first working screen. */
.influencer-page-v2 {
    gap: 16px !important;
}

.influencer-page-v2 .asset-overview-card,
.influencer-page-v2 .asset-section-card {
    padding: 16px !important;
}

.influencer-page-v2 .asset-focus-grid,
.influencer-page-v2 .asset-pool-grid {
    gap: 10px !important;
}

.influencer-page-v2 .asset-focus-card {
    min-height: 86px !important;
    padding: 12px 14px !important;
}

.influencer-page-v2 .asset-pool-person {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.influencer-page-v2 .asset-metric-link,
.influencer-page-v2 .asset-mini-list a {
    color: inherit;
    text-decoration: none;
}

.influencer-page-v2 .asset-metric-link {
    align-items: start;
    border: 1px solid transparent;
    border-radius: 8px;
    display: grid;
    gap: 3px;
    grid-template-columns: 28px 1fr;
    margin: -5px;
    padding: 5px;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.influencer-page-v2 .asset-metric-link:hover,
.influencer-page-v2 .asset-metric-link.active {
    background: #f8fbff;
    border-color: #bfdbfe;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .08);
}

.influencer-page-v2 .asset-metric-link i {
    grid-row: span 3;
}

.influencer-page-v2 .asset-metric-link strong {
    color: #112344;
    font-size: 24px;
    grid-column: 2;
    line-height: 1.1;
}

.influencer-page-v2 .asset-metric-link small {
    color: #8da0ba;
    font-size: 11px;
    grid-column: 2;
}

.influencer-page-v2 .asset-mini-list a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #6b7890;
    display: grid;
    font-size: 12px;
    grid-template-columns: 1fr auto;
    margin: -5px -6px;
    padding: 5px 6px;
}

.influencer-page-v2 .asset-mini-list a:hover,
.influencer-page-v2 .asset-mini-list a.active {
    background: #f8fbff;
    border-color: #bfdbfe;
}

.influencer-page-v2 .asset-mini-list a b {
    color: #12233f;
    font-size: 20px;
}

.influencer-page-v2 .asset-metric-group.risk .asset-mini-list a b {
    color: #ef4444;
}

.influencer-page-v2 .asset-active-filter {
    align-items: center;
    background: #f8fbff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #345173;
    display: flex;
    gap: 8px;
    margin: 12px 0;
    padding: 8px 10px;
}

.influencer-page-v2 .asset-active-filter span {
    color: #6b7890;
    font-size: 12px;
}

.influencer-page-v2 .asset-active-filter b {
    color: #1d4ed8;
}

.influencer-page-v2 .asset-active-filter a {
    color: #ef4444;
    font-weight: 800;
    margin-left: auto;
    text-decoration: none;
}

.influencer-page-v2 .asset-table-wrap,
.influencer-page-v2 .asset-list-wrap,
.influencer-page-v2 .asset-card-list {
    max-height: calc(100vh - 180px);
    overflow: auto;
    scrollbar-gutter: stable;
}

/* Outreach and other business centers. */
.bc-page {
    gap: 16px !important;
}

.bc-kpis {
    gap: 12px !important;
}

.bc-kpis article {
    min-height: 86px !important;
    padding: 14px 16px !important;
}

.outreach-compose-grid > :first-child {
    border-color: #bfdbfe !important;
}

.outreach-compose-grid .email-settings,
.outreach-compose-grid .template-library {
    background: #fbfcfe !important;
}

.bc-form-card,
.bc-stack > .bc-card {
    position: sticky;
    top: calc(var(--eui-topbar) + 16px);
}

.bc-table-wrap {
    max-height: 620px;
    overflow: auto;
}

/* Promotion execution console. */
.pt-page {
    gap: 16px !important;
}

.pt-stats {
    gap: 12px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.pt-stat {
    min-height: 92px !important;
    padding: 14px 16px !important;
}

.pt-health,
.pt-card {
    min-height: 0 !important;
}

/* Promotion health panel: the overall content target needs a visible bar,
   not only a percentage in the surrounding copy. */
.pt-health-progress {
    display: grid;
    gap: 7px;
    max-width: 560px;
    padding: 10px 12px;
    border: 1px solid #dce7f6;
    border-radius: 8px;
    background: #f8fbff;
}

.pt-health-progress-title,
.pt-health-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pt-health-progress-title span { color: #344054; font-size: 12px; font-weight: 700; }
.pt-health-progress-title strong { color: var(--eui-primary); font-size: 16px; }
.pt-health-progress-track { height: 10px; overflow: hidden; border-radius: 999px; background: #dbe7f7; }
.pt-health-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #2563eb); transition: width .25s ease; }
.pt-health-progress-track i.green { background: linear-gradient(90deg, #34b27b, #15803d); }
.pt-health-progress-track i.orange { background: linear-gradient(90deg, #f59e0b, #ea580c); }
.pt-health-progress-meta { color: #667085; font-size: 11px; }

/* Promotion KPI cards retain their quick numbers; this full-width visual
   makes the underlying target / matching relationship immediately readable. */
body:has(.pt-page) .pt-stats-visual {
    grid-column: 1 / -1;
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #dfe7f2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.pt-stats-visual > header,
.pt-stats-visual > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pt-stats-visual header > div { display: grid; gap: 3px; }
.pt-stats-visual header span { color: #172033; font-size: 15px; font-weight: 800; }
.pt-stats-visual header small { color: #667085; font-size: 11px; }
.pt-stats-visual a { color: #2563eb; font-size: 12px; font-weight: 700; text-decoration: none; }
.pt-overview-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pt-overview-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 10px; padding: 12px; border: 1px solid #e3eaf4; border-radius: 8px; background: #f8fbff; }
.pt-overview-bar > div:first-child { display: grid; gap: 3px; min-width: 0; }
.pt-overview-bar strong { color: #344054; font-size: 12px; }
.pt-overview-bar span { overflow: hidden; color: #667085; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pt-overview-bar > b { align-self: center; color: #2563eb; font-size: 17px; }
.pt-overview-track { grid-column: 1 / -1; height: 9px; overflow: hidden; border-radius: 999px; background: #d9e7fb; }
.pt-overview-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #2563eb); }
.pt-overview-track i.green { background: linear-gradient(90deg, #4ade80, #15803d); }
.pt-overview-bar.risk { background: #fffaf4; border-color: #fde3be; }
.pt-overview-bar.risk > b { color: #d97706; }
.pt-overview-bar.risk .pt-overview-track { background: #fee6c4; }
.pt-overview-bar.risk .pt-overview-track i { background: linear-gradient(90deg, #fbbf24, #ea580c); }
.pt-stats-visual footer { padding-top: 2px; color: #667085; font-size: 12px; }
.pt-stats-visual footer b { color: #dc2626; }
@media(max-width:900px){.pt-overview-bars{grid-template-columns:1fr}.pt-stats-visual>header,.pt-stats-visual>footer{align-items:flex-start;flex-direction:column}}

.pt-table {
    max-height: 560px;
    overflow: auto;
}

.pt-card:has(> .pt-table),
.pt-card:has(.main-style-list) {
    max-height: 620px;
    overflow: auto;
}

.pt-card .empty-state {
    min-height: 120px !important;
}

/* Shipping: table remains primary, details remain stable. */
.shipping-saas-page {
    gap: 16px !important;
}

.ship-metric-grid {
    gap: 12px !important;
}

.ship-metric {
    min-height: 92px !important;
    padding: 14px 16px !important;
}

.ship-filter-actions {
    justify-content: flex-end !important;
}

.ship-table-wrap {
    max-height: calc(100vh - 180px);
    overflow: auto !important;
}

.shipping-saas-page .ship-detail-panel,
.shipping-saas-page .ship-detail-drawer {
    max-height: calc(100vh - 88px);
    overflow: auto;
    position: sticky;
    top: calc(var(--eui-topbar) + 12px);
}

/* Settlement: white cards with compact workflow context. */
.settlement-center {
    gap: 16px !important;
}

.settle-kpi-grid {
    gap: 12px !important;
}

.settle-kpi {
    min-height: 92px !important;
    padding: 14px 16px !important;
}

.settle-kpi::before {
    opacity: .8;
    transform: scale(.78);
}

/* Settlement KPI visualisation: show amounts, readiness and risk as bars
   directly beneath the numerical KPI cards. */
.settle-kpi-visual {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--eui-line);
    border-radius: var(--eui-radius);
    background: var(--eui-surface);
}

.settle-kpi-visual > header,
.settle-kpi-visual > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.settle-kpi-visual header > div { display: grid; gap: 3px; }
.settle-kpi-visual h2 { margin: 0; color: var(--eui-text); font-size: 16px; }
.settle-kpi-visual header span, .settle-kpi-visual footer { color: var(--eui-muted); font-size: 11px; }
.settle-kpi-visual a { color: var(--eui-primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.settle-overview-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.settle-overview-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 10px; padding: 13px; border: 1px solid #dce8f7; border-radius: 8px; background: #f8fbff; }
.settle-overview-bar > div { display: grid; gap: 3px; min-width: 0; }
.settle-overview-bar strong { color: #344054; font-size: 12px; }
.settle-overview-bar span { overflow: hidden; color: #667085; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.settle-overview-bar > b { align-self: center; color: #15803d; font-size: 17px; }
.settle-overview-bar > i { grid-column: 1 / -1; display: block; height: 9px; overflow: hidden; border-radius: 999px; background: #dce9fb; }
.settle-overview-bar > i > em { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4ade80, #15803d); }
.settle-overview-bar.purple { border-color: #e8ddff; background: #fbfaff; }.settle-overview-bar.purple > b { color: #7c3aed; }.settle-overview-bar.purple > i { background: #ebe3ff; }.settle-overview-bar.purple > i > em { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.settle-overview-bar.risk { border-color: #fedccf; background: #fffaf8; }.settle-overview-bar.risk > b { color: #dc2626; }.settle-overview-bar.risk > i { background: #fde2d9; }.settle-overview-bar.risk > i > em { background: linear-gradient(90deg, #fb923c, #dc2626); }
.settle-kpi-visual footer b { color: #172033; }.settle-kpi-visual footer a:last-child { color: #dc2626; }
@media(max-width:900px){.settle-overview-bars{grid-template-columns:1fr}.settle-kpi-visual>header,.settle-kpi-visual>footer{align-items:flex-start;flex-direction:column}}

.flow-stage,
.risk-list > * {
    background: var(--eui-surface) !important;
    box-shadow: none !important;
}

.settle-detail-panel {
    max-height: calc(100vh - 88px);
    overflow: auto;
    position: sticky !important;
    top: calc(var(--eui-topbar) + 12px) !important;
}

/* Product catalog: remove the 9,000px list page without changing pagination. */
.product-admin-page {
    gap: 16px !important;
}

.product-admin-page {
    align-items: start !important;
    grid-template-columns: minmax(0, 1fr) clamp(390px, 37vw, 520px) !important;
}

.product-admin-main {
    grid-template-columns: minmax(0, 1fr) !important;
}

.product-admin-page > * {
    min-width: 0;
}

.pa-list-card {
    overflow: hidden;
}

.pa-list {
    max-height: calc(100vh - 255px);
    min-height: 420px;
    overflow: auto;
    scrollbar-gutter: stable;
}

.pa-product-row {
    min-height: 72px !important;
}

.pa-product-row .pa-row-info strong,
.pa-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-pagination {
    background: rgba(255, 255, 255, .96) !important;
    border-top: 1px solid var(--eui-line) !important;
    bottom: 0;
    position: sticky;
    z-index: 5;
}

.pa-detail-panel {
    align-self: start;
    max-height: calc(100vh - 88px);
    overflow: auto !important;
    position: sticky !important;
    top: calc(var(--eui-topbar) + 12px) !important;
}

.pa-price-cell,
.pa-inventory-cell {
    font-variant-numeric: tabular-nums;
}

/* Product import: sticky configuration and bounded preview. */
.pf-layout {
    align-items: start !important;
}

.pf-side {
    position: sticky;
    top: calc(var(--eui-topbar) + 16px);
}

.pf-kpis {
    gap: 12px !important;
}

.pf-kpis article {
    min-height: 80px !important;
    padding: 12px 14px !important;
}

.pf-table-wrap {
    max-height: calc(100vh - 170px);
    overflow: auto !important;
}

.pf-table td small {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Material library: compact catalog and persistent filters. */
.materials-workbench {
    gap: 16px !important;
}

.material-kpi-grid,
.resource-entry-grid {
    gap: 10px !important;
}

.material-kpi-grid article {
    min-height: 82px !important;
    padding: 12px 14px !important;
}

.material-filter-card {
    position: sticky;
    top: var(--eui-topbar);
    z-index: 12;
}

.material-card-grid,
.materials-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

.materials-card-grid {
    max-height: calc(100vh - 190px);
    overflow: auto;
    padding-right: 4px;
    scrollbar-gutter: stable;
}

.material-card {
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
}

.material-card :where(img, .material-cover, .cover-placeholder) {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.material-card :where(footer, .card-actions) {
    margin-top: auto;
}

/* Data, finance and administration. */
.data-quality-page .table-wrap,
.quality-rules .table-wrap,
.import-record-page .table-wrap {
    max-height: 620px;
    overflow: auto;
}

.import-record-page {
    grid-template-columns: minmax(0, 1fr) !important;
}

.import-record-page > h2,
.import-record-page .import-result-stack,
.import-record-page .summary-table {
    grid-column: 1 !important;
    grid-row: auto !important;
}

.import-form {
    grid-column: 1 !important;
    max-width: 720px !important;
    width: 100% !important;
}

.import-history .empty-cell,
.import-record-page .empty-cell {
    min-height: 160px !important;
}

.mrf-kpis {
    gap: 12px !important;
}

.mrf-chart:has(.empty-state),
.mrf-card:has(.empty-state) .mrf-chart {
    min-height: 190px !important;
}

.account-workspace,
.api-workspace {
    align-items: start !important;
}

.permission-drawer,
.api-config-panel {
    max-height: calc(100vh - 90px);
    overflow: auto !important;
    position: sticky !important;
    top: calc(var(--eui-topbar) + 12px) !important;
}

.mgmt-table th,
.mgmt-table td,
.mgmt-user b,
.mgmt-user small,
.api-name b,
.api-name small,
.api-table code,
.api-config-panel label,
.api-config-panel input {
    font-size: 12px !important;
}

.mgmt-table th {
    font-size: 11px !important;
}

.api-kpis i,
.metric-icon {
    background: var(--eui-primary-soft) !important;
    border: 0 !important;
    color: var(--eui-primary) !important;
}

.backup-card code,
.backup-card strong {
    overflow-wrap: anywhere;
}

.panel .action-row .link-button:last-child {
    color: var(--eui-danger) !important;
}

.bc-files .empty-cell {
    height: 190px;
    text-align: center;
}

.bc-files form:has(tbody .empty-cell) .bc-card-head .bc-secondary {
    opacity: .45;
    pointer-events: none;
}

.collaboration-source-import{display:grid;gap:12px;margin-bottom:16px}.collaboration-import-head{align-items:flex-start;display:flex;gap:16px;justify-content:space-between}.collaboration-import-head>div{display:grid;gap:4px}.collaboration-import-head span{color:#667085;font-size:13px}.collaboration-source-search{align-items:end;display:grid;gap:10px;grid-template-columns:minmax(260px,1fr) auto}.collaboration-source-search label{display:grid;gap:6px;color:#475467;font-size:12px;font-weight:600}.collaboration-source-search input{height:40px;width:100%;border:1px solid #d0d9e7;border-radius:7px;padding:0 10px;background:#fff}.collaboration-source-search button,.collaboration-source-actions button{height:40px;border:1px solid #2563eb;border-radius:7px;background:#2563eb;color:#fff;font-weight:800;padding:0 16px}.collaboration-source-results{display:grid;gap:8px;max-height:360px;overflow:auto;scrollbar-gutter:stable}.collaboration-source-result{align-items:center;background:#fff;border:1px solid #e1e8f2;border-radius:8px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;padding:11px 12px}.collaboration-source-result:hover{border-color:#bfdbfe;background:#f8fbff}.collaboration-source-result.is-linked{background:#fbfcff}.collaboration-source-result strong{color:#12233f}.collaboration-source-result span,.collaboration-source-result small{color:#667085;display:block;font-size:12px;line-height:1.6}.collaboration-source-result small{color:#8a98ad;margin-top:2px}.collaboration-source-actions{align-items:center;display:flex;gap:8px;justify-content:flex-end}.linked-chip{background:#ecfdf5;border:1px solid #bbf7d0;border-radius:999px;color:#047857!important;font-weight:800;padding:3px 8px}.collaboration-source-empty{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;color:#667085;padding:16px;text-align:center}.collaboration-source-existing{display:grid;gap:8px;margin-bottom:16px}.collaboration-source-existing>div{display:flex;gap:12px;align-items:center}@media (max-width:760px){.collaboration-source-search,.collaboration-source-result{grid-template-columns:1fr}.collaboration-source-actions{justify-content:flex-start}}
.influencer-list-table-wrap{max-height:calc(100vh - 250px);overflow:auto;border:1px solid #e1e8f2;border-radius:8px;background:#fff}.influencer-list-table{min-width:1160px;width:100%;border-collapse:collapse}.influencer-list-table th{position:sticky;top:0;z-index:2;padding:11px 12px;background:#f8fafc;border-bottom:1px solid #e1e8f2;color:#667085;text-align:left;font-size:12px;white-space:nowrap}.influencer-list-table td{padding:11px 12px;border-bottom:1px solid #edf1f6;color:#344054;font-size:13px;vertical-align:middle}.influencer-list-table tbody tr:hover{background:#f8fbff}.influencer-table-profile{display:flex;align-items:center;gap:9px;min-width:180px}.influencer-table-profile .avatar-link{flex:0 0 auto}.influencer-table-profile strong,.influencer-table-profile small{display:block}.influencer-table-profile small{max-width:180px;overflow:hidden;color:#98a2b3;text-overflow:ellipsis;white-space:nowrap}.influencer-list-table td>a,.influencer-list-table td .crm-link{display:block;margin-top:4px}.influencer-table-actions{white-space:nowrap}.influencer-table-actions a{margin-right:12px;color:#2563eb;text-decoration:none;font-weight:600}

/* Calendar keeps its task-focused composition. */
.calendar-grid article {
    min-height: 104px !important;
}

.calendar-grid em {
    font-size: 11px !important;
}

/* Login: same typography and accessible controls. */
.login-page {
    background: var(--eui-bg) !important;
}

.login-shell {
    border-color: var(--eui-line) !important;
    box-shadow: var(--eui-shadow-float) !important;
}

.login-intro {
    background: linear-gradient(145deg, #f8fbff 0%, #eef4ff 100%) !important;
}

.login-form button {
    min-height: 44px;
}

/* Responsive: preserve priority and avoid narrow multi-column collapse. */
@media (max-width: 1180px) {
    .product-admin-page {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 42vw) !important;
    }

    .pt-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    .product-admin-page,
    .pf-layout,
    .bc-two-col,
    .bc-page .outreach-compose-grid,
    .account-workspace,
    .api-workspace,
    .ship-main-grid,
    .settle-list-shell {
        grid-template-columns: 1fr !important;
    }

    .pa-list {
        max-height: 68vh;
        min-height: 360px;
    }

    .pa-detail-panel,
    .pf-side,
    .bc-form-card,
    .bc-stack > .bc-card,
    .permission-drawer,
    .api-config-panel,
    .settle-detail-panel,
    .shipping-saas-page .ship-detail-panel,
    .shipping-saas-page .ship-detail-drawer {
        max-height: none;
        position: static !important;
    }
}

@media (max-width: 767px) {
    :root {
        --eui-topbar: 56px;
    }

    :where(.kol-topbar, .asset-topbar, .pt-head, .ship-title-line, .settle-header,
           .pa-header, .pf-header, .materials-titlebar, .page-heading, .ops-head,
           .mgmt-head, .bc-head, .ct-page-head, .mrf-head) h1 {
        font-size: 22px !important;
    }

    :where(.kol-primary-btn, .kol-ghost-btn, .asset-primary-btn, .asset-light-btn,
           .pt-btn, .ship-primary-btn, .ship-ghost-btn, .primary-action, .ghost-action,
           .pa-btn, .pf-btn, .ops-primary, .ops-secondary, .mgmt-button, .bc-primary,
           .bc-secondary, .ct-primary, .ct-secondary) {
        min-height: 40px !important;
    }

    .dashboard-workbench-v3 .kpi-grid,
    .kol-kpi-grid,
    .ship-metric-grid,
    .settle-kpi-grid,
    .pt-stats,
    .pf-kpis,
    .material-kpi-grid,
    .api-kpis,
    .bc-kpis,
    .team-kpis-v2,
    .faith-kpis,
    .import-summary-grid,
    .quality-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .kol-workbench .kol-main-grid,
    .settle-main-grid,
    .mrf-grid,
    .calendar-layout {
        grid-template-columns: 1fr !important;
    }

    .kol-workbench .kol-side-column {
        display: grid !important;
        gap: 12px;
        grid-template-columns: 1fr !important;
        position: static;
        width: 100% !important;
    }

    .kol-workbench :where(.kol-side-column, .kol-side-column *) {
        writing-mode: horizontal-tb !important;
        word-break: normal !important;
    }

    .kol-workbench .table-card,
    .kol-workbench .kol-table-xbar {
        overflow-x: auto !important;
    }

    .kol-workbench .sticky-op {
        box-shadow: none !important;
        position: static !important;
    }

    .kol-workbench .op-cell {
        min-width: 150px !important;
    }

    .kol-workbench table,
    .ship-data-table,
    .settle-order-table,
    .mgmt-table,
    .data-table,
    .pf-table,
    .bc-table {
        min-width: 760px;
    }

    .pa-list {
        max-height: 66vh;
        min-height: 340px;
    }

    .pa-toolbar.pa-toolbar-simple {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pa-toolbar.pa-toolbar-simple .pa-search {
        grid-column: 1 / -1;
    }

    .pa-pagination {
        flex-wrap: wrap;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .pa-pagination > span,
    .pa-pagination > label,
    .pa-pagination > small {
        white-space: nowrap;
    }

    .pa-pagination > div {
        margin-left: auto;
    }

    .pa-product-row-simple {
        min-width: 620px;
    }

    .pa-list-card {
        overflow-x: auto;
    }

    .material-filter-card {
        position: static;
    }

    .materials-card-grid {
        max-height: 70vh;
    }

    .material-card-grid,
    .materials-grid {
        grid-template-columns: 1fr !important;
    }

    .login-shell {
        min-height: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}
/* 2026-07-16: dense desktop collaboration layout and visible influencer links. */
@media (min-width: 1281px) {
  body:has(.kol-workbench) .kol-workbench {
    max-width: none !important;
    padding: 22px 24px 36px !important;
  }

  body:has(.kol-workbench) .kol-main-grid {
    grid-template-columns: minmax(0, 1fr) 276px !important;
    gap: 14px !important;
  }
}

body:has(.influencer-page-v2) .asset-pool-person .asset-person-name {
  color: inherit;
  text-decoration: none;
}

body:has(.influencer-page-v2) .asset-pool-person .asset-person-name:hover,
body:has(.influencer-page-v2) .asset-pool-person .asset-person-name:focus {
  color: #1d5fe9;
  text-decoration: underline;
}

body:has(.influencer-page-v2) .asset-pool-person .asset-person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  line-height: 1.2;
}

body:has(.influencer-page-v2) .asset-pool-person .asset-person-actions a,
body:has(.influencer-page-v2) .asset-pool-person .asset-person-homepage {
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

body:has(.influencer-page-v2) .asset-pool-person .asset-person-actions a:hover,
body:has(.influencer-page-v2) .asset-pool-person .asset-person-actions a:focus {
  text-decoration: underline;
}

body:has(.influencer-page-v2) .asset-pool-person .asset-person-homepage.missing {
  color: #94a3b8;
  font-weight: 500;
}
.kpi-detail-drawer[hidden] { display: none; }
.kpi-detail-drawer { position: fixed; inset: 0; z-index: 1200; }
.kpi-detail-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px); }
.kpi-detail-panel { position: absolute; top: 0; right: 0; width: min(940px, 94vw); height: 100%; overflow: auto; background: #f7f9fc; box-shadow: -16px 0 42px rgba(15, 23, 42, .18); padding: 24px 28px 36px; animation: kpi-drawer-in .2s ease-out; }
@keyframes kpi-drawer-in { from { transform: translateX(30px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
body.kpi-detail-open { overflow: hidden; }
.kpi-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.kpi-detail-eyebrow { display: block; color: #64748b; font-size: 12px; margin-bottom: 6px; }
.kpi-detail-header h2 { margin: 0; color: #0f172a; font-size: 24px; letter-spacing: -.02em; }
.kpi-detail-header p { margin: 6px 0 0; color: #64748b; font-size: 13px; }
.kpi-detail-close { width: 34px; height: 34px; border: 1px solid #dbe3ef; border-radius: 10px; background: #fff; color: #475569; font-size: 24px; line-height: 1; cursor: pointer; }
.kpi-detail-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.kpi-detail-periods { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.kpi-detail-periods button, .kpi-detail-custom button { border: 1px solid #dbe3ef; background: #fff; border-radius: 7px; padding: 7px 12px; color: #475569; cursor: pointer; font-size: 12px; }
.kpi-detail-periods button.is-active, .kpi-detail-custom button { color: #fff; background: #2563eb; border-color: #2563eb; }
.kpi-detail-custom { display: inline-flex; align-items: center; gap: 6px; }
.kpi-detail-custom input { width: 132px; height: 32px; border: 1px solid #dbe3ef; border-radius: 7px; padding: 0 8px; color: #334155; }
.kpi-detail-list-link { margin-left: auto; color: #2563eb; font-size: 13px; font-weight: 600; text-decoration: none; }
.kpi-detail-summary { display: flex; align-items: baseline; gap: 8px; padding: 18px 4px 12px; }
.kpi-detail-summary strong { color: #0f172a; font-size: 30px; }
.kpi-detail-summary span { color: #64748b; font-size: 13px; }
.kpi-detail-summary small { margin-left: auto; color: #64748b; font-size: 12px; }
.kpi-detail-chart-wrap, .kpi-detail-table-wrap { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; margin-top: 12px; }
.kpi-detail-chart-meta, .kpi-detail-table-heading { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #edf2f7; color: #334155; font-size: 13px; }
.kpi-detail-chart-meta span, .kpi-detail-table-heading span { color: #94a3b8; font-size: 12px; }
.kpi-detail-chart { display: block; width: 100%; height: 270px; padding: 8px 12px 12px; }
.kpi-detail-chart .chart-axis { stroke: #e2e8f0; stroke-width: 1; }
.kpi-detail-chart [data-kpi-detail-line] { fill: none; stroke: #2563eb; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kpi-detail-chart [data-kpi-detail-dots] circle { fill: #fff; stroke: #2563eb; stroke-width: 2; }
.kpi-detail-chart text { fill: #94a3b8; font-size: 11px; }
.kpi-detail-table-wrap { overflow: hidden; }
.kpi-detail-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kpi-detail-table-wrap th, .kpi-detail-table-wrap td { padding: 11px 12px; text-align: left; border-bottom: 1px solid #edf2f7; white-space: nowrap; }
.kpi-detail-table-wrap th { color: #64748b; font-weight: 500; background: #f8fafc; }
.kpi-detail-table-wrap td { color: #334155; }
.kpi-detail-table-wrap td.detail-product { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.kpi-detail-table-wrap td a { color: #2563eb; text-decoration: none; }
.detail-status { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: #eff6ff; color: #2563eb; }
.kpi-detail-empty { padding: 28px !important; text-align: center !important; color: #94a3b8 !important; }
@media (max-width: 720px) { .kpi-detail-panel { width: 100%; padding: 18px 14px 28px; } .kpi-detail-list-link { width: 100%; margin-left: 0; } .kpi-detail-custom input { width: 118px; } .kpi-detail-table-wrap { overflow-x: auto; } }