body.demo1 .dashboard-demo1 {
    min-width: 0;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}

body.demo1 .dashboard-demo1 *,
body.demo1 .dashboard-demo1 *::before,
body.demo1 .dashboard-demo1 *::after {
    box-sizing: border-box;
}

body.demo1 .dashboard-demo1 a,
body.demo1 .dashboard-demo1 a:hover,
body.demo1 .dashboard-demo1 a:focus,
body.demo1 .dashboard-demo1 a:active {
    text-decoration: none;
}

body.demo1 .dashboard-demo1 .kt-card {
    min-width: 0;
}

body.demo1 .dashboard-demo1 .kt-card-header {
    min-height: 3.75rem;
    gap: .75rem;
    padding: .75rem 1.25rem;
}

body.demo1 .dashboard-demo1 .kt-card-title {
    font-size: 1rem;
    font-weight: 600;
}

body.demo1 .dashboard-period-bar {
    display: grid;
    grid-template-columns: minmax(15rem, 1.2fr) repeat(2, minmax(12rem, 1fr));
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--background);
}

body.demo1 .dashboard-period-primary,
body.demo1 .dashboard-period-detail {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
}

body.demo1 .dashboard-period-primary,
body.demo1 .dashboard-period-detail:not(:last-child) {
    border-inline-end: 1px solid var(--border);
}

body.demo1 .dashboard-period-icon,
body.demo1 .dashboard-card-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: var(--primary-light);
    color: var(--primary);
}

body.demo1 .dashboard-period-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
}

body.demo1 .dashboard-card-icon {
    width: 2rem;
    height: 2rem;
    font-size: .95rem;
}

body.demo1 .dashboard-card-icon-success {
    background: var(--success-light);
    color: var(--success);
}

body.demo1 .dashboard-period-primary div,
body.demo1 .dashboard-period-detail {
    min-width: 0;
}

body.demo1 .dashboard-period-primary span:not(.dashboard-period-icon),
body.demo1 .dashboard-period-detail > span {
    display: block;
    margin-bottom: .2rem;
    color: var(--secondary-foreground);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .035em;
    line-height: 1.15;
    text-transform: uppercase;
}

body.demo1 .dashboard-period-primary strong,
body.demo1 .dashboard-period-detail strong {
    display: block;
    overflow: hidden;
    color: var(--foreground);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.demo1 .business-kpi-grid,
body.demo1 .network-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

body.demo1 .dashboard-kpi,
body.demo1 .network-kpi {
    display: flex;
    min-width: 0;
    min-height: 9.25rem;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--background);
    color: var(--foreground);
    padding: 1rem;
    transition: border-color .15s ease;
}

body.demo1 .dashboard-kpi:hover,
body.demo1 .dashboard-kpi:focus-visible,
body.demo1 .network-kpi:hover,
body.demo1 .network-kpi:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
    color: var(--foreground);
    outline: 0;
}

body.demo1 .dashboard-kpi-top,
body.demo1 .network-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--secondary-foreground);
    font-size: .6875rem;
    font-weight: 500;
}

body.demo1 .dashboard-kpi-icon,
body.demo1 .network-kpi-icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 1rem;
}

body.demo1 .business-kpi-green .dashboard-kpi-icon,
body.demo1 .network-kpi-green .network-kpi-icon {
    background: var(--success-light);
    color: var(--success);
}

body.demo1 .business-kpi-violet .dashboard-kpi-icon,
body.demo1 .network-kpi-violet .network-kpi-icon {
    background: #f1edff;
    color: #6d4aff;
}

body.demo1 .business-kpi-amber .dashboard-kpi-icon,
body.demo1 .network-kpi-amber .network-kpi-icon {
    background: var(--warning-light);
    color: #c77700;
}

body.demo1 .dashboard-kpi-label,
body.demo1 .network-kpi-label {
    margin-top: .8rem;
    color: var(--secondary-foreground);
    font-size: .75rem;
    font-weight: 500;
}

body.demo1 .dashboard-kpi-value,
body.demo1 .network-kpi-value {
    margin-top: .3rem;
    overflow: hidden;
    color: var(--foreground);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.demo1 .dashboard-kpi-foot,
body.demo1 .network-kpi-foot {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
    padding-top: .65rem;
    color: var(--secondary-foreground);
    font-size: .6875rem;
    line-height: 1.25;
}

body.demo1 .dashboard-kpi-foot > span,
body.demo1 .network-kpi-foot > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.demo1 .dashboard-meter {
    height: .3rem;
    margin-top: .65rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--muted);
}

body.demo1 .dashboard-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

body.demo1 .business-hero-grid,
body.demo1 .network-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(17rem, .8fr);
    gap: 1rem;
}

body.demo1 .business-detail-grid,
body.demo1 .network-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body.demo1 .network-access-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

body.demo1 .dashboard-chart-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
}

body.demo1 .dashboard-chart-summary > div {
    min-width: 0;
    padding: .8rem 1.1rem;
}

body.demo1 .dashboard-chart-summary > div:not(:last-child) {
    border-inline-end: 1px solid var(--border);
}

body.demo1 .dashboard-chart-summary span,
body.demo1 .dashboard-chart-summary strong {
    display: block;
}

body.demo1 .dashboard-chart-summary span {
    color: var(--secondary-foreground);
    font-size: .6875rem;
    font-weight: 500;
}

body.demo1 .dashboard-chart-summary strong {
    margin-top: .25rem;
    overflow: hidden;
    color: var(--foreground);
    font-size: .9375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.demo1 .dashboard-chart,
body.demo1 .network-chart {
    position: relative;
    height: 16rem;
    min-width: 0;
}

body.demo1 .dashboard-chart-lg,
body.demo1 .network-chart-lg {
    height: 20rem;
}

body.demo1 .network-chart-sm {
    height: 13.5rem;
}

body.demo1 .network-chart-empty {
    display: flex;
    height: 100%;
    min-height: 10rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .45rem;
    border: 1px dashed var(--border);
    border-radius: .625rem;
    background: color-mix(in srgb, var(--muted) 35%, var(--background));
    color: var(--secondary-foreground);
    text-align: center;
}

body.demo1 .network-chart-empty i { color: var(--primary); font-size: 1.5rem; }
body.demo1 .network-chart-empty strong { color: var(--foreground); font-size: .875rem; font-weight: 600; }
body.demo1 .network-chart-empty span { max-width: 18rem; font-size: .75rem; line-height: 1.5; }

body.demo1 .business-highlights-card,
body.demo1 .business-operation-card {
    min-width: 0;
}

body.demo1 .business-highlight-primary {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

body.demo1 .business-highlight-primary span,
body.demo1 .business-highlight-primary strong {
    display: block;
}

body.demo1 .business-mini-chart-block {
    padding: .7rem 1.25rem .45rem;
    border-bottom: 1px solid var(--border);
}

body.demo1 .business-mini-chart-label {
    display: block;
    color: var(--secondary-foreground);
    font-size: .6875rem;
    font-weight: 500;
}

body.demo1 .business-mini-chart {
    position: relative;
    height: 7rem;
    min-width: 0;
}

body.demo1 .business-highlight-primary span {
    color: var(--secondary-foreground);
    font-size: .75rem;
}

body.demo1 .business-highlight-primary strong {
    margin-top: .35rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.03em;
}

body.demo1 .business-highlight-list {
    padding: .25rem 1.25rem;
}

body.demo1 .business-highlight-list > div,
body.demo1 .network-health-list > a,
body.demo1 .network-health-list > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--secondary-foreground);
    font-size: .75rem;
}

body.demo1 .business-highlight-list > div:last-child,
body.demo1 .network-health-list > a:last-child,
body.demo1 .network-health-list > div:last-child {
    border-bottom: 0;
}

body.demo1 .business-highlight-list strong,
body.demo1 .network-health-list strong {
    color: var(--foreground);
    font-weight: 600;
}

body.demo1 .business-health-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: auto;
    padding: .8rem 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--secondary-foreground);
    font-size: .6875rem;
}

body.demo1 .business-health-footer > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

body.demo1 .dashboard-dot {
    display: inline-block;
    width: .4rem;
    height: .4rem;
    border-radius: 999px;
}

body.demo1 .dashboard-dot-green {
    background: var(--success);
}

body.demo1 .dashboard-dot-amber {
    background: var(--warning);
}

body.demo1 .business-revenue-share {
    display: flex;
    height: .35rem;
    margin: 1.1rem 1.25rem 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--muted);
}

body.demo1 .business-operation-chart {
    position: relative;
    height: 8.25rem;
    min-width: 0;
    padding: .25rem 1.25rem 0;
}

body.demo1 .business-share-direct {
    background: var(--primary);
}

body.demo1 .business-share-operator {
    background: #6d4aff;
}

body.demo1 .business-operation-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1rem 1.25rem 1.25rem;
}

body.demo1 .business-operation-columns > div {
    min-width: 0;
}

body.demo1 .business-operation-columns > div + div {
    padding-inline-start: 1.15rem;
    border-inline-start: 1px solid var(--border);
}

body.demo1 .business-operation-columns > div:first-child {
    padding-inline-end: 1.15rem;
}

body.demo1 .business-operation-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--foreground);
    font-size: .8125rem;
    font-weight: 600;
}

body.demo1 .business-operation-columns dl {
    margin: .65rem 0 0;
}

body.demo1 .business-operation-columns dl > div {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .75rem;
}

body.demo1 .business-operation-columns dl > div:last-child {
    border-bottom: 0;
}

body.demo1 .business-operation-columns dt {
    color: var(--secondary-foreground);
    font-weight: 400;
}

body.demo1 .business-operation-columns dd {
    margin: 0;
    color: var(--foreground);
    font-weight: 600;
    text-align: end;
}

body.demo1 .business-distribution-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.demo1 .business-distribution-grid > a {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.15rem;
    color: var(--foreground);
}

body.demo1 .business-distribution-grid > a:not(:last-child) {
    border-inline-end: 1px solid var(--border);
}

body.demo1 .business-distribution-icon {
    display: inline-flex;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: var(--primary-light);
    color: var(--primary);
}

