/**
 * Bolmaster customer panel — static styles for custom Filament Blade views.
 * Tailwind utilities in custom views are not compiled; use these bm-* classes.
 */

.bm-page {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.fi-page .bm-page,
.fi-main .bm-page {
    width: 100%;
}

.bm-stack > * + * {
    margin-top: 1.5rem;
}

.bm-text-center {
    text-align: center;
}

.bm-muted {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
}

.dark .bm-muted {
    color: #9ca3af;
}

.bm-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #030712;
    margin: 0;
}

.dark .bm-title {
    color: #f9fafb;
}

.bm-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
    line-height: 1.5;
}

.dark .bm-subtitle {
    color: #9ca3af;
}

.bm-card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.dark .bm-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.1);
}

.bm-card-pad {
    padding: 1.5rem;
}

.bm-card-pad-lg {
    padding: 2rem;
}

.bm-card-header {
    background: linear-gradient(135deg, #0066cc 0%, #004c99 100%);
    color: #ffffff;
    padding: 2rem 1.5rem;
    text-align: center;
}

.bm-card-header-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0;
}

.bm-card-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0 0;
    line-height: 1.25;
}

.bm-card-header-text {
    font-size: 0.875rem;
    margin: 0.75rem auto 0;
    max-width: 36rem;
    line-height: 1.6;
    opacity: 0.92;
}

.bm-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.bm-card-footer {
    border-top: 1px solid #f3f4f6;
    padding: 1.5rem;
    text-align: center;
}

.dark .bm-card-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.bm-grid-2,
.bm-grid-3,
.bm-grid-4,
.bm-grid-5 {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .bm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .bm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bm-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

    .bm-page .fi-sc-columns-3 > .fi-grid-col {
        align-items: stretch;
    }
}

.bm-grid-2-1 {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .bm-grid-2-1 {
        grid-template-columns: 1fr 2fr;
    }
    .bm-grid-2-1.bm-grid-wide-first {
        grid-template-columns: 2fr 1fr;
    }
}

.bm-stat-card {
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.bm-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.bm-stat-label {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

a.bm-stat-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.bm-stat-card--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bm-step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.dark .bm-step-card {
    background: rgba(31, 41, 55, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.bm-step-card--done {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.dark .bm-step-card--done {
    background: rgba(6, 78, 59, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
}

.bm-step-card--active {
    position: relative;
    background: #ffffff;
    border: 2px solid #0066cc;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

.dark .bm-step-card--active {
    background: #1f2937;
}

.bm-step-badge {
    position: absolute;
    top: -0.625rem;
    border-radius: 9999px;
    background: #0066cc;
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.125rem 0.625rem;
}

.bm-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
    background: #0066cc;
}

.bm-step-num--done {
    background: #10b981;
}

.bm-step-num--muted {
    background: #e5e7eb;
    color: #6b7280;
}

.dark .bm-step-num--muted {
    background: #374151;
    color: #d1d5db;
}

.bm-step-title {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.dark .bm-step-title {
    color: #f9fafb;
}

.bm-step-desc {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.dark .bm-step-desc {
    color: #9ca3af;
}

.bm-item-card {
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .bm-item-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.1);
}

.bm-item-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.bm-item-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.bm-item-title {
    margin-top: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #030712;
}

.dark .bm-item-title {
    color: #f9fafb;
}

.bm-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.bm-badge--success { background: #dcfce7; color: #166534; }
.bm-badge--warning { background: #fef3c7; color: #92400e; }
.bm-badge--danger { background: #fee2e2; color: #991b1b; }
.bm-badge--info { background: #f3f4f6; color: #374151; }
.bm-badge--primary { background: #dbeafe; color: #1e40af; }

.bm-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    font-size: 0.875rem;
}

.bm-meta-label {
    font-size: 0.75rem;
    color: #6b7280;
}

.bm-meta-value {
    font-weight: 600;
    color: #111827;
}

.dark .bm-meta-value {
    color: #f9fafb;
}

.bm-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #374151;
}

.dark .bm-section-title {
    color: #d1d5db;
}

.bm-dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
}

.bm-empty {
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    background: #eff6ff;
    border: 1px solid rgba(0, 102, 204, 0.15);
}

.dark .bm-empty {
    background: rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.25);
}

.bm-empty-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #030712;
    margin: 0;
}

.dark .bm-empty-title {
    color: #f9fafb;
}

.bm-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bm-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.bm-list-item:last-child {
    border-bottom: none;
}

.dark .bm-list-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

a.bm-list-item--link {
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    border-radius: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

a.bm-list-item--link:hover {
    background: rgba(0, 102, 204, 0.06);
}

.bm-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bm-filter-tab {
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bm-filter-tab:hover {
    border-color: #0066cc;
    color: #0066cc;
}

.bm-filter-tab--active {
    background: #0066cc;
    border-color: #0066cc;
    color: #ffffff;
}

.bm-callout {
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.bm-callout--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
}

.bm-callout--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}

.bm-callout--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}

.bm-error-box {
    margin-top: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    background: #fef2f2;
    color: #991b1b;
}

.bm-link {
    font-size: 0.875rem;
    color: #0066cc;
    text-decoration: none;
}

.bm-link:hover {
    text-decoration: underline;
}

.bm-chart-wrap {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .bm-chart-wrap {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.1);
}

.bm-chart-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: #111827;
}

.dark .bm-chart-title {
    color: #f9fafb;
}

.bm-gauge-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.bm-gauge-label {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.dark .bm-gauge-label {
    color: #f9fafb;
}

.bm-gauge-sublabel {
    font-size: 0.75rem;
    color: #6b7280;
}

.bm-gauge-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #111827;
}

.dark .bm-gauge-value {
    color: #f9fafb;
}

.bm-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1rem;
    background: #ffffff;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.bm-pricing-card--featured {
    border: 2px solid #0066cc;
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.12);
}

.bm-pricing-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: #0066cc;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
}

.bm-hero-eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0066cc;
    margin: 0;
}

.bm-hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0 0;
    color: #030712;
    line-height: 1.2;
}

.dark .bm-hero-title {
    color: #f9fafb;
}

.bm-hero-text {
    margin: 0.75rem auto 0;
    max-width: 42rem;
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
}

.dark .bm-hero-text {
    color: #9ca3af;
}

.bm-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid rgba(0, 102, 204, 0.15);
}