body.demo1 .business-distribution-grid span,
body.demo1 .business-distribution-grid strong,
body.demo1 .business-distribution-grid small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.demo1 .business-distribution-grid div > span,
body.demo1 .business-distribution-grid small {
    color: var(--secondary-foreground);
    font-size: .6875rem;
}

body.demo1 .business-distribution-grid strong {
    margin: .2rem 0;
    font-size: .875rem;
    font-weight: 600;
}

body.demo1 .network-inventory-card .kt-card-content {
    padding: .75rem 1.25rem 1rem;
}

body.demo1 .network-health-list {
    margin-top: .4rem;
}

body.demo1 .network-health-list > a:hover {
    color: var(--primary);
}

body.demo1 .network-health-list span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .45rem;
}

body.demo1 .network-health-list i {
    color: var(--primary);
}

body.demo1 .network-panel-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.1rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

body.demo1 .network-panel-summary > div {
    min-width: 5.5rem;
}

body.demo1 .network-panel-summary span,
body.demo1 .network-panel-summary strong {
    display: block;
}

body.demo1 .network-panel-summary span {
    color: var(--secondary-foreground);
    font-size: .6875rem;
}

body.demo1 .network-panel-summary strong {
    margin-top: .15rem;
    color: var(--foreground);
    font-size: .875rem;
    font-weight: 600;
}

@media (max-width: 1199px) {
    body.demo1 .business-kpi-grid,
    body.demo1 .network-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.demo1 .business-distribution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.demo1 .business-distribution-grid > a:nth-child(2) {
        border-inline-end: 0;
    }

    body.demo1 .business-distribution-grid > a:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 991px) {
    body.demo1 .dashboard-period-bar,
    body.demo1 .business-hero-grid,
    body.demo1 .network-hero-grid,
    body.demo1 .network-access-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.demo1 .dashboard-period-primary,
    body.demo1 .dashboard-period-detail:not(:last-child) {
        border-inline-end: 0;
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 639px) {
    body.demo1 .dashboard-demo1 {
        gap: 1rem;
    }

    body.demo1 .business-detail-grid,
    body.demo1 .network-comparison-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.demo1 .dashboard-chart-lg,
    body.demo1 .network-chart-lg {
        height: 16rem;
    }

    body.demo1 .dashboard-chart,
    body.demo1 .network-chart {
        height: 14.5rem;
    }

    body.demo1 .dashboard-chart-summary > div,
    body.demo1 .network-panel-summary,
    body.demo1 .business-operation-columns {
        padding-inline: .85rem;
    }

    body.demo1 .business-distribution-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.demo1 .business-distribution-grid > a,
    body.demo1 .business-distribution-grid > a:nth-child(2) {
        border-inline-end: 0;
        border-bottom: 1px solid var(--border);
    }

    body.demo1 .business-distribution-grid > a:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 520px) {
    body.demo1 .business-kpi-grid,
    body.demo1 .network-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    body.demo1 .dashboard-kpi,
    body.demo1 .network-kpi {
        min-height: 8.7rem;
        padding: .85rem;
    }

    body.demo1 .dashboard-kpi-value,
    body.demo1 .network-kpi-value {
        font-size: 1.25rem;
    }

    body.demo1 .dashboard-kpi-icon,
    body.demo1 .network-kpi-icon {
        width: 2rem;
        height: 2rem;
    }

    body.demo1 .dashboard-kpi-foot > .ms-auto,
    body.demo1 .network-kpi-foot > .ms-auto {
        display: none;
    }

    body.demo1 .business-operation-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    body.demo1 .business-operation-chart {
        height: 9.25rem;
        padding-inline: .85rem;
    }

    body.demo1 .business-operation-columns > div:first-child {
        padding-inline-end: 0;
        padding-bottom: .9rem;
    }

    body.demo1 .business-operation-columns > div + div {
        padding-top: .9rem;
        padding-inline-start: 0;
        border-top: 1px solid var(--border);
        border-inline-start: 0;
    }
}

@media (max-width: 340px) {
    body.demo1 .business-kpi-grid,
    body.demo1 .network-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Group admin overview dashboard. Keep every rule scoped so the
   dedicated business and network dashboards retain their own layout. */
body.demo1 .dashboard-demo1.overview-dashboard {
    --overview-brand: #175cd3;
    --overview-violet: #6941c6;
    --overview-cyan: #0e7490;
    --overview-success: #15803d;
    --overview-warning: #b45309;
    --overview-danger: #b91c1c;
    --overview-ink: #0f172a;
    --overview-muted: #475569;
    --overview-line: #e2e8f0;
    --overview-canvas: #f8fafc;
    --overview-panel-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .055);
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    padding-bottom: .5rem;
    font-variant-numeric: tabular-nums;
}

body.demo1 .dashboard-demo1.overview-dashboard::before {
    position: absolute;
    z-index: -1;
    inset: -1.5rem -1rem auto;
    height: 20rem;
    background:
        radial-gradient(circle at 7% 0%, rgba(23, 92, 211, .09), transparent 34%),
        radial-gradient(circle at 92% 10%, rgba(105, 65, 198, .07), transparent 30%);
    pointer-events: none;
    content: '';
}

body.demo1 .overview-page-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .75rem;
}

body.demo1 .overview-page-heading > span {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .75rem !important;
    background: linear-gradient(145deg, #175cd3, #4f46e5) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .2);
}

body.demo1 .overview-page-heading h1 {
    overflow-wrap: anywhere;
}

body.demo1 .overview-add-customer {
    min-height: 44px;
    border-color: #175cd3 !important;
    background: linear-gradient(135deg, #175cd3, #4f46e5) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(23, 92, 211, .18);
}

body.demo1 .overview-add-customer:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #175cd3 !important;
}

body.demo1 .overview-page-heading h1 {
    margin: 0;
    color: var(--foreground);
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.2;
}

body.demo1 :is(.dashboard-preview-customize, .dashboard-preview-save, .dashboard-preview-cancel, .dashboard-preview-reset) {
    min-width: 44px;
    min-height: 44px;
}

body.demo1 :is(.dashboard-preview-customize, .dashboard-preview-save, .dashboard-preview-cancel, .dashboard-preview-reset):focus-visible {
    outline: 3px solid var(--primary) !important;
    outline-offset: 2px;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-section {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(99, 102, 241, .22);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 92% -20%, rgba(34, 211, 238, .28), transparent 36%),
        radial-gradient(circle at 8% 125%, rgba(99, 102, 241, .34), transparent 44%),
        linear-gradient(135deg, #10182d 0%, #182450 56%, #172554 100%);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .16);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-section .dashboard-section-heading {
    margin: 0 0 .85rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-section .dashboard-section-heading h2 {
    color: #f8fafc;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: .45rem;
    color: #cbd5e1;
    font-size: .75rem;
    font-weight: 550;
    line-height: 1.3;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness::before {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #67e8f9;
    box-shadow: 0 0 0 .2rem rgba(103, 232, 249, .13);
    content: '';
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness[data-state="fresh"]::before {
    background: #6ee7b7;
    box-shadow: 0 0 0 .2rem rgba(110, 231, 183, .13);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness[data-state="error"]::before {
    background: #fda4af;
    box-shadow: 0 0 0 .2rem rgba(253, 164, 175, .13);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness[data-state="paused"]::before {
    background: #fcd34d;
    box-shadow: 0 0 0 .2rem rgba(252, 211, 77, .13);
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-section-heading h2 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-section-heading h2::before {
    width: .25rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: .25rem;
    background: linear-gradient(180deg, #2563eb, #4f46e5);
    box-shadow: none;
    content: '';
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-section .dashboard-section-heading h2::before {
    background: linear-gradient(180deg, #67e8f9, #818cf8);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-surface {
    --overview-surface-accent: var(--primary);
    position: relative;
    border-color: color-mix(in srgb, var(--overview-surface-accent) 20%, var(--overview-line)) !important;
    border-block-start: 1px solid color-mix(in srgb, var(--overview-surface-accent) 20%, var(--overview-line)) !important;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--overview-surface-accent) 11%, transparent), transparent 48%),
        var(--background) !important;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--overview-surface-accent) 7%, transparent);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-surface::before {
    position: absolute;
    inset-block: 1rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--overview-surface-accent);
    content: '';
}

body.demo1 .dashboard-demo1.overview-dashboard a.overview-surface:hover,
body.demo1 .dashboard-demo1.overview-dashboard a.overview-surface:focus-visible {
    border-color: color-mix(in srgb, var(--overview-surface-accent) 38%, var(--overview-line)) !important;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--overview-surface-accent) 14%, transparent);
    transform: translateY(-2px);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-surface-primary { --overview-surface-accent: var(--overview-brand); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-surface-success { --overview-surface-accent: var(--overview-success); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-surface-warning { --overview-surface-accent: var(--overview-warning); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-surface-danger { --overview-surface-accent: var(--overview-danger); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-surface-info { --overview-surface-accent: var(--overview-cyan); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-surface-purple { --overview-surface-accent: var(--overview-violet); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-surface-muted { --overview-surface-accent: var(--secondary-foreground); }

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-section .overview-surface {
    border-color: color-mix(in srgb, var(--overview-surface-accent) 24%, var(--overview-line)) !important;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--overview-surface-accent) 13%, transparent), transparent 52%),
        var(--background) !important;
    box-shadow: 0 10px 28px rgba(3, 7, 18, .16);
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .overview-surface {
    --overview-surface-accent: #6ee7b7;
    border-color: rgba(255, 255, 255, .2) !important;
    background: linear-gradient(135deg, #065f46, #047857) !important;
    box-shadow: 0 14px 32px rgba(5, 150, 105, .28);
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .overview-surface::before {
    background: rgba(255, 255, 255, .7);
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] :is(.metric-label, .metric-val, .metric-unit) {
    color: #fff;
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .dashboard-metric-icon {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="upcoming-suspension"][data-signal="clear"] .overview-surface {
    --overview-surface-accent: var(--overview-success);
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="upcoming-suspension"][data-signal="clear"] :is(.metric-val, .dashboard-metric-icon) {
    color: var(--overview-success);
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="upcoming-suspension"][data-signal="clear"] .dashboard-metric-icon {
    background: #dcfce7;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-customized > .kt-card.overview-surface {
    border-inline-start: .25rem solid var(--widget-accent) !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-customized > .kt-card.overview-surface::before {
    display: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid,
body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot,
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid {
    gap: 1rem;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] {
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--overview-line);
    border-radius: 1rem;
    background: var(--overview-line);
    box-shadow: var(--overview-panel-shadow);
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard .dashboard-preview-grid[data-zone="customers"] > [data-widget-id] > .overview-surface {
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--overview-surface-accent) 8%, transparent), transparent 50%),
        var(--background) !important;
    box-shadow: none;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard .dashboard-preview-grid[data-zone="customers"] > [data-widget-id].dashboard-preview-customized > .overview-surface {
    border-inline-start: .25rem solid var(--widget-accent) !important;
    border-inline-start-color: var(--widget-accent) !important;
}

html[dir="ltr"] body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-customized > .kt-card.overview-surface {
    border-left: .25rem solid var(--widget-accent) !important;
}

html[dir="rtl"] body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-customized > .kt-card.overview-surface {
    border-right: .25rem solid var(--widget-accent) !important;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard .dashboard-preview-grid[data-zone="customers"] > [data-widget-id] > .overview-surface:focus-visible {
    outline-color: var(--overview-brand) !important;
    outline-offset: -3px;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-metric-copy {
    min-width: 0;
    flex: 1 1 auto;
}

body.demo1 .dashboard-demo1.overview-dashboard .metric-amount {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .35rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .metric-unit {
    flex: 0 0 auto;
    font-size: .75rem;
}

body.demo1 .dashboard-demo1.overview-dashboard :is(.dashboard-action-label, .insight-badge, .dashboard-comparison-note) {
    font-size: .75rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-metric-card .kt-card-content > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

body.demo1 .dashboard-demo1.overview-dashboard .metric-val,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-comparison-value,
body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-value {
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-loading-value {
    color: var(--secondary-foreground);
    font-variant-numeric: tabular-nums;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-section-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--overview-canvas) 70%, var(--background));
    color: var(--overview-muted);
    font-size: .75rem;
    font-weight: 600;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-section-link:hover {
    border-color: color-mix(in srgb, var(--overview-brand) 38%, var(--border));
    background: #eff6ff;
    color: var(--overview-brand);
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-action-card {
    border-color: var(--overview-line) !important;
    background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--overview-canvas) 72%, var(--background))) !important;
}

body.demo1 .dashboard-demo1.overview-dashboard a.dashboard-action-card:hover,
body.demo1 .dashboard-demo1.overview-dashboard a.dashboard-action-card:focus-visible {
    border-color: color-mix(in srgb, var(--overview-brand) 34%, var(--overview-line)) !important;
    box-shadow: 0 12px 28px rgba(23, 92, 211, .09);
    transform: translateY(-2px);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-panel,
body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-panel,
body.demo1 .dashboard-demo1.overview-dashboard .overview-network-panel {
    min-width: 0;
    overflow: hidden;
    border-color: var(--overview-line) !important;
    border-radius: 1rem !important;
    box-shadow: var(--overview-panel-shadow);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--overview-line);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-item {
    display: flex;
    min-width: 0;
    min-height: 8.25rem;
    flex-direction: column;
    justify-content: center;
    gap: .45rem;
    padding: 1.05rem 1.15rem;
    background:
        linear-gradient(145deg, var(--background), color-mix(in srgb, var(--overview-canvas) 58%, var(--background)));
    color: var(--foreground);
    transition: background-color .16s ease;
}

body.demo1 .dashboard-demo1.overview-dashboard a.overview-performance-item:hover {
    background: color-mix(in srgb, var(--overview-brand) 6%, var(--background));
    color: var(--foreground);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .6rem;
    color: var(--overview-muted);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .045em;
    line-height: 1.25;
    text-transform: uppercase;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-label .insight-icon {
    width: 2.15rem;
    height: 2.15rem;
    background: var(--muted);
    font-size: .95rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-value {
    color: var(--foreground);
    font-weight: 700;
    letter-spacing: -.035em;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-delta {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: .3rem;
    color: var(--overview-muted);
    font-size: .75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-delta.is-positive,
body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-delta.text-success {
    color: var(--success);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-delta.is-negative,
body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-delta.text-danger {
    color: var(--danger);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-charts {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-chart {
    min-width: 0;
    padding: 0;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-chart + .overview-finance-chart {
    border-inline-start: 1px solid var(--border);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-chart .insight-chart {
    height: 18rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .insight-card {
    border-color: var(--overview-line) !important;
    border-radius: 1rem !important;
    box-shadow: var(--overview-panel-shadow);
}

body.demo1 .dashboard-demo1.overview-dashboard .insight-head {
    background: linear-gradient(180deg, var(--background), color-mix(in srgb, var(--overview-canvas) 68%, var(--background)));
}

body.demo1 .dashboard-demo1.overview-dashboard .insight-title h3 {
    font-size: .9375rem;
    font-weight: 650;
}

body.demo1 .dashboard-demo1.overview-dashboard .insight-title small,
body.demo1 .dashboard-demo1.overview-dashboard .insight-chip {
    color: var(--overview-muted);
    font-size: .75rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-connectivity-chart {
    isolation: isolate;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-donut-center {
    position: absolute;
    z-index: 1;
    inset: 50% auto auto 50%;
    display: flex;
    width: 7rem;
    min-height: 4rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-donut-center[hidden] {
    display: none !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-donut-center strong {
    color: var(--overview-ink);
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-donut-center span {
    margin-top: .35rem;
    color: var(--overview-muted);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-summary {
    min-width: 0;
    padding: 1rem 1.15rem 1.15rem;
    border-inline-end: 1px solid var(--border);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item {
    display: flex;
    min-width: 0;
    min-height: 4.75rem;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--overview-canvas) 70%, var(--background));
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item span,
body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item small {
    color: var(--overview-muted);
    font-size: .75rem;
    line-height: 1.3;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item strong {
    max-width: 100%;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item em {
    color: var(--overview-muted);
    font-size: .75rem;
    font-style: normal;
    line-height: 1.3;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item.is-warning {
    border-color: color-mix(in srgb, var(--overview-warning) 42%, var(--border));
    background: color-mix(in srgb, #fef3c7 62%, var(--background));
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item.is-warning em {
    color: var(--overview-warning);
    font-weight: 600;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-empty {
    display: flex;
    min-height: 10rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: .625rem;
    background: color-mix(in srgb, var(--muted) 32%, var(--background));
    color: var(--secondary-foreground);
    font-size: .75rem;
    line-height: 1.45;
    text-align: center;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-empty i {
    color: var(--primary);
    font-size: 1.4rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-empty strong {
    color: var(--foreground);
    font-size: .8125rem;
    font-weight: 650;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout > .insight-body,
body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout > .overview-network-chart {
    min-width: 0;
    padding: 1rem 1.15rem 1.15rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-chart-state {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    min-height: 8rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: .625rem;
    background: color-mix(in srgb, var(--muted) 42%, var(--background));
    color: var(--secondary-foreground);
    font-size: .75rem;
    line-height: 1.45;
    text-align: center;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-chart-state[hidden],
body.demo1 .dashboard-demo1.overview-dashboard canvas[hidden] {
    display: none !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-chart-state i {
    color: var(--primary);
    font-size: 1.4rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-chart-state strong {
    color: var(--foreground);
    font-size: .8125rem;
    font-weight: 650;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-chart-state[data-state="error"] {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    background: color-mix(in srgb, var(--danger-light) 24%, var(--background));
    color: var(--danger);
}

/* The saved row color is an accent, not a card background. This preserves
   readable semantic text colors for every custom color value. */
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card {
    border-inline-start: .25rem solid var(--row-background) !important;
    background: var(--background) !important;
    color: var(--foreground) !important;
    box-shadow: var(--overview-panel-shadow);
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .insight-head,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .insight-body {
    background: var(--background) !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .insight-foot {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--muted) 45%, var(--background)) !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .metric-label,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-action-label,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-action-arrow,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .insight-title p,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .insight-badge,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .insight-chip,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card small {
    color: var(--secondary-foreground) !important;
    opacity: 1;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .metric-val,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-action-title,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .insight-title h3 {
    color: var(--foreground) !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-value-primary { color: var(--dashboard-blue) !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-value-success { color: #079447 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-value-warning { color: #b86300 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-value-danger { color: var(--danger) !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-value-info { color: #087fb7 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-value-purple { color: var(--dashboard-purple) !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .dashboard-value-muted { color: var(--secondary-foreground) !important; }

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-row-colored > .kt-card .insight-chart {
    padding: 0;
    background: transparent;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-grid.dashboard-preview-zone-accented {
    padding-inline-start: .5rem;
    border-inline-start: 3px solid var(--zone-accent);
}

/* Dashboard customization is usable by touch and keyboard. */
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-editor button,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-editor input[type="color"],
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-row-editor input,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-row-swatch {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-editor select,
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-row-clear {
    min-height: 44px;
    padding-block: .45rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-row-swatches {
    flex-wrap: wrap;
}

body.demo1 .dashboard-demo1.overview-dashboard :where(a, button, input, select, [tabindex]):focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #175cd3 !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-section :where(a, button, input, select, [tabindex]):focus-visible {
    outline-color: #fff !important;
    box-shadow: 0 0 0 5px #0f172a, 0 0 0 7px #a5f3fc !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-item:focus-visible {
    outline-color: var(--overview-brand) !important;
    outline-offset: -3px;
}

@media (max-width: 1199px) {
    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-layout-grid > * {
        grid-column: span var(--widget-tablet-span, 6) / span var(--widget-tablet-span, 6);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .dashboard-preview-grid > [data-widget-id] {
        display: flex;
        flex-direction: column;
    }

    body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .dashboard-preview-grid > [data-widget-id] > .kt-card {
        height: auto;
        flex: 1 0 auto;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-grid[data-zone="analytics"] > *,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-chart-grid > * {
        grid-column: 1 / -1;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-charts,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-chart + .overview-finance-chart {
        border-top: 1px solid var(--border);
        border-inline-start: 0;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-summary {
        border-bottom: 1px solid var(--border);
        border-inline-end: 0;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-chart .insight-chart {
        height: 16rem;
    }
}

@media (max-width: 639px) {
    body.demo1.dashboard-preview-editing .demo1-content-title + .flex {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    body.demo1 .overview-page-heading {
        align-items: flex-start;
    }

    body.demo1 .overview-page-heading h1 {
        font-size: 1.125rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-layout-grid > * {
        grid-column: span var(--widget-mobile-span, 12) / span var(--widget-mobile-span, 12);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-section {
        padding: .75rem;
        border-radius: 1rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-layout-grid,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-actions-grid {
        gap: .75rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-section-heading {
        flex-wrap: wrap;
        gap: .5rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-metric-card .kt-card-content {
        min-width: 0;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .metric-label {
        font-size: .75rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .metric-val,
    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-comparison-value,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-value {
        font-size: clamp(1.15rem, 6vw, 1.45rem);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-item,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-summary,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout > .insight-body,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout > .overview-network-chart {
        padding-inline: .9rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-grid {
        gap: .5rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-chart .insight-chart {
        height: 14.5rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-editor,
    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-row-editor {
        justify-content: flex-start;
    }
}

@media (max-width: 380px) {
    body.demo1 .overview-page-heading {
        gap: .6rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-layout-grid > * {
        grid-column: 1 / -1 !important;
    }

    body.demo1 .dashboard-demo1.overview-dashboard :is(.overview-priority-grid, .dashboard-preview-grid[data-zone="customers"]) > * {
        grid-column: span 6 / span 6 !important;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-grid,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-summary,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout > .insight-body,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout > .overview-network-chart {
        padding-inline: .75rem;
    }

}

.dark body.demo1 .dashboard-demo1.overview-dashboard {
    --overview-brand: #60a5fa;
    --overview-violet: #a78bfa;
    --overview-cyan: #67e8f9;
    --overview-success: #86efac;
    --overview-warning: #fcd34d;
    --overview-danger: #fda4af;
    --overview-ink: #f8fafc;
    --overview-muted: #cbd5e1;
    --overview-line: #334155;
    --overview-canvas: #0f172a;
    --overview-panel-shadow: 0 1px 2px rgba(0, 0, 0, .24), 0 14px 34px rgba(0, 0, 0, .18);
    --dashboard-blue: #60a5fa;
    --dashboard-green: #4ade80;
    --dashboard-orange: #fbbf24;
    --dashboard-red: #fb7185;
    --dashboard-purple: #a78bfa;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard :is(.dashboard-tone-primary, .dashboard-tone-info) {
    background: rgba(96, 165, 250, .14);
    color: #93c5fd;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-success {
    background: rgba(74, 222, 128, .13);
    color: #86efac;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-warning {
    background: rgba(251, 191, 36, .14);
    color: #fcd34d;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-danger {
    background: rgba(251, 113, 133, .14);
    color: #fda4af;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-purple {
    background: rgba(167, 139, 250, .14);
    color: #c4b5fd;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-primary,
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-info { color: #93c5fd; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-success { color: #86efac; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-warning { color: #fcd34d; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-danger { color: #fda4af; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-purple { color: #c4b5fd; }

.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-delta .text-success { color: #86efac !important; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-delta .text-danger { color: #fda4af !important; }

.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-section-link:hover,
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-section-link:focus-visible {
    background: rgba(96, 165, 250, .12);
    color: #93c5fd;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="upcoming-suspension"][data-signal="clear"] .dashboard-metric-icon {
    background: rgba(134, 239, 172, .13);
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item.is-warning {
    border-color: rgba(251, 191, 36, .4);
    background: rgba(251, 191, 36, .09);
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item.is-warning em {
    color: #fcd34d;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-chart-state[data-state="error"] {
    border-color: rgba(251, 113, 133, .4);
    background: rgba(251, 113, 133, .09);
    color: #fda4af;
}

/* Reference-led bento overview (September 2026).
   The visual language follows the supplied finance-dashboard reference while
   retaining the existing widget, chart, link, and customization contracts. */
body.demo1 .dashboard-demo1.overview-dashboard {
    --bento-canvas: #c3c5cc;
    --bento-surface: #ffffff;
    --bento-surface-soft: #f3f3f3;
    --bento-border: #d0d2d7;
    --bento-ink: #222326;
    --bento-muted: #565b66;
    --bento-charcoal: #282927;
    --bento-blue: #005efc;
    --bento-lime: #c3fb2a;
    --bento-green: #15803d;
    --bento-red: #b91c1c;
    --bento-gap: .8125rem;
    --bento-radius: .9375rem;
    margin-inline: -.5rem;
    padding: 1rem;
    border: 1px solid #b9bbc2;
    border-radius: 1.25rem;
    background: var(--bento-canvas);
    color: var(--bento-ink);
}

body.demo1 .dashboard-demo1.overview-dashboard::before {
    display: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--bento-gap);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-section { grid-column: 1 / -1; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-subscribers-section { grid-column: span 3; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-balances-section { grid-column: span 6; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-actions-section { grid-column: span 3; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-section { grid-column: span 4; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section { grid-column: span 8; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section { grid-column: span 8; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-network-section { grid-column: span 4; }

body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board > section:not(.overview-priority-section) {
    min-width: 0;
    overflow: hidden;
    padding: .875rem;
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius);
    background: var(--bento-surface);
    box-shadow: 0 1px 3px rgba(24, 26, 32, .05);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-section {
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board > section:not(.overview-priority-section) > .dashboard-section-heading {
    min-height: 2rem;
    margin: 0 0 .65rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-section-heading h2 {
    color: var(--bento-ink);
    font-size: .875rem;
    font-weight: 650;
    letter-spacing: -.015em;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-section-heading h2::before {
    display: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-section-link,
body.demo1 .dashboard-demo1.overview-dashboard .insight-badge,
body.demo1 .dashboard-demo1.overview-dashboard .overview-filter-pill {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .35rem .65rem;
    border: 1px solid #e1e2e6;
    border-radius: 999px;
    background: var(--bento-surface-soft);
    color: #3f434b;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.15;
}

body.demo1 .dashboard-demo1.overview-dashboard a.overview-section-link {
    min-height: 2.75rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-card,
body.demo1 .dashboard-demo1.overview-dashboard .insight-card,
body.demo1 .dashboard-demo1.overview-dashboard :is(.overview-performance-panel, .overview-finance-panel, .overview-network-panel) {
    border: 1px solid var(--bento-border) !important;
    border-radius: var(--bento-radius) !important;
    background: var(--bento-surface) !important;
    box-shadow: 0 1px 3px rgba(24, 26, 32, .05);
}

body.demo1 .dashboard-demo1.overview-dashboard a.dashboard-card:hover,
body.demo1 .dashboard-demo1.overview-dashboard a.dashboard-card:focus-visible,
body.demo1 .dashboard-demo1.overview-dashboard a.overview-performance-item:hover {
    border-color: color-mix(in srgb, var(--bento-blue) 38%, var(--bento-border)) !important;
    background: var(--bento-surface) !important;
    color: var(--bento-ink) !important;
    box-shadow: 0 7px 18px rgba(24, 26, 32, .09);
    transform: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-surface::before {
    display: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid {
    height: 13.5rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--bento-gap);
    margin: 0;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="revenue-today"] {
    grid-column: 1 / span 6 !important;
    grid-row: 1 / span 2;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="pending-revenue"] {
    grid-column: 7 / span 3 !important;
    grid-row: 1 / span 2;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="upcoming-suspension"] {
    grid-column: 10 / span 3 !important;
    grid-row: 1;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="notifications-sent"] {
    grid-column: 10 / span 3 !important;
    grid-row: 2;
}

body.demo1 .dashboard-demo1.overview-dashboard[data-custom-layout="true"] .overview-priority-grid {
    height: auto;
    grid-template-rows: auto;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id] {
    min-width: 0;
    min-height: 0;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid .dashboard-card {
    height: 100%;
    border-color: var(--bento-border) !important;
    background: var(--bento-surface) !important;
    box-shadow: 0 1px 3px rgba(24, 26, 32, .05);
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="pending-revenue"] .dashboard-card {
    background: var(--bento-surface-soft) !important;
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .overview-surface {
    --overview-surface-accent: #6ee7b7;
    border-color: rgba(255, 255, 255, .2) !important;
    background: linear-gradient(135deg, #065f46, #047857) !important;
    box-shadow: 0 14px 32px rgba(5, 150, 105, .28);
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] :is(.metric-label, .metric-val, .metric-unit) {
    color: #fff;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid .dashboard-metric-card .kt-card-content {
    height: 100%;
    min-height: 0;
    padding: .875rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-card-topline {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .55rem;
    color: var(--bento-ink);
    font-size: .8125rem;
    line-height: 1.25;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-card-topline > strong {
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 650;
    overflow-wrap: anywhere;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-card-topline .dashboard-metric-icon {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    font-size: .925rem;
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .dashboard-metric-icon {
    border: 0;
    background: #edf3ff;
    color: var(--bento-blue);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-card-content,
body.demo1 .dashboard-demo1.overview-dashboard .overview-tall-kpi-content {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-amount {
    margin-top: 1.05rem;
    padding-inline-end: 7.5rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-amount .metric-val {
    color: var(--bento-ink);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-amount .metric-unit {
    color: var(--bento-muted);
    font-size: .8125rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-meta {
    display: flex;
    max-width: calc(100% - 7rem);
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    color: var(--bento-muted);
    font-size: .6875rem;
    line-height: 1.35;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-positive-dot {
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #0aae25;
    box-shadow: inset 0 0 0 2px #d9ffe0;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness {
    display: inline-flex;
    width: fit-content;
    min-height: 1.75rem;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: var(--bento-surface-soft);
    color: var(--bento-muted);
    font-size: .6875rem;
    font-weight: 550;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness::before {
    width: .45rem;
    height: .45rem;
    background: var(--bento-blue);
    box-shadow: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness[data-state="fresh"]::before { background: #0aae25; box-shadow: none; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness[data-state="error"]::before { background: var(--bento-red); box-shadow: none; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-freshness[data-state="paused"]::before { background: #b45309; box-shadow: none; }

body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars {
    position: absolute;
    right: .875rem;
    bottom: .875rem;
    display: flex;
    width: 6.5rem;
    height: 4.5rem;
    align-items: flex-end;
    justify-content: flex-end;
    gap: .18rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars i {
    width: .7rem;
    border-radius: 0;
    background: #70a1ff;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars i:nth-child(1) { height: 18%; background: #ecffb8; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars i:nth-child(2) { height: 35%; background: #d7fc68; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars i:nth-child(3) { height: 52%; background: #a8f62c; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars i:nth-child(4) { height: 74%; background: #7b9fff; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars i:nth-child(5) { height: 92%; background: #2469ff; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars i:nth-child(6) { height: 58%; background: var(--bento-lime); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars i:nth-child(7) { height: 100%; background: #9cc1ff; }

body.demo1 .dashboard-demo1.overview-dashboard .overview-tall-kpi-content .metric-amount {
    margin-top: 1rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-tall-kpi-content .metric-val {
    color: var(--bento-ink);
    font-size: clamp(1.65rem, 2.7vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -.045em;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-kpi-note,
body.demo1 .dashboard-demo1.overview-dashboard .overview-compact-note {
    color: var(--bento-muted);
    font-size: .6875rem;
    line-height: 1.4;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-compact-note {
    display: block;
    margin-top: .15rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-kpi-note {
    margin: .65rem 0 0;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-kpi-split {
    display: grid;
    margin-top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-kpi-split > span {
    min-width: 0;
    padding-inline-start: .55rem;
    border-inline-start: 2px solid var(--bento-lime);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-kpi-split small,
body.demo1 .dashboard-demo1.overview-dashboard .overview-kpi-split strong {
    display: block;
    color: var(--bento-muted);
    font-size: .625rem;
    line-height: 1.3;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-kpi-split strong {
    margin-top: .15rem;
    color: var(--bento-ink);
    font-size: .75rem;
    font-weight: 650;
}

body.demo1 .dashboard-demo1.overview-dashboard :is(.overview-exception-widget, .overview-message-widget) .kt-card-content {
    align-items: stretch;
}

body.demo1 .dashboard-demo1.overview-dashboard :is(.overview-exception-widget, .overview-message-widget) .metric-val {
    margin-top: .45rem;
    font-size: 1.6rem;
    font-weight: 650;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-layout-grid {
    margin-bottom: 0;
}

/* Dark subscriber block: the sole focal surface, analogous to the goal card. */
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] {
    display: grid;
    min-height: 15.75rem;
    padding: .6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    border: 0;
    border-radius: .8rem;
    background: var(--bento-charcoal);
    box-shadow: none;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] > [data-widget-id] {
    grid-column: span 1 / span 1 !important;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] > [data-widget-id] > .overview-surface {
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: .65rem !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #fff !important;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] .dashboard-metric-card .kt-card-content {
    min-height: 7rem;
    align-items: flex-start;
    flex-direction: column-reverse;
    justify-content: space-between;
    padding: .75rem;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] .overview-metric-copy {
    width: 100%;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] :is(.metric-label, .metric-val) {
    color: #fff;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] .metric-label {
    margin-top: .35rem;
    margin-bottom: 0;
    color: #d0d2d4;
    font-size: .625rem;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] .metric-val {
    font-size: 1.65rem;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] .dashboard-metric-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: var(--bento-lime);
    color: #1e2a00;
    font-size: .9rem;
}

/* Compact action list, mirroring the reference's transaction table. */
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid {
    display: block;
    overflow: hidden;
    border: 1px solid #e3e4e7;
    border-radius: .8rem;
    background: var(--bento-surface);
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid > [data-widget-id] + [data-widget-id] {
    border-top: 1px solid #e3e4e7;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid .dashboard-action-card {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--bento-surface) !important;
    box-shadow: none;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid .dashboard-action-card:focus-visible {
    outline: 3px solid #175cd3 !important;
    outline-offset: -3px;
    box-shadow: none !important;
}

.dark body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid .dashboard-action-card:focus-visible {
    outline-color: #60a5fa !important;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid > [data-widget-id]:nth-child(even) .dashboard-action-card {
    background: var(--bento-surface-soft) !important;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid .dashboard-action-card .kt-card-content {
    min-height: 3.55rem;
    padding: .55rem .65rem;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid .dashboard-action-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .4rem;
    font-size: .8rem;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid .dashboard-action-label {
    font-size: .5625rem;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid .dashboard-action-title {
    font-size: .75rem;
}

/* Center chart card: two compact, useful views without fabricated data. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .overview-finance-panel {
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .overview-finance-charts {
    gap: .6rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .overview-finance-chart {
    overflow: hidden;
    border: 1px solid #e3e4e7;
    border-radius: .8rem;
    background: var(--bento-surface-soft);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .overview-finance-chart + .overview-finance-chart {
    border-inline-start: 1px solid #e3e4e7;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .insight-head {
    min-height: 3.35rem;
    padding: .55rem .65rem;
    border-bottom-color: #dedfe3;
    background: transparent;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .insight-icon {
    width: 1.8rem;
    height: 1.8rem;
    font-size: .8rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .insight-title {
    gap: .45rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .insight-title h3 {
    font-size: .75rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .insight-title small {
    font-size: .625rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .insight-body {
    padding: .5rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .overview-finance-chart .insight-chart {
    height: 12rem;
}

/* Lower utility cards. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .55rem;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-finance-snapshot > [data-widget-id="accounts-receivable"],
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-finance-snapshot > [data-widget-id="accounts-payable"] {
    grid-column: span 6 / span 6 !important;
}

body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-finance-snapshot > [data-widget-id="open-complaints"] {
    grid-column: 1 / -1 !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot .dashboard-metric-card .kt-card-content {
    min-height: 5.4rem;
    align-items: flex-start;
    padding: .7rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot .dashboard-metric-icon {
    width: 1.9rem;
    height: 1.9rem;
    font-size: .85rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot .metric-label {
    font-size: .625rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot .metric-val {
    font-size: 1.05rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-panel {
    border: 1px solid #e3e4e7 !important;
    border-radius: .8rem !important;
    box-shadow: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #e3e4e7;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-item {
    min-height: 7.15rem;
    gap: .3rem;
    padding: .7rem;
    background: var(--bento-surface);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-label {
    gap: .35rem;
    font-size: .625rem;
    letter-spacing: .025em;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-label .insight-icon {
    width: 1.65rem;
    height: 1.65rem;
    font-size: .75rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-value {
    color: var(--bento-ink);
    font-size: 1.2rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-delta {
    font-size: .625rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-panel {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-panel > .insight-head {
    min-height: 3.35rem;
    padding: .55rem;
    border: 1px solid #e3e4e7;
    border-radius: .8rem .8rem 0 0;
    background: var(--bento-surface-soft);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-panel > .insight-head .insight-icon {
    width: 1.8rem;
    height: 1.8rem;
    font-size: .8rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-panel > .insight-head small {
    display: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-panel > .insight-head .overview-section-link {
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    overflow: hidden;
    gap: 0;
    padding: 0;
    color: transparent;
    font-size: 0;
    white-space: nowrap;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-panel > .insight-head .overview-section-link i {
    color: var(--bento-ink);
    font-size: .875rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout {
    grid-template-columns: minmax(17rem, .7fr) minmax(0, 1.3fr);
    border-inline: 1px solid #e3e4e7;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-summary {
    padding: .55rem;
    border-bottom: 0;
    border-inline-end: 1px solid #e3e4e7;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-grid {
    gap: .35rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item {
    min-height: 3.6rem;
    gap: .1rem;
    padding: .45rem;
    border-radius: .55rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item :is(span, small, em) {
    font-size: .5625rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-inventory-item strong {
    font-size: .8rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout > .insight-body {
    padding: .55rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout .insight-chart {
    height: 9rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-network-panel > .insight-foot {
    padding: .45rem .6rem;
    border: 1px solid #e3e4e7;
    border-radius: 0 0 .8rem .8rem;
    background: var(--bento-surface-soft);
}

@media (min-width: 1200px) {
    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-summary {
        border-bottom: 1px solid #e3e4e7;
        border-inline-end: 0;
    }
}

/* Full-width subscriber analytics row. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .dashboard-preview-grid[data-zone="analytics"] {
    gap: var(--bento-gap);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .insight-card {
    overflow: hidden;
    border-color: #e3e4e7 !important;
    border-radius: .8rem !important;
    box-shadow: none;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .insight-head {
    min-height: 3.5rem;
    padding: .65rem .8rem;
    background: var(--bento-surface);
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .insight-chart {
    height: 13rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .insight-body {
    padding: .65rem .8rem;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .insight-foot {
    padding: .55rem .8rem;
    background: var(--bento-surface-soft);
}

/* The shared shell must offer a focus indicator with >=3:1 contrast. */
body.demo1 #header :is(.kt-btn, .kt-input):focus-visible {
    outline: 3px solid #175cd3 !important;
    outline-offset: 2px;
}

.dark body.demo1 #header :is(.kt-btn, .kt-input):focus-visible {
    outline-color: #60a5fa !important;
}

/* Saved/custom layouts retain their chosen widths and normal-flow editors. */
body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .overview-bento-board {
    display: block;
}

body.demo1 .dashboard-demo1.overview-dashboard[data-custom-layout="true"] .overview-bento-board {
    display: block;
}

body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .overview-bento-board > section,
body.demo1 .dashboard-demo1.overview-dashboard[data-custom-layout="true"] .overview-bento-board > section {
    margin-bottom: 1rem;
}

body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .overview-priority-section {
    padding: .875rem;
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius);
    background: var(--bento-surface);
}

body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .overview-priority-heading {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    margin: 0 0 .65rem;
    clip: auto;
    white-space: normal;
}

body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .overview-priority-grid {
    height: auto;
    grid-template-rows: auto;
}

body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id] {
    grid-column: span var(--widget-span, 12) / span var(--widget-span, 12) !important;
    grid-row: auto !important;
}

body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .overview-hero-bars {
    display: none;
}

@media (max-width: 1199px) {
    body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.demo1 .dashboard-demo1.overview-dashboard :is(.overview-priority-section, .overview-trends-section, .overview-finance-section, .overview-network-section) {
        grid-column: 1 / -1;
    }

    body.demo1 .dashboard-demo1.overview-dashboard :is(.overview-subscribers-section, .overview-balances-section, .overview-actions-section, .overview-performance-section) {
        grid-column: span 1;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid {
        height: auto;
        grid-template-rows: repeat(2, minmax(7rem, auto));
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="revenue-today"] {
        grid-column: 1 / span 6 !important;
        grid-row: 1 / span 2;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="pending-revenue"] {
        grid-column: 7 / span 6 !important;
        grid-row: 1;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="upcoming-suspension"] {
        grid-column: 7 / span 3 !important;
        grid-row: 2;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="notifications-sent"] {
        grid-column: 10 / span 3 !important;
        grid-row: 2;
    }
}

@media (max-width: 991px) {
    body.demo1 .dashboard-demo1.overview-dashboard {
        margin-inline: 0;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board {
        grid-template-columns: minmax(0, 1fr);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board > section {
        grid-column: 1 / -1;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .overview-finance-charts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .overview-finance-chart + .overview-finance-chart {
        border-top: 1px solid #e3e4e7;
        border-inline-start: 1px solid #e3e4e7;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout {
        grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-summary {
        border-bottom: 0;
        border-inline-end: 1px solid #e3e4e7;
    }
}

@media (max-width: 639px) {
    body.demo1 .dashboard-demo1.overview-dashboard {
        padding: .65rem;
        border-radius: 1rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-editor select {
        width: calc(50% - .15rem);
        min-width: calc(50% - .15rem);
        flex: 1 1 calc(50% - .15rem);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board {
        gap: .65rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid {
        grid-template-rows: auto;
        gap: .65rem;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="revenue-today"],
    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="pending-revenue"] {
        grid-column: 1 / -1 !important;
        grid-row: auto;
        min-height: 10.5rem;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="upcoming-suspension"] {
        grid-column: 1 / span 6 !important;
        grid-row: auto;
        min-height: 7.5rem;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="notifications-sent"] {
        grid-column: 7 / span 6 !important;
        grid-row: auto;
        min-height: 7.5rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-amount {
        padding-inline-end: 5.5rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-amount .metric-val {
        font-size: clamp(1.85rem, 10vw, 2.45rem);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-meta {
        max-width: calc(100% - 5rem);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars {
        width: 4.75rem;
        height: 3.75rem;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .overview-finance-charts,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .overview-finance-chart + .overview-finance-chart {
        border-inline-start: 1px solid #e3e4e7;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-network-summary {
        border-bottom: 1px solid #e3e4e7;
        border-inline-end: 0;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .dashboard-preview-grid[data-zone="analytics"] > * {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 380px) {
    body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .insight-head {
        flex-wrap: wrap;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .insight-title {
        width: 100%;
        flex: 1 1 100%;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .insight-badge {
        margin-inline-start: auto;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-bars {
        display: none;
    }

    body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-amount,
    body.demo1 .dashboard-demo1.overview-dashboard .overview-hero-meta {
        max-width: 100%;
        padding-inline-end: 0;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="revenue-today"],
    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="pending-revenue"] {
        grid-column: 1 / -1 !important;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="upcoming-suspension"] {
        grid-column: 1 / span 6 !important;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-priority-grid > [data-widget-id="notifications-sent"] {
        grid-column: 7 / span 6 !important;
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-finance-snapshot > [data-widget-id] {
        grid-column: 1 / -1 !important;
    }
}

/* A saved/custom width is the single width contract. Keep it authoritative at
   responsive breakpoints while the default bento keeps its curated reflow. */
@media (min-width: 640px) and (max-width: 1199px) {
    body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .dashboard-preview-grid > [data-widget-id],
    body.demo1 .dashboard-demo1.overview-dashboard[data-custom-layout="true"] .dashboard-preview-grid > [data-widget-id] {
        grid-column: span var(--widget-span, 12) / span var(--widget-span, 12) !important;
    }
}

@media (max-width: 639px) {
    body.demo1.dashboard-preview-editing .dashboard-demo1.overview-dashboard .dashboard-preview-grid > [data-widget-id],
    body.demo1 .dashboard-demo1.overview-dashboard[data-custom-layout="true"] .dashboard-preview-grid > [data-widget-id] {
        grid-column: 1 / -1 !important;
    }
}

/* Widget colors remain visible on every bento card without replacing the
   card's semantic surface or the revenue gradient. */
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-preview-grid > [data-widget-id].dashboard-preview-customized > .kt-card {
    border-inline-start: .25rem solid var(--widget-accent) !important;
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .overview-surface {
    background: linear-gradient(135deg, #065f46, #047857) !important;
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] :is(.overview-card-topline, .metric-label, .metric-val, .metric-unit) {
    color: #fff;
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] :is(.overview-hero-meta, .overview-freshness) {
    color: #d1fae5;
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .overview-filter-pill {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .dashboard-metric-icon {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard {
    --bento-canvas: #18191c;
    --bento-surface: #242529;
    --bento-surface-soft: #2d2f34;
    --bento-border: #404249;
    --bento-ink: #f8fafc;
    --bento-muted: #cbd5e1;
    --bento-charcoal: #111214;
    border-color: #303238;
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board > section:not(.overview-priority-section),
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid .dashboard-card,
.dark body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .overview-surface,
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-card,
.dark body.demo1 .dashboard-demo1.overview-dashboard .insight-card {
    color: var(--bento-ink);
}

.dark body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] :is(.metric-label, .metric-val, .metric-unit),
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-card-topline,
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-tall-kpi-content .metric-val,
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-kpi-split strong,
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-section-heading h2 {
    color: var(--bento-ink);
}

.dark body.demo1 .dashboard-demo1.overview-dashboard :is(.overview-hero-meta, .overview-kpi-note, .overview-compact-note, .overview-freshness) {
    color: var(--bento-muted);
}

.dark body.demo1 .dashboard-demo1.overview-dashboard :is(.overview-section-link, .insight-badge, .overview-filter-pill) {
    border-color: var(--bento-border);
    background: var(--bento-surface-soft);
    color: var(--bento-muted);
}

.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-muted {
    color: #cbd5e1;
}

@media (prefers-reduced-motion: reduce) {
    body.demo1 .dashboard-demo1.overview-dashboard *,
    body.demo1 .dashboard-demo1.overview-dashboard *::before,
    body.demo1 .dashboard-demo1.overview-dashboard *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =====================================================================
   Vibrant Enterprise Overview Theme (2026 refresh)
   Scoped strictly to .dashboard-demo1.overview-dashboard. Appended last so
   it overrides the neutral bento layer without altering markup or JS.
   Preserves the existing widget, chart, link and customization contracts.
   ===================================================================== */
body.demo1 .dashboard-demo1.overview-dashboard {
    --ent-brand: #4f46e5;
    --ent-brand-2: #6366f1;
    --ent-sky: #0ea5e9;
    --ent-violet: #8b5cf6;
    --ent-cyan: #06b6d4;
    --ent-emerald: #10b981;
    --ent-amber: #f59e0b;
    --ent-rose: #f43f5e;
    --ent-ink: #0f172a;
    --ent-muted: #64748b;
    --ent-line: #e6e8f0;
    --ent-surface: #ffffff;
    --ent-surface-soft: #f6f8fe;

    /* Repaint the board canvas: airy, cool, faintly colorful. */
    --bento-canvas: #eef2fb;
    --bento-surface: #ffffff;
    --bento-surface-soft: #f4f7fe;
    --bento-border: #e3e8f4;
    --bento-ink: #0f172a;
    --bento-muted: #5a6478;
    --bento-blue: #4f46e5;
    border-color: #dfe4f2 !important;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(99, 102, 241, .10), transparent 45%),
        radial-gradient(120% 90% at 100% 0%, rgba(14, 165, 233, .09), transparent 42%),
        radial-gradient(120% 120% at 100% 100%, rgba(16, 185, 129, .06), transparent 45%),
        var(--bento-canvas) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Section panels: crisper cards, gentle lift, colored heading bars. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board > section:not(.overview-priority-section) {
    border: 1px solid var(--bento-border) !important;
    border-radius: 1.1rem !important;
    background: linear-gradient(180deg, #ffffff, #fbfcff) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(30, 41, 99, .06) !important;
}

body.demo1 .dashboard-demo1.overview-dashboard .dashboard-section-heading h2 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--ent-ink);
    font-weight: 700;
    letter-spacing: -.02em;
}

body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board > section:not(.overview-priority-section) > .dashboard-section-heading h2::before {
    display: inline-block !important;
    width: .28rem;
    height: 1.05rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ent-brand-2), var(--ent-sky));
    content: '';
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-subscribers-section .dashboard-section-heading h2::before { background: linear-gradient(180deg, #06b6d4, #0ea5e9); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-balances-section .dashboard-section-heading h2::before { background: linear-gradient(180deg, #10b981, #059669); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-actions-section .dashboard-section-heading h2::before { background: linear-gradient(180deg, #8b5cf6, #6366f1); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-section .dashboard-section-heading h2::before { background: linear-gradient(180deg, #f59e0b, #f97316); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-trends-section .dashboard-section-heading h2::before { background: linear-gradient(180deg, #4f46e5, #8b5cf6); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-section .dashboard-section-heading h2::before { background: linear-gradient(180deg, #14b8a6, #06b6d4); }
body.demo1 .dashboard-demo1.overview-dashboard .overview-network-section .dashboard-section-heading h2::before { background: linear-gradient(180deg, #f43f5e, #f59e0b); }

/* Section "view more" pills gain brand tint on hover. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-section-link {
    border-color: #e2e6f3;
    background: #f2f5fd;
    color: #4b5563;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
body.demo1 .dashboard-demo1.overview-dashboard a.overview-section-link:hover,
body.demo1 .dashboard-demo1.overview-dashboard a.overview-section-link:focus-visible {
    border-color: color-mix(in srgb, var(--ent-brand) 40%, #e2e6f3) !important;
    background: color-mix(in srgb, var(--ent-brand) 12%, #ffffff) !important;
    color: var(--ent-brand) !important;
}

/* Priority KPI cards: colorful tonal surfaces instead of plain white. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid .dashboard-card {
    border-width: 1px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 22px rgba(30, 41, 99, .06) !important;
}
body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="pending-revenue"] .dashboard-card {
    border-color: color-mix(in srgb, var(--ent-violet) 26%, var(--bento-border)) !important;
    background:
        radial-gradient(130% 120% at 100% 0%, rgba(139, 92, 246, .16), transparent 55%),
        #ffffff !important;
}
body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="upcoming-suspension"] .dashboard-card {
    border-color: color-mix(in srgb, var(--ent-rose) 26%, var(--bento-border)) !important;
    background:
        radial-gradient(130% 120% at 100% 0%, rgba(244, 63, 94, .15), transparent 55%),
        #ffffff !important;
}
body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="notifications-sent"] .dashboard-card {
    border-color: color-mix(in srgb, var(--ent-sky) 26%, var(--bento-border)) !important;
    background:
        radial-gradient(130% 120% at 100% 0%, rgba(14, 165, 233, .15), transparent 55%),
        #ffffff !important;
}

/* Revenue hero: richer indigo→violet gradient (kept legible in white). */
body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .overview-surface {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 55%, #7c3aed 100%) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    box-shadow: 0 16px 36px rgba(79, 70, 229, .32) !important;
}
body.demo1 .dashboard-demo1.overview-dashboard [data-widget-id="revenue-today"] .dashboard-metric-icon {
    border: 1px solid rgba(255, 255, 255, .3) !important;
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}

/* Tinted icon chips (semantic) — brighter fills. */
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-primary { background: #eef2ff !important; color: #4f46e5 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-success { background: #dcfce7 !important; color: #059669 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-warning { background: #fef3c7 !important; color: #d97706 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-danger  { background: #ffe4e6 !important; color: #e11d48 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-info    { background: #cffafe !important; color: #0891b2 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-purple  { background: #f3e8ff !important; color: #7c3aed !important; }

/* Subscriber status: keep the dark focal block but energize the accent. */
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] {
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(99, 102, 241, .35), transparent 55%),
        linear-gradient(160deg, #1e1b4b, #111827) !important;
}
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] > [data-widget-id] > .overview-surface {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] .dashboard-metric-icon {
    background: linear-gradient(135deg, #a3e635, #22d3ee) !important;
    color: #0b1020 !important;
}

/* Balances snapshot cards get soft colored washes. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot [data-widget-id="accounts-receivable"] .dashboard-card {
    background: linear-gradient(180deg, #f0fdf4, #ffffff) !important;
    border-color: #cdeede !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot [data-widget-id="accounts-payable"] .dashboard-card {
    background: linear-gradient(180deg, #fffbeb, #ffffff) !important;
    border-color: #f3e2b3 !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot [data-widget-id="open-complaints"] .dashboard-card {
    background: linear-gradient(180deg, #fef2f4, #ffffff) !important;
    border-color: #f4cdd4 !important;
}

/* Quick actions list: brand rail on hover for a premium feel. */
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid {
    border-color: var(--bento-border) !important;
}
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .overview-actions-grid .dashboard-action-card:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ent-brand) 8%, #ffffff), #ffffff) !important;
    box-shadow: inset 3px 0 0 var(--ent-brand) !important;
}

/* Performance tiles: colored value + subtle top glow on hover. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-performance-item:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ent-brand) 6%, #ffffff), #ffffff) !important;
}

/* Card hover lift across the board. */
body.demo1 .dashboard-demo1.overview-dashboard a.dashboard-card:hover,
body.demo1 .dashboard-demo1.overview-dashboard a.dashboard-card:focus-visible {
    box-shadow: 0 10px 26px rgba(30, 41, 99, .14) !important;
    transform: translateY(-2px);
}

/* Colored KPI value text, slightly bolder. */
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-primary { color: #4f46e5 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-success { color: #059669 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-warning { color: #d97706 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-danger  { color: #e11d48 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-info    { color: #0891b2 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .dashboard-value-purple  { color: #7c3aed !important; }

/* Dark mode: keep the vibrant story on a deep, cool canvas. */
.dark body.demo1 .dashboard-demo1.overview-dashboard {
    --bento-canvas: #0b1020;
    --bento-surface: #151a2c;
    --bento-surface-soft: #1a2138;
    --bento-border: #283149;
    --bento-ink: #f8fafc;
    --bento-muted: #aab4c9;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(99, 102, 241, .16), transparent 45%),
        radial-gradient(120% 90% at 100% 0%, rgba(14, 165, 233, .12), transparent 42%),
        var(--bento-canvas) !important;
    border-color: #232a40 !important;
}
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board > section:not(.overview-priority-section) {
    background: linear-gradient(180deg, #161c30, #131829) !important;
    border-color: var(--bento-border) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px rgba(0, 0, 0, .28) !important;
}
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-primary { background: rgba(99,102,241,.16) !important; color: #a5b4fc !important; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-success { background: rgba(16,185,129,.16) !important; color: #6ee7b7 !important; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-warning { background: rgba(245,158,11,.16) !important; color: #fcd34d !important; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-danger  { background: rgba(244,63,94,.16) !important; color: #fda4af !important; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-info    { background: rgba(6,182,212,.16) !important; color: #67e8f9 !important; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .dashboard-tone-purple  { background: rgba(139,92,246,.16) !important; color: #c4b5fd !important; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot [data-widget-id="accounts-receivable"] .dashboard-card { background: linear-gradient(180deg, rgba(16,185,129,.12), #151a2c) !important; border-color: rgba(16,185,129,.28) !important; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot [data-widget-id="accounts-payable"] .dashboard-card { background: linear-gradient(180deg, rgba(245,158,11,.12), #151a2c) !important; border-color: rgba(245,158,11,.28) !important; }
.dark body.demo1 .dashboard-demo1.overview-dashboard .overview-finance-snapshot [data-widget-id="open-complaints"] .dashboard-card { background: linear-gradient(180deg, rgba(244,63,94,.12), #151a2c) !important; border-color: rgba(244,63,94,.28) !important; }


/* =====================================================================
   Group admin dashboards — clean fintech redesign (v3)
   Replaces the earlier vibrant gradient pass. Direction (per reference):
   mostly-white cards, soft shadows, generous rounding, restrained accents
   shown as colored circular icon badges + dark bold values, with a single
   dark focal card (revenue-today). Scoped to .overview-dashboard and the
   sibling page wrappers. Source order + !important => wins.
   ===================================================================== */

/* ---------- Board canvas: soft neutral, not saturated ---------- */
body.demo1 .dashboard-demo1.overview-dashboard {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(37, 99, 235, .05), transparent 46%),
        #eef1f6 !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-bento-board > section:not(.overview-priority-section) {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px rgba(15, 23, 42, .05) !important;
}

/* ---------- Priority small cards: clean white, dark copy ----------
   All accent rules below share this block's (0,6,x) specificity by being
   scoped under `.overview-priority-grid >`, so SOURCE ORDER decides: the
   per-widget / per-state / revenue overrides come later and therefore win
   over these base rules. Do NOT add :not() here — bumping specificity
   would let the base out-rank the accents and flatten every badge. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id] .dashboard-card {
    background: #ffffff !important;
    border: 1px solid #eceef3 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .05) !important;
}
/* value = near-black; labels/notes = muted slate */
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id] :is(.metric-val, .metric-unit, .overview-kpi-split strong) {
    color: #0f172a !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id] :is(.overview-card-topline, .overview-card-topline > strong, .metric-label, .overview-kpi-note, .overview-compact-note, .overview-hero-meta, .overview-kpi-split small) {
    color: #64748b !important;
}
/* circular colored icon badges (white glyph) — base blue */
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id] .dashboard-metric-icon {
    border: 0 !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    color: #ffffff !important;
}
/* per-widget badge hues (same specificity, later source => win) */
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="pending-revenue"] .dashboard-metric-icon { background: #2563eb !important; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="notifications-sent"] .dashboard-metric-icon { background: #0ea5e9 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="upcoming-suspension"] .dashboard-metric-icon { background: #64748b !important; }
/* per-state suspension signal (extra attr => outranks the default grey) */
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="upcoming-suspension"][data-signal="attention"] .dashboard-metric-icon { background: #e11d48 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="upcoming-suspension"][data-signal="clear"] .dashboard-metric-icon { background: #16a34a !important; }
/* suspension value carries the state colour for an at-a-glance signal */
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="upcoming-suspension"][data-signal="attention"] .metric-val { color: #e11d48 !important; }
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="upcoming-suspension"][data-signal="clear"] .metric-val { color: #16a34a !important; }

/* ---------- Revenue-today: the single dark focal card ----------
   Scoped under `.overview-priority-grid >` (0,6,x) and placed after the
   base white/blue rules, so it wins on the shared .dashboard-card element
   by source order. */
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="revenue-today"] .dashboard-card {
    border: 1px solid rgba(255, 255, 255, .08) !important;
    background: linear-gradient(157deg, #232c3d 0%, #0f141d 100%) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 18px 40px rgba(15, 23, 42, .22) !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="revenue-today"] :is(.metric-val, .metric-unit, .overview-kpi-split strong) {
    color: #ffffff !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="revenue-today"] :is(.overview-card-topline, .overview-card-topline > strong, .metric-label, .overview-kpi-note, .overview-compact-note, .overview-hero-meta, .overview-kpi-split small) {
    color: rgba(255, 255, 255, .72) !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="revenue-today"] .dashboard-metric-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="revenue-today"] .overview-hero-bars i {
    background: rgba(255, 255, 255, .5) !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="revenue-today"] :is(.overview-filter-pill, .overview-freshness) {
    border-color: rgba(255, 255, 255, .2) !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
}

/* ---------- Hover: white cards keep the default light hover (dark ink,
   supplied by the generic a.dashboard-card:hover). Only the dark focal
   card must hold its dark surface so it never flips to white. ---------- */
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="revenue-today"] a.dashboard-card:hover,
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="revenue-today"] a.dashboard-card:focus-visible {
    background: linear-gradient(157deg, #232c3d 0%, #0f141d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 20px 44px rgba(15, 23, 42, .28) !important;
}

/* ---------- Overflow fix: compact single-row cards were clipping their
   value behind the rounded border. Shrink the value + tighten so the
   icon, label, value and note all fit the fixed 6rem cell. ---------- */
body.demo1 .dashboard-demo1.overview-dashboard :is([data-widget-id="upcoming-suspension"], [data-widget-id="notifications-sent"]) .metric-val {
    font-size: clamp(1.15rem, 1.6vw, 1.5rem) !important;
    line-height: 1.12 !important;
}
body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid .dashboard-metric-card .kt-card-content {
    overflow: hidden;
    row-gap: .1rem;
}

/* ---------- Subscriber-status chips: flat semantic colours (cleaner) ---------- */
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] .metric-val { color: #f8fafc !important; }
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] [data-widget-id="online-users"] .dashboard-metric-icon { background: #0ea5e9 !important; color: #fff !important; }
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] [data-widget-id="active-users"] .dashboard-metric-icon { background: #16a34a !important; color: #fff !important; }
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] [data-widget-id="suspended-users"] .dashboard-metric-icon { background: #f59e0b !important; color: #fff !important; }
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] [data-widget-id="disabled-users"] .dashboard-metric-icon { background: #64748b !important; color: #fff !important; }

/* =====================================================================
   Business + Network KPI cards — clean white + circular colour badges
   (Reverts the earlier gradient fills; base rules already give white
   cards + dark values. Here we just soften the shadow and turn the tone
   chips into solid circular badges with a white glyph, per reference.)
   ===================================================================== */
body.demo1 .business-dashboard-page .dashboard-kpi,
body.demo1 .network-dashboard-page .network-kpi {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .05) !important;
}
body.demo1 .business-dashboard-page .dashboard-kpi-icon,
body.demo1 .network-dashboard-page .network-kpi-icon {
    border-radius: 999px !important;
    color: #ffffff !important;
}
body.demo1 .business-kpi-blue .dashboard-kpi-icon,
body.demo1 .network-kpi-blue .network-kpi-icon { background: #2563eb !important; color: #fff !important; }
body.demo1 .business-kpi-green .dashboard-kpi-icon,
body.demo1 .network-kpi-green .network-kpi-icon { background: #16a34a !important; color: #fff !important; }
body.demo1 .business-kpi-violet .dashboard-kpi-icon,
body.demo1 .network-kpi-violet .network-kpi-icon { background: #6d28d9 !important; color: #fff !important; }
body.demo1 .business-kpi-amber .dashboard-kpi-icon,
body.demo1 .network-kpi-amber .network-kpi-icon { background: #d97706 !important; color: #fff !important; }
/* meter fill in brand blue on the (now white) cards */
body.demo1 .business-dashboard-page .dashboard-meter > span,
body.demo1 .network-dashboard-page .dashboard-meter > span { background: #2563eb !important; }

/* =====================================================================
   Subscriber-status (customers) zone — convert the legacy dark charcoal
   panel to clean white cards so the whole board reads as one cohesive
   light fintech surface with a single dark focal card (revenue-today).
   Appended last: matches the dark-panel selectors' specificity and wins
   by source order. Per-widget circular badge hues are set earlier and
   still apply (higher, per-widget specificity).
   ===================================================================== */
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] > [data-widget-id] > .overview-surface {
    background: #ffffff !important;
    border: 1px solid #eceef3 !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .05) !important;
}
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] .metric-val {
    color: #0f172a !important;
}
body.demo1:not(.dashboard-preview-editing) .dashboard-demo1.overview-dashboard[data-custom-layout="false"] .dashboard-preview-grid[data-zone="customers"] .metric-label {
    color: #64748b !important;
}

/* Mobile ≤380px: keep the content-heavy hero cards full-width.
   The blanket span-6 rule above (priority-grid > *) is right for the small
   exception cards but crams "Revenue today" and "Due today" — which each pack
   an icon+title+filter pill, a large amount, a meta line and a sparkline — into
   a ~150px two-up column. Restore the author's intended --widget-mobile-span:12
   for just those two widgets. Equal specificity, later source order → wins. */
@media (max-width: 380px) {
    body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="revenue-today"],
    body.demo1 .dashboard-demo1.overview-dashboard .overview-priority-grid > [data-widget-id="pending-revenue"] {
        grid-column: 1 / -1 !important;
    }
}

/* Business and network dashboard family refresh.
   Keep the content surfaces calm; use color to establish scan order. */
body.demo1 .dashboard-family-page {
    --family-blue: #2563eb;
    --family-green: #16a34a;
    --family-violet: #7c3aed;
    --family-amber: #d97706;
    --family-rose: #e11d48;
    gap: 1rem !important;
}

body.demo1 .dashboard-family-heading > i {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: .7rem;
    background: #eef2ff;
    color: #4f46e5 !important;
}

body.demo1 .dashboard-family-heading--business > i { background: #eff6ff; color: #2563eb !important; }
body.demo1 .dashboard-family-heading--network > i { background: #ecfdf5; color: #059669 !important; }

body.demo1 .dashboard-family-page .dashboard-command-bar {
    border: 0;
    background:
        radial-gradient(90% 160% at 100% 0%, rgba(96, 165, 250, .35), transparent 58%),
        linear-gradient(125deg, #172554, #1e3a8a 58%, #1d4ed8);
    box-shadow: 0 14px 32px -20px rgba(30, 58, 138, .75);
}

body.demo1 .dashboard-family-network .dashboard-command-bar {
    background:
        radial-gradient(90% 160% at 100% 0%, rgba(45, 212, 191, .28), transparent 58%),
        linear-gradient(125deg, #0f172a, #164e63 58%, #0f766e);
    box-shadow: 0 14px 32px -20px rgba(15, 118, 110, .75);
}

body.demo1 .dashboard-family-page .dashboard-command-bar .dashboard-period-primary,
body.demo1 .dashboard-family-page .dashboard-command-bar .dashboard-period-detail:not(:last-child) {
    border-color: rgba(255, 255, 255, .16);
}

body.demo1 .dashboard-family-page .dashboard-command-bar .dashboard-period-primary span:not(.dashboard-period-icon),
body.demo1 .dashboard-family-page .dashboard-command-bar .dashboard-period-detail > span {
    color: rgba(255, 255, 255, .68);
}

body.demo1 .dashboard-family-page .dashboard-command-bar :is(.dashboard-period-primary, .dashboard-period-detail) strong {
    color: #fff;
}

body.demo1 .dashboard-family-page .dashboard-command-bar .dashboard-period-icon {
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

body.demo1 .dashboard-family-page :is(.dashboard-kpi, .network-kpi) {
    position: relative;
    overflow: hidden;
    border-color: #e7eaf0;
    border-radius: 1rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 2%, var(--background)), var(--background));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .05) !important;
}

body.demo1 .dashboard-family-page :is(.dashboard-kpi, .network-kpi)::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    content: '';
}

body.demo1 .dashboard-family-page :is(.business-kpi-green, .network-kpi-green)::before { background: linear-gradient(90deg, #059669, #34d399); }
body.demo1 .dashboard-family-page :is(.business-kpi-violet, .network-kpi-violet)::before { background: linear-gradient(90deg, #6d28d9, #a78bfa); }
body.demo1 .dashboard-family-page :is(.business-kpi-amber, .network-kpi-amber)::before { background: linear-gradient(90deg, #d97706, #fbbf24); }

body.demo1 .dashboard-family-page :is(.dashboard-kpi, .network-kpi):hover,
body.demo1 .dashboard-family-page :is(.dashboard-kpi, .network-kpi):focus-visible {
    border-color: #cbd5e1;
    box-shadow: 0 16px 30px -20px rgba(15, 23, 42, .45) !important;
    transform: translateY(-1px);
}

body.demo1 .dashboard-family-page .dashboard-panel {
    --panel-accent: var(--family-blue);
    overflow: hidden;
    border-color: #e7eaf0;
    border-top: 3px solid var(--panel-accent);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 12px 28px rgba(15, 23, 42, .045);
}

body.demo1 .dashboard-family-page .dashboard-panel--green { --panel-accent: var(--family-green); }
body.demo1 .dashboard-family-page .dashboard-panel--violet { --panel-accent: var(--family-violet); }
body.demo1 .dashboard-family-page .dashboard-panel--amber { --panel-accent: var(--family-amber); }
body.demo1 .dashboard-family-page .dashboard-panel--rose { --panel-accent: var(--family-rose); }

body.demo1 .dashboard-family-page .dashboard-panel > .kt-card-header {
    background: linear-gradient(90deg, color-mix(in srgb, var(--panel-accent) 7%, var(--background)), var(--background) 58%);
}

body.demo1 .dashboard-family-page .dashboard-panel .dashboard-card-icon {
    background: color-mix(in srgb, var(--panel-accent) 12%, var(--background));
    color: var(--panel-accent);
}

body.demo1 .dashboard-family-business .business-distribution-grid > a:nth-child(2) .business-distribution-icon { background: #ecfdf3; color: #059669; }
body.demo1 .dashboard-family-business .business-distribution-grid > a:nth-child(3) .business-distribution-icon { background: #f3e8ff; color: #7c3aed; }
body.demo1 .dashboard-family-business .business-distribution-grid > a:nth-child(4) .business-distribution-icon { background: #fff7ed; color: #d97706; }

body.demo1 .dashboard-family-network .network-kpi:not(.network-kpi-green):not(.network-kpi-violet):not(.network-kpi-amber) .network-kpi-icon {
    background: #2563eb !important;
    color: #fff !important;
}

@media (max-width: 991px) {
    body.demo1 .dashboard-family-page .dashboard-command-bar .dashboard-period-primary,
    body.demo1 .dashboard-family-page .dashboard-command-bar .dashboard-period-detail:not(:last-child) {
        border-color: rgba(255, 255, 255, .16);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.demo1 .dashboard-family-page :is(.dashboard-kpi, .network-kpi) {
        transition: none;
    }
}