.bm-actions {
    margin-top: 1rem;
    padding-top: 0.5rem;
}

.bm-table-wrap {
    overflow-x: auto;
    width: 100%;
}

.bm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.bm-table th {
    text-align: left;
    padding: 0 0.75rem 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-weight: 500;
}

.bm-table td {
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.bm-table tr:last-child td {
    border-bottom: none;
}

.bm-impersonation {
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
}

.bm-impersonation--global {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    position: sticky;
    top: 0;
    z-index: 40;
}

.bm-impersonation-stop {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    background: #ea580c;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.bm-impersonation-stop:hover {
    background: #c2410c;
    color: #fff;
}

/* Admin dashboard cards (launch readiness, queue monitor) */

.bm-gauge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 2rem 1.5rem;
}

.bm-card-icon-header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.bm-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    background: #eff6ff;
    flex-shrink: 0;
    line-height: 1;
}

.dark .bm-card-icon {
    background: rgba(0, 102, 204, 0.18);
}

.bm-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.bm-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
}

.bm-check-row--ok {
    border-left: 3px solid #16a34a;
}

.bm-check-row--fail {
    border-left: 3px solid #dc2626;
}

.dark .bm-check-row {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.bm-check-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.bm-check-icon--ok {
    background: #dcfce7;
    color: #166534;
}

.bm-check-icon--fail {
    background: #fee2e2;
    color: #991b1b;
}

.bm-check-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #111827;
    line-height: 1.35;
}

.dark .bm-check-label {
    color: #f9fafb;
}

.bm-check-detail {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.125rem;
    line-height: 1.45;
}

.bm-link-card {
    display: block;
    border-radius: 0.75rem;
    padding: 1rem 1.125rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    height: 100%;
}

.bm-link-card:hover {
    border-color: #0066cc;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
    transform: translateY(-1px);
}

.dark .bm-link-card {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
}

.bm-link-card-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: #111827;
}

.dark .bm-link-card-title {
    color: #f9fafb;
}

.bm-link-card-desc {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
    line-height: 1.45;
}

.bm-stat-card--primary {
    border-top: 3px solid #0066cc;
}

.bm-stat-card--warning {
    border-top: 3px solid #d97706;
}

.bm-stat-card--danger {
    border-top: 3px solid #dc2626;
}

.bm-stat-card--info {
    border-top: 3px solid #6366f1;
}

.bm-code-block {
    background: #f1f5f9;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    word-break: break-all;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

.dark .bm-code-block {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.08);
}

.bm-doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bm-doc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: #f9fafb;
    font-size: 0.875rem;
    color: #374151;
}

.dark .bm-doc-row {
    background: rgba(255, 255, 255, 0.03);
    color: #d1d5db;
}

.bm-doc-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.dark .bm-doc-icon {
    background: rgba(255, 255, 255, 0.08);
}

.bm-feature-grid {
    display: grid;
    gap: 0.5rem;
}

.bm-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    background: #f9fafb;
    font-size: 0.875rem;
}

.dark .bm-feature-row {
    background: rgba(255, 255, 255, 0.03);
}

.bm-callout--danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.dark .bm-callout--danger {
    background: rgba(127, 29, 29, 0.25);
    border-color: rgba(248, 113, 113, 0.3);
    color: #fecaca;
}

.bm-callout-title {
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.bm-callout-meta {
    font-size: 0.75rem;
    opacity: 0.85;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    margin-top: 0.5rem;
}

.bm-callout-time {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 0.375rem;
}

.bm-grid-quick-links {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .bm-grid-quick-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bm-grid-deploy {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .bm-grid-deploy {
        grid-template-columns: 1fr 2fr;
    }
}

.bm-table td.bm-table-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    color: #6b7280;
}

.bm-table-empty {
    text-align: center;
    padding: 2rem 1rem;
}

.bm-table-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Cost rules hero + form controls */
.bm-hero-card {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 55%, #f0fdf4 100%);
    border: 1px solid rgba(0, 102, 204, 0.12);
}

.dark .bm-hero-card {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.12) 0%, rgba(17, 24, 39, 1) 55%, rgba(16, 185, 129, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
    .bm-hero-card {
        grid-template-columns: 1.4fr 1fr;
        align-items: center;
    }
}

.bm-hero-card__stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bm-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.bm-grid-2 {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .bm-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bm-select {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .bm-select {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(17, 24, 39, 0.95);
    color: #f9fafb;
}

.bm-stat-card--soft {
    background: #f9fafb;
}

.dark .bm-stat-card--soft {
    background: rgba(255, 255, 255, 0.03);
}

.bm-stat-card--primary {
    border-left: 4px solid #0066cc;
    background: #eff6ff;
}

.dark .bm-stat-card--primary {
    background: rgba(0, 102, 204, 0.12);
}

.bm-onboarding-progress {
    height: 0.5rem;
    border-radius: 9999px;
    background: #e5e7eb;
    overflow: hidden;
}

.bm-onboarding-progress__bar {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #16a34a, #0066cc);
    transition: width 0.3s ease;
}

.bm-checklist-item {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.bm-checklist-item:last-child {
    border-bottom: none;
}

.bm-checklist-item__icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.bm-checklist-item__icon--done {
    background: #dcfce7;
    color: #166534;
}

.bm-checklist-item__icon--todo {
    background: #f3f4f6;
    color: #6b7280;
}

.bm-margin-negative {
    color: #dc2626;
    font-weight: 600;
}

.bm-margin-positive {
    color: #16a34a;
    font-weight: 600;
}

.bm-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bm-flex-wrap {
    flex-wrap: wrap;
}

.bm-gap-3 {
    gap: 0.75rem;
}

.bm-text-sm {
    font-size: 0.8125rem;
}

.bm-segmented {
    display: inline-flex;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f9fafb;
}

.bm-segment {
    border: 0;
    background: transparent;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.bm-segment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 0.75rem;
    font-weight: 600;
    color: #4b5563;
}

.bm-segment--active {
    background: #0066cc;
    color: #ffffff;
}

.bm-segment--active .bm-segment-count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.dark .bm-segmented {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .bm-segment {
    color: #e5e7eb;
}

.dark .bm-segment--active {
    background: #0066cc;
    color: #ffffff;
}

.bm-link {
    color: #0066cc;
    text-decoration: none;
    font-weight: 500;
}

.bm-link:hover {
    text-decoration: underline;
}

/* Product detail page */
.bm-product-detail-card {
    overflow: visible;
}

.bm-product-hero {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: linear-gradient(180deg, rgba(0, 102, 204, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
}

@media (min-width: 768px) {
    .bm-product-hero {
        grid-template-columns: 220px 1fr;
        align-items: start;
        padding: 2rem;
    }
}

.bm-product-hero__image {
    width: 100%;
    max-width: 220px;
    max-height: 220px;
    object-fit: contain;
    border-radius: 0.875rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
}

.bm-product-hero__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border-radius: 0.875rem;
    border: 1px dashed rgba(15, 23, 42, 0.15);
    background: #f9fafb;
    padding: 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.bm-product-hero__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0066cc;
}

.bm-product-hero__title {
    margin: 0.35rem 0 0;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    color: #030712;
}

.bm-product-hero__subtitle {
    margin: 0.5rem 0 0;
    color: #6b7280;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.bm-product-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.bm-product-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.8125rem;
    font-weight: 500;
}

.bm-product-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}

@media (min-width: 640px) {
    .bm-product-hero__stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bm-product-stat {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    background: #ffffff;
}

.bm-product-stat__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.bm-product-stat__value {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.bm-product-tabs-wrap {
    width: 100%;
}

.bm-product-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.75rem 1rem 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: #fafafa;
}

.bm-product-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.65rem 0.95rem;
    border-radius: 0.65rem 0.65rem 0 0;
    cursor: pointer;
}

.bm-product-tab--active,
.bm-product-tab.bm-product-tab--active {
    background: #ffffff;
    color: #0066cc;
    box-shadow: inset 0 -2px 0 #0066cc;
}

.bm-product-tab-panels {
    min-height: 12rem;
}

.bm-product-detail-grid {
    gap: 1.5rem;
}

.bm-detail-list {
    margin: 0.75rem 0 0;
}

.bm-detail-row {
    display: grid;
    grid-template-columns: minmax(8rem, 38%) 1fr;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.bm-detail-row dt {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
}

.bm-detail-row dd {
    margin: 0;
    font-size: 0.9375rem;
    color: #111827;
}

.bm-badge--soft {
    background: #eef2ff;
    color: #3730a3;
}

.bm-timeline {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.bm-timeline__item {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: 0.75rem;
    padding-bottom: 1rem;
    position: relative;
}

.bm-timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 1rem;
    bottom: 0;
    width: 2px;
    background: rgba(15, 23, 42, 0.08);
}

.bm-timeline__dot {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 9999px;
    margin-top: 0.2rem;
    background: #0066cc;
}

.bm-timeline__item--success .bm-timeline__dot { background: #16a34a; }
.bm-timeline__item--info .bm-timeline__dot { background: #0066cc; }
.bm-timeline__item--muted .bm-timeline__dot { background: #9ca3af; }

.bm-timeline__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
}

.bm-timeline__time {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

[x-cloak] {
    display: none !important;
}

.dark .bm-product-hero {
    background: linear-gradient(180deg, rgba(0, 102, 204, 0.12) 0%, rgba(17, 24, 39, 0) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .bm-product-hero__title,
.dark .bm-product-stat__value,
.dark .bm-detail-row dd,
.dark .bm-timeline__title {
    color: #f9fafb;
}

.dark .bm-product-tabs {
    background: #0f172a;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .bm-product-tab--active,
.dark .bm-product-tab.bm-product-tab--active {
    background: #111827;
}

.bm-locked-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.bm-locked-row__title {
    font-weight: 600;
    color: #111827;
}

.bm-locked-row__meta {
    font-size: 0.8125rem;
    color: #6b7280;
}

.bm-locked-row__hint {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

.bm-locked-row__skeletons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bm-locked-row__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.bm-row-locked td {
    background: #f9fafb;
}

.bm-locked-premium {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.bm-locked-premium__hint {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.bm-locked-premium__skeletons {
    display: grid;
    gap: 0.5rem;
}

.bm-locked-skeleton {
    display: block;
    height: 0.85rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
}

.bm-locked-skeleton--inline {
    width: 4.5rem;
    height: 0.7rem;
}

.bm-locked-skeleton--wide {
    width: 70%;
}

.bm-link--button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

/* Buy box autopsy feed (product detail tab) */
.bm-buybox-range {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bm-buybox-range__btn {
    cursor: pointer;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
}

.bm-buybox-range__btn--active {
    border-color: #0066cc;
    color: #0066cc;
    background: rgba(0, 102, 204, 0.06);
}

.bm-buybox-feed {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.bm-buybox-event__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.bm-buybox-event__time {
    margin-left: 0.5rem;
    font-size: 0.8125rem;
}

.bm-buybox-event__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #374151;
}

.bm-buybox-event__details {
    margin-top: 0.65rem;
}

.bm-buybox-event__details summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066cc;
}

.bm-buybox-event__attribution {
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.bm-buybox-event__evidence {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.dark .bm-buybox-range__btn {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
}

.dark .bm-buybox-range__btn--active {
    border-color: #60a5fa;
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.12);
}

.dark .bm-buybox-event__meta {
    color: #d1d5db;
}

/* Archive backfill progress */
.bm-archive-progress {
    min-width: 8rem;
}

.bm-archive-progress__track {
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.bm-archive-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: #0066cc;
}

.bm-archive-progress__bar--halted {
    background: #b45309;
}

.dark .bm-archive-progress__track {
    background: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------------------------
   Paginakop-acties mogen nooit buiten beeld vallen.

   Filament zet de kopregel en de actieknoppen naast elkaar zonder wrap. Met vier
   of vijf knoppen — Productkosten heeft er vier, Referentieprijzen vier — plus
   Nederlandse labels als "Exporteer alleen ontbrekende" loopt die rij op een
   smal scherm gewoon door, en de laatste knoppen zijn onbereikbaar.

   Zowel /app als /manage laden dit bestand, dus dit geldt voor beide.
   --------------------------------------------------------------------------- */

.fi-header {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fi-header-actions-ctn {
    max-width: 100%;
    flex-wrap: wrap;
}

.fi-header-actions-ctn .fi-ac {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* Rij-acties in tabellen: Klanten heeft er vier naast elkaar. */
.fi-ta-actions {
    flex-wrap: wrap;
    row-gap: 0.375rem;
}

/* Laatste redmiddel op zeer smalle schermen: knoppen over de volle breedte,
   zodat een lang label afbreekt in plaats van uit beeld te lopen. */
@media (max-width: 640px) {
    .fi-header-actions-ctn,
    .fi-header-actions-ctn .fi-ac {
        width: 100%;
    }

    .fi-header-actions-ctn .fi-ac > * {
        flex: 1 1 auto;
    }
}

/* Caveat under a stat value — used where a figure is knowingly incomplete, such as the
   order margin when cost prices are missing for part of the lines. Muted and small: it
   must qualify the number without competing with it. */
.bm-stat-note {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #6b7280;
}

/* ---------------------------------------------------------------------------
   Platform diagnostics (/manage/platform-diagnostics)
   A page read under pressure: something is wrong and nobody knows where yet.
   So severity is carried by a colour bar and a dot, not by text alone, and the
   whole page stays legible at a glance before anything is read closely.
   --------------------------------------------------------------------------- */

.bm-diag-overall {
    border-left: 4px solid var(--bm-diag-accent, #6b7280);
}

.bm-diag-overall__status {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--bm-diag-accent, #111827);
}

.bm-diag-overall--success { --bm-diag-accent: #16a34a; }
.bm-diag-overall--warning { --bm-diag-accent: #d97706; }
.bm-diag-overall--danger  { --bm-diag-accent: #dc2626; }
.bm-diag-overall--gray    { --bm-diag-accent: #6b7280; }

.bm-diag-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.bm-diag-check {
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--bm-diag-accent, #6b7280);
    border-radius: 0.5rem;
    padding: 0.7rem 0.8rem;
    background: #fff;
}

.bm-diag-check--success { --bm-diag-accent: #16a34a; }
.bm-diag-check--warning { --bm-diag-accent: #d97706; }
.bm-diag-check--danger  { --bm-diag-accent: #dc2626; }
.bm-diag-check--gray    { --bm-diag-accent: #9ca3af; }

.bm-diag-check__head {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.bm-diag-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--bm-diag-accent, #6b7280);
    flex: 0 0 auto;
    transform: translateY(-1px);
}

.bm-diag-check__label {
    font-weight: 600;
    font-size: 0.875rem;
}

/* Pushed right so the values line up down the column and can be scanned without
   reading the labels. */
.bm-diag-check__value {
    margin-left: auto;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: #374151;
    white-space: nowrap;
}

.bm-diag-check__hint {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #6b7280;
}

.bm-diag-check__detail {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #374151;
    word-break: break-word;
}

.bm-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    background: #f3f4f6;
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
}

.bm-row-muted { opacity: 0.55; }

.bm-log-entry {
    border: 1px solid #e5e7eb;
    border-left: 3px solid #9ca3af;
    border-radius: 0.5rem;
    background: #fff;
}

.bm-log-entry--error,
.bm-log-entry--critical,
.bm-log-entry--alert,
.bm-log-entry--emergency { border-left-color: #dc2626; }

.bm-log-entry--warning { border-left-color: #d97706; }

.bm-log-entry__summary {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    font-size: 0.8125rem;
    list-style: none;
}

.bm-log-entry__summary::-webkit-details-marker { display: none; }

.bm-log-entry__level {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #6b7280;
    flex: 0 0 auto;
}

.bm-log-entry__count,
.bm-log-entry__time {
    font-size: 0.6875rem;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.bm-log-entry__text {
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* The trace is the one thing here that must never be reflowed, so it scrolls
   inside its own box rather than widening the page. */
.bm-log-entry__body {
    margin: 0;
    padding: 0.6rem 0.7rem;
    border-top: 1px solid #f3f4f6;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: #374151;
    overflow-x: auto;
    white-space: pre;
}

@media (max-width: 640px) {
    .bm-diag-check__value { margin-left: 0; }
    .bm-log-entry__summary { flex-wrap: wrap; }
    .bm-log-entry__text { white-space: normal; }
}

/* ---------------------------------------------------------------------------
   Rij-acties blijven in beeld op smalle schermen.

   Gemeten op 2026-09-11 bij een venster van 390 px: de tabel op Scheduler is
   840 px breed, Gebruikers 946 px. De actiekolom staat altijd als laatste, dus
   "Run now", "Bekijken" en "Bewerken" zaten op x=840 — bereikbaar door de tabel
   zijwaarts te slepen, maar onzichtbaar tot je dat doet. Dat is precies de
   klacht: knoppen die buiten beeld vallen.

   De kolom wordt daarom aan de rechterrand vastgezet; de rest van de rij
   schuift eronder door. Alleen onder 1024 px, want daarboven past de tabel en
   is er niets op te lossen.

   :has() bepaalt of de laatste kolom werkelijk de actiekolom is — zonder die
   voorwaarde zou ook een gewone laatste kolom blijven plakken. Browsers zonder
   :has() vallen terug op het huidige gedrag; dat is niet erger dan het was.
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .fi-ta-table:has(th.fi-ta-actions-header-cell) thead tr > th:last-child,
    .fi-ta-table:has(th.fi-ta-actions-header-cell) tbody tr > td:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
        /* Een plakkende cel moet ondoorzichtig zijn, anders schuift de rest van
           de rij er zichtbaar doorheen. */
        background-color: #fff;
        /* Smalle schaduw als enige hint dat er links nog kolommen zijn. */
        box-shadow: -10px 0 8px -8px rgba(15, 23, 42, 0.18);
    }

    .dark .fi-ta-table:has(th.fi-ta-actions-header-cell) thead tr > th:last-child,
    .dark .fi-ta-table:has(th.fi-ta-actions-header-cell) tbody tr > td:last-child {
        background-color: rgb(24, 24, 27);
        box-shadow: -10px 0 8px -8px rgba(0, 0, 0, 0.5);
    }

    /* Twee of drie knoppen naast elkaar maken de plakkolom te breed; onder
       elkaar blijft er ruimte over voor de gegevens zelf. */
    .fi-ta-table:has(th.fi-ta-actions-header-cell) tbody tr > td:last-child .fi-ta-actions {
        flex-direction: column;
        align-items: stretch;
        row-gap: 0.25rem;
    }
}

/* ---------------------------------------------------------------------------
   Admin-afwerking (/manage)

   Gemeten op 2026-09-11: op één scherm staan twee soorten kaarten naast elkaar.
   Filament gebruikt 12 px hoeken, geen rand en geen schaduw; onze eigen
   bm-card gebruikt 16 px, een haarlijn en een schaduw. Op de queue monitor en
   het dashboard zie je die twee vormen door elkaar, en dat leest als twee
   producten in één paneel.

   Ze worden hier naar elkaar toe gebracht: overal dezelfde hoek en dezelfde
   haarlijn, nergens schaduw. De haarlijn blijft, want zonder rand vallen witte
   kaarten op een lichtgrijze achtergrond uit elkaar.

   Alles is gescoped op .fi-panel-admin. bm-card wordt ook in het klantpaneel
   gebruikt en dat is hier niet gevraagd — /app blijft ongemoeid.
   --------------------------------------------------------------------------- */

.fi-panel-admin .bm-card {
    border-radius: 0.75rem;
    box-shadow: none;
}

.fi-panel-admin .fi-wi-stats-overview-stat,
.fi-panel-admin .fi-section,
.fi-panel-admin .fi-ta-ctn {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem;
}

.dark.fi-panel-admin .bm-card,
.dark .fi-panel-admin .bm-card,
.fi-panel-admin.dark .fi-wi-stats-overview-stat,
.dark .fi-panel-admin .fi-wi-stats-overview-stat,
.dark .fi-panel-admin .fi-section,
.dark .fi-panel-admin .fi-ta-ctn {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Kopjes binnen een kaart stonden op hetzelfde gewicht als de paginatitel
   (beide 700), waardoor er geen rangorde was tussen "waar ben ik" en "wat staat
   er in dit blok". De paginatitel blijft 700; kaartkopjes gaan een stap terug. */
.fi-panel-admin .bm-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   Donkere modus voor de diagnostiekpagina.

   De kaarten hierboven kregen vaste lichte kleuren. In donkere modus zou dat
   witte blokken met onleesbare tekst opleveren.
   --------------------------------------------------------------------------- */

.dark .bm-diag-check,
.dark .bm-log-entry {
    background: rgb(24, 24, 27);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .bm-diag-check__label,
.dark .bm-diag-check__value,
.dark .bm-diag-check__detail,
.dark .bm-log-entry__text,
.dark .bm-log-entry__body {
    color: rgba(255, 255, 255, 0.86);
}

.dark .bm-diag-check__hint,
.dark .bm-log-entry__level,
.dark .bm-log-entry__count,
.dark .bm-log-entry__time,
.dark .bm-stat-note {
    color: rgba(255, 255, 255, 0.55);
}

.dark .bm-diag-overall__status {
    color: var(--bm-diag-accent, rgba(255, 255, 255, 0.9));
}

.dark .bm-code {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
}

.dark .bm-log-entry__body {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* De statuskleuren zijn op donkergrijs te donker; een stap lichter houdt het
   onderscheid tussen kritiek, waarschuwing en in orde leesbaar. */
.dark .bm-diag-check--success,
.dark .bm-diag-overall--success { --bm-diag-accent: #4ade80; }
.dark .bm-diag-check--warning,
.dark .bm-diag-overall--warning { --bm-diag-accent: #fbbf24; }
.dark .bm-diag-check--danger,
.dark .bm-diag-overall--danger  { --bm-diag-accent: #f87171; }
.dark .bm-diag-check--gray,
.dark .bm-diag-overall--gray    { --bm-diag-accent: #a1a1aa; }

/* ---------------------------------------------------------------------------
   Dashboard: resultaat bovenaan

   De vier hero-tegels dragen de eerste indruk. Ze staan bewust op één rij met
   gelijke hoogte: het oog leest ze als één antwoord op "hoe doe ik het", niet
   als vier losse feiten. Onder elk getal staat de beweging of de dekking —
   32% koopblok betekent iets anders als het vorige week 44,6% was, en weer iets
   anders als het over 171 van 2.549 producten gemeten is.
   --------------------------------------------------------------------------- */

.bm-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.bm-hero-tile {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid #d1d5db;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.bm-hero-tile--primary { border-top-color: #0066cc; }
.bm-hero-tile--warning { border-top-color: #d97706; }

.bm-hero-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #6b7280;
}

.bm-hero-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.bm-hero-empty {
    font-size: 1.05rem;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0;
}

.bm-hero-trend {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Kleur zegt of het de goede kant op gaat; de driehoek zegt welke kant. Beide,
   zodat het ook klopt voor wie kleur niet onderscheidt. */
.bm-hero-trend--up { color: #16a34a; }
.bm-hero-trend--down { color: #dc2626; }
.bm-hero-trend--flat { color: #6b7280; }

.bm-hero-trend__period {
    font-weight: 400;
    color: #9ca3af;
}

.bm-hero-note {
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #9ca3af;
}

.bm-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
}

.bm-country-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.bm-country__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.bm-country__code {
    font-weight: 650;
    font-size: 0.875rem;
}

.bm-country__share {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.bm-bar {
    height: 0.4rem;
    border-radius: 9999px;
    background: #eef2f7;
    overflow: hidden;
    margin: 0.3rem 0 0.25rem;
}

.bm-bar__fill {
    height: 100%;
    border-radius: 9999px;
    background: #0066cc;
}

.bm-country__detail {
    font-size: 0.6875rem;
    color: #9ca3af;
}

.bm-gap-headline {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.bm-gap-headline__value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

.bm-gap-headline__label {
    font-size: 0.75rem;
    color: #9ca3af;
}

.bm-gap-bands {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.bm-gap-band {
    border-radius: 0.5rem;
    padding: 0.5rem 0.55rem;
    background: #f8fafc;
    border-left: 3px solid #d1d5db;
}

/* Dicht bij het koopblok is een kans, ver erboven is een keuze. Die twee horen
   niet dezelfde kleur te hebben. */
.bm-gap-band--near { border-left-color: #16a34a; }
.bm-gap-band--close { border-left-color: #d97706; }
.bm-gap-band--far { border-left-color: #9ca3af; }

.bm-gap-band__count {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bm-gap-band__label {
    display: block;
    font-size: 0.6875rem;
    color: #6b7280;
}

.bm-callout-inline {
    margin: 0.8rem 0 0;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    border-left: 3px solid #9ca3af;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #6b7280;
}

.bm-strategy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.bm-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.bm-strategy-item--wide { grid-column: span 2; }

.bm-strategy-value {
    font-size: 1.1rem;
    font-weight: 650;
    color: #0f172a;
    margin-top: 0.15rem;
}

.bm-strategy-detail {
    font-size: 0.6875rem;
    color: #9ca3af;
    margin-top: 0.2rem;
}

.bm-pill {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

.bm-pill--live { background: #dcfce7; color: #15803d; }
.bm-pill--muted { background: #f1f5f9; color: #64748b; }
.bm-pill--soft { background: #e0edff; color: #0047b3; }

@media (max-width: 640px) {
    .bm-strategy-item--wide { grid-column: span 1; }
    .bm-gap-bands { grid-template-columns: 1fr; }
}

.dark .bm-hero-tile,
.dark .bm-gap-band,
.dark .bm-callout-inline {
    background: rgb(24, 24, 27);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .bm-hero-value,
.dark .bm-gap-headline__value,
.dark .bm-strategy-value,
.dark .bm-gap-band__count {
    color: rgba(255, 255, 255, 0.9);
}

.dark .bm-bar { background: rgba(255, 255, 255, 0.1); }

/* Gap tiles on the dashboard link to the product list behind them. */
a.bm-gap-band--link { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
a.bm-gap-band--link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .12); }

/* Orders: one card per order, lines with thumbnails. */
.bm-order { border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff; overflow: hidden; }
.bm-order__head { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; padding: .75rem 1rem; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.bm-order__id { display: flex; align-items: center; gap: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.bm-order__open { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.bm-order__meta { font-size: .85rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.bm-order__totals { margin-left: auto; display: flex; gap: 1.25rem; font-size: .9rem; white-space: nowrap; }
.bm-order__lines { list-style: none; margin: 0; padding: 0; }
.bm-order__line { display: grid; grid-template-columns: 44px minmax(0, 1fr) 3rem 6rem 8rem; gap: .75rem; align-items: center; padding: .55rem 1rem; border-top: 1px solid #f1f5f9; }
.bm-order__line:first-child { border-top: 0; }
.bm-order__thumb { width: 44px; height: 44px; object-fit: contain; border-radius: .375rem; border: 1px solid #e5e7eb; background: #fff; }
.bm-order__thumb--empty { background: #f3f4f6; border-color: transparent; }
.bm-order__product { min-width: 0; }
.bm-order__qty { text-align: right; color: #64748b; }
.bm-order__amount { text-align: right; }
@media (max-width: 640px) {
    .bm-order__line { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .bm-order__line > .bm-order__amount:nth-child(4) { grid-column: 2; text-align: left; }
    .bm-order__totals { margin-left: 0; }
}

/* Zone headings on the dashboard: results above, plumbing below. */
.bm-zone-heading { padding: .25rem 0 0; border-top: 2px solid #e5e7eb; margin-top: .5rem; }
.bm-zone-heading__title { margin: .75rem 0 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; color: #0f172a; }
.bm-zone-heading__hint { margin: .15rem 0 0; font-size: .85rem; color: #64748b; }
.fi-wi-widget:first-child .bm-zone-heading, .fi-sc > .fi-wi-widget:first-of-type .bm-zone-heading { border-top: 0; margin-top: 0; }
.fi-wi-widget:has(.bm-zone-heading) { box-shadow: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; }

/* The repricer switch. */
.bm-switch-card--on { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, #fff); }
.bm-switch { display: inline-flex; align-items: center; gap: .75rem; padding: .4rem .9rem .4rem .4rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #f1f5f9; cursor: pointer; font: inherit; font-weight: 700; color: #334155; }
.bm-switch__knob { width: 2.6rem; height: 1.5rem; border-radius: 999px; background: #94a3b8; position: relative; transition: background .15s ease; }
.bm-switch__knob::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.bm-switch--on { border-color: #16a34a; background: #dcfce7; color: #166534; }
.bm-switch--on .bm-switch__knob { background: #16a34a; }
.bm-switch--on .bm-switch__knob::after { transform: translateX(1.1rem); }
.bm-switch:disabled { opacity: .5; cursor: not-allowed; }
a.bm-hero-tile--link { text-decoration: none; color: inherit; display: block; transition: transform .12s ease, box-shadow .12s ease; }
a.bm-hero-tile--link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .12); }

/* Small inline forms (return-cost rates, bulk actions) and the P&L net row. */
.bm-input { padding: .35rem .5rem; border: 1px solid #cbd5e1; border-radius: .375rem; font: inherit; background: #fff; }
.bm-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; font: inherit; font-weight: 600; color: #334155; cursor: pointer; }
.bm-btn:hover { background: #f1f5f9; }
.bm-btn--primary { background: #0f172a; border-color: #0f172a; color: #fff; }
.bm-btn--primary:hover { background: #1e293b; }
.bm-btn:disabled { opacity: .5; cursor: not-allowed; }
.bm-pnl-net td { border-top: 2px solid #0f172a; background: #f8fafc; }
.bm-reason-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.bm-reason-card { display: block; text-decoration: none; color: inherit; border: 1px solid #e5e7eb; border-radius: .75rem; padding: .85rem 1rem; background: #fff; transition: transform .12s ease, box-shadow .12s ease; }
.bm-reason-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .12); }
.bm-reason-card--active { border-color: #0f172a; box-shadow: inset 0 0 0 1px #0f172a; }
.bm-reason-card__count { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.bm-reason-card__label { font-size: .85rem; color: #334155; margin-top: .2rem; }
.bm-reason-card__sub { font-size: .75rem; color: #64748b; margin-top: .3rem; }
.bm-bulk-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .75rem 1rem; border-top: 1px solid #e5e7eb; background: #fff; box-shadow: 0 -4px 12px rgba(15,23,42,.06); }
.bm-confirm { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.bm-confirm__actions { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
[x-cloak] { display: none !important; }


/* Preview accounts: read-only by arrangement. Sits above the page like the impersonation bar,
   because it is a standing fact about the session, not a property of one widget. Info-blue
   rather than warning-amber — nothing is wrong, this is the deal the seller agreed to. */
.bm-preview-banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    color: #1e3a8a;
    font-size: 0.8125rem;
}

.bm-preview-banner__badge {
    flex: none;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: #1d4ed8;
    color: #fff;
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
    .bm-preview-banner {
        background: #172554;
        border-bottom-color: #1e40af;
        color: #dbeafe;
    }
}

/* Said where the credentials are asked for, not only on the trust page. */
.bm-credential-notice {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-left: 3px solid #1d4ed8;
    background: #f8fafc;
    color: #334155;
    font-size: 0.8125rem;
    line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
    .bm-credential-notice {
        background: #0f172a;
        color: #cbd5e1;
    }
}