/* Native Metronic Demo 1 customer workspace. Group-admin wrapper only. */
body.demo1 .customer-details-page {
    width: 100%;
    min-width: 0;
}

/* AJAX detail responses carry their own scope so every modal receives the
   same layout as the full customer page. Keep navigation inside the modal's
   scroll container and avoid repeating the full-page breadcrumb. */
body.demo1 .kt-modal-body > .customer-details-fragment {
    min-width: 0;
}

body.demo1 .kt-modal-body > .customer-details-fragment .cdx-workspace {
    gap: 1rem;
}

body.demo1 .kt-modal-body > .customer-details-fragment .cdx-backline {
    display: none;
}

body.demo1 .kt-modal-body > .customer-details-fragment .cdx-section-menu {
    top: 0;
}

body.demo1 .customer-details-page .cdx-workspace {
    display: grid;
    min-width: 0;
    gap: 1.5rem;
    color: var(--foreground);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.demo1 .customer-details-page .cdx-workspace a {
    text-decoration: none;
}

body.demo1 .customer-details-page .cdx-backline {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: -.5rem;
    color: var(--muted-foreground);
    font-size: .75rem;
    font-weight: 500;
}

body.demo1 .customer-details-page .cdx-backline a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--primary);
}

body.demo1 .customer-details-page .cdx-hero,
body.demo1 .customer-details-page .cdx-section-menu,
body.demo1 .customer-details-page .cdx-detail-card,
body.demo1 .customer-details-page .cdx-onu-card,
body.demo1 .customer-details-page .cdx-table-card,
body.demo1 .customer-details-page .cdx-graph-card,
body.demo1 .customer-details-page .cdx-operation-card {
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

body.demo1 .customer-details-page .cdx-hero {
    overflow: hidden;
}

body.demo1 .customer-details-page .cdx-hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
}

body.demo1 .customer-details-page .cdx-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

body.demo1 .customer-details-page .cdx-avatar {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 3.5rem;
    place-items: center;
    border-radius: .75rem;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
}

body.demo1 .customer-details-page .cdx-identity-copy {
    min-width: 0;
}

body.demo1 .customer-details-page .cdx-name-line {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

body.demo1 .customer-details-page .cdx-name-line h1 {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--foreground);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
}

body.demo1 .customer-details-page .cdx-presence {
    width: .375rem;
    height: .375rem;
    border-radius: 999px;
    background: var(--muted-foreground);
}

body.demo1 .customer-details-page .cdx-presence.is-online {
    background: var(--success);
}

body.demo1 .customer-details-page .cdx-meta {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .5rem;
    color: var(--muted-foreground);
    font-size: .8125rem;
}

body.demo1 .customer-details-page .cdx-meta span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .35rem;
    overflow-wrap: anywhere;
}

body.demo1 .customer-details-page .cdx-primary-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

body.demo1 .customer-details-page .cdx-primary-actions .kt-btn {
    min-height: 2.25rem;
}

body.demo1 .customer-details-page .cdx-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 62%, var(--card));
}

body.demo1 .customer-details-page .cdx-kpi {
    display: grid;
    min-width: 0;
    gap: .25rem;
    padding: 1rem 1.5rem;
}

body.demo1 .customer-details-page .cdx-kpi + .cdx-kpi {
    border-inline-start: 1px solid var(--border);
}

body.demo1 .customer-details-page .cdx-kpi span,
body.demo1 .customer-details-page .cdx-detail-list span,
body.demo1 .customer-details-page .cdx-onu-grid span {
    color: var(--muted-foreground);
    font-size: .75rem;
    font-weight: 500;
}

body.demo1 .customer-details-page .cdx-kpi strong {
    overflow: hidden;
    color: var(--foreground);
    font-size: .875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.demo1 .customer-details-page .cdx-section-menu {
    position: sticky;
    z-index: 20;
    top: 4.75rem;
    display: grid !important;
    min-width: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .25rem;
    padding: .5rem;
    overflow-x: auto;
}

body.demo1 .customer-details-page .cdx-section-menu a {
    display: inline-flex;
    min-height: 2.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: var(--secondary-foreground);
    font-size: .8125rem;
    font-weight: 600;
}

body.demo1 .customer-details-page .cdx-section-menu a:hover,
body.demo1 .customer-details-page .cdx-section-menu a:focus {
    background: var(--primary-light);
    color: var(--primary);
}

body.demo1 .customer-details-page .cdx-section {
    display: grid;
    min-width: 0;
    scroll-margin-top: 9rem;
    gap: 1rem;
}

body.demo1 .customer-details-page .cdx-section-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

body.demo1 .customer-details-page .cdx-section-heading h2 {
    margin: 0;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

body.demo1 .customer-details-page .cdx-section-heading span {
    color: var(--muted-foreground);
    font-size: .75rem;
}

body.demo1 .customer-details-page .cdx-overview-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
}

body.demo1 .customer-details-page .cdx-detail-card,
body.demo1 .customer-details-page .cdx-usage-card,
body.demo1 .customer-details-page .cdx-operation-card {
    min-width: 0;
    overflow: hidden;
}

body.demo1 .customer-details-page .kt-card-header {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

body.demo1 .customer-details-page .kt-card-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--foreground);
    font-size: .875rem !important;
    font-weight: 600;
}

body.demo1 .customer-details-page .kt-card-title i {
    color: var(--primary);
    font-size: 1rem;
}

body.demo1 .customer-details-page .cdx-detail-list {
    padding: 0;
}

body.demo1 .customer-details-page .cdx-detail-list > div {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(5.5rem, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: .75rem;
    padding: .75rem 1.25rem;
}

body.demo1 .customer-details-page .cdx-detail-list > div + div {
    border-top: 1px solid var(--border);
}

body.demo1 .customer-details-page .cdx-detail-list strong,
body.demo1 .customer-details-page .cdx-onu-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--foreground);
    font-size: .8125rem;
    font-weight: 500;
    text-align: end;
}

body.demo1 .customer-details-page .cdx-detail-list a,
body.demo1 .customer-details-page .cdx-onu-grid a {
    color: var(--primary);
}

body.demo1 .customer-details-page .cdx-text-danger {
    color: var(--destructive) !important;
}

body.demo1 .customer-details-page .cdx-map {
    display: grid;
    gap: .625rem;
    padding: 0 1.25rem 1.25rem;
}

body.demo1 .customer-details-page .cdx-map iframe {
    width: 100%;
    height: 9rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
}

body.demo1 .customer-details-page .cdx-map a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 600;
}

body.demo1 .customer-details-page .cdx-credential {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}

body.demo1 .customer-details-page .cdx-credential code {
    color: var(--foreground);
    font-size: .75rem;
}

body.demo1 .customer-details-page .cdx-side-stack {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

body.demo1 .customer-details-page .cdx-note {
    min-height: 5rem;
    padding: 1rem 1.25rem;
    color: var(--foreground);
    font-size: .8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

body.demo1 .customer-details-page .cdx-note.is-empty {
    color: var(--muted-foreground);
    font-style: italic;
}

body.demo1 .customer-details-page .cdx-note-context {
    display: block;
    margin-bottom: .625rem;
    color: var(--muted-foreground);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
}

body.demo1 .customer-details-page .cdx-note-metadata {
    display: grid;
    gap: .45rem;
    margin: 0;
}

body.demo1 .customer-details-page .cdx-note-metadata > div {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: .5rem;
}

body.demo1 .customer-details-page .cdx-note-metadata dt {
    color: var(--muted-foreground);
    font-size: .7rem;
    font-weight: 500;
}

body.demo1 .customer-details-page .cdx-note-metadata dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--foreground);
    font-size: .75rem;
    font-weight: 600;
    text-align: end;
}

body.demo1 .customer-details-page .cdx-note-editor {
    display: grid;
    gap: .75rem;
    padding: 1rem 1.25rem;
}

body.demo1 .customer-details-page .cdx-note-editor[hidden],
body.demo1 .customer-details-page .cdx-hidden {
    display: none !important;
}

body.demo1 .customer-details-page .cdx-note-editor textarea {
    min-height: 7rem;
    resize: vertical;
}

body.demo1 .customer-details-page .cdx-note-actions,
body.demo1 .customer-details-page .cdx-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

body.demo1 .customer-details-page .cdx-usage-card .kt-card-content {
    padding: 1rem 1.25rem;
}

body.demo1 .customer-details-page .cdx-usage-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body.demo1 .customer-details-page .cdx-usage-values span {
    display: grid;
    gap: .2rem;
}

body.demo1 .customer-details-page .cdx-usage-values small,
body.demo1 .customer-details-page .cdx-usage-card p {
    color: var(--muted-foreground);
    font-size: .7rem;
}

body.demo1 .customer-details-page .cdx-usage-values strong {
    color: var(--foreground);
    font-size: .875rem;
    font-weight: 600;
}

body.demo1 .customer-details-page .cdx-progress {
    height: .375rem;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--muted);
}

body.demo1 .customer-details-page .cdx-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

body.demo1 .customer-details-page .cdx-usage-card p {
    margin: .5rem 0 0;
}

body.demo1 .customer-details-page .cdx-onu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.25rem;
}

body.demo1 .customer-details-page .cdx-onu-grid > div {
    display: grid;
    min-width: 0;
    gap: .25rem;
}

body.demo1 .customer-details-page .cdx-onu-grid strong {
    text-align: start;
}

body.demo1 .customer-details-page .cdx-table-card {
    min-width: 0;
    overflow: visible;
}

body.demo1 .customer-details-page .cdx-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    color: var(--foreground);
    font-size: .8125rem;
}

body.demo1 .customer-details-page .cdx-table th,
body.demo1 .customer-details-page .cdx-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: middle;
}

body.demo1 .customer-details-page .cdx-table th {
    background: color-mix(in srgb, var(--muted) 64%, var(--card));
    color: var(--muted-foreground);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.demo1 .customer-details-page .cdx-table tbody tr:hover td {
    background: color-mix(in srgb, var(--muted) 45%, transparent);
}

/* Collapse the internet-sessions table to the 5 most recent on all viewports;
   the toggle button reveals the full history on demand. */
body.demo1 .customer-details-page #InternetHistory:not(.cdx-history-expanded) .cdx-table tbody tr:nth-child(n+6) {
    display: none !important;
}

body.demo1 .customer-details-page .cdx-mobile-history-footer {
    display: flex;
    justify-content: center;
    padding: .875rem 1rem;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 42%, var(--card));
}

body.demo1 .customer-details-page .cdx-table td small {
    display: block;
    margin-top: .2rem;
    color: var(--muted-foreground);
    font-size: .7rem;
}

body.demo1 .customer-details-page .cdx-table tfoot th {
    background: var(--card);
    color: var(--foreground);
}

body.demo1 .customer-details-page .cdx-empty {
    display: flex;
    min-height: 7rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--muted-foreground);
    text-align: center;
}

body.demo1 .customer-details-page .cdx-action-menu {
    position: relative;
}

body.demo1 .customer-details-page .cdx-action-menu summary {
    list-style: none;
    cursor: pointer;
}

body.demo1 .customer-details-page .cdx-action-menu summary::-webkit-details-marker {
    display: none;
}

body.demo1 .customer-details-page .cdx-action-menu-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + .35rem);
    right: 0;
    display: grid;
    min-width: 11rem;
    padding: .35rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: var(--popover);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

body.demo1 .customer-details-page .cdx-action-menu-panel a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .625rem;
    border-radius: .375rem;
    color: var(--foreground);
    font-size: .75rem;
    font-weight: 500;
}

body.demo1 .customer-details-page .cdx-action-menu-panel a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

body.demo1 .customer-details-page .cdx-graph-grid,
body.demo1 .customer-details-page .cdx-operation-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body.demo1 .customer-details-page .cdx-graph-card {
    min-width: 0;
    overflow: hidden;
}

body.demo1 .customer-details-page .cdx-graph-card .kt-card-content {
    padding: 1rem;
    background: color-mix(in srgb, var(--muted) 36%, var(--card));
}

body.demo1 .customer-details-page .cdx-graph-card img {
    display: block;
    width: 100%;
    max-height: 20rem;
    object-fit: contain;
    border-radius: .5rem;
}

body.demo1 .customer-details-page .cdx-channel {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
}

body.demo1 .customer-details-page .cdx-message {
    display: block;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.demo1 .customer-details-page .cdx-operation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

body.demo1 .customer-details-page .cdx-operation-list {
    padding: .5rem;
}

body.demo1 .customer-details-page .cdx-operation-list > a,
body.demo1 .customer-details-page .cdx-operation-list > button {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 3.75rem;
    grid-template-columns: 1.25rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    text-align: start;
}

body.demo1 .customer-details-page .cdx-operation-list > a:hover,
body.demo1 .customer-details-page .cdx-operation-list > a:focus,
body.demo1 .customer-details-page .cdx-operation-list > button:hover,
body.demo1 .customer-details-page .cdx-operation-list > button:focus {
    background: var(--primary-light);
    color: var(--primary);
}

body.demo1 .customer-details-page .cdx-operation-list > a + a,
body.demo1 .customer-details-page .cdx-operation-list > a + button,
body.demo1 .customer-details-page .cdx-operation-list > button + a,
body.demo1 .customer-details-page .cdx-operation-list > button + button {
    border-top: 1px solid var(--border);
    border-radius: 0;
}

body.demo1 .customer-details-page .cdx-operation-list span {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

body.demo1 .customer-details-page .cdx-operation-list strong {
    font-size: .8125rem;
    font-weight: 600;
}

body.demo1 .customer-details-page .cdx-operation-list small {
    color: var(--muted-foreground);
    font-size: .7rem;
    line-height: 1.25;
}

body.demo1 .customer-details-page .cdx-operation-list > a > i:first-child,
body.demo1 .customer-details-page .cdx-operation-list > button > i:first-child {
    color: var(--primary);
    font-size: 1rem;
}

body.demo1 .customer-details-page .cdx-operation-list > a > i:last-child,
body.demo1 .customer-details-page .cdx-operation-list > button > i:last-child {
    color: var(--muted-foreground);
    font-size: .75rem;
}

body.demo1 .customer-details-page .cdx-subscription-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: .75rem;
}

body.demo1 .customer-details-page .cdx-subscription-alert > div {
    display: grid;
    flex: 1;
    gap: .2rem;
}

body.demo1 .customer-details-page .cdx-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 1279.98px) {
    body.demo1 .customer-details-page .cdx-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    body.demo1 .customer-details-page .cdx-hero-content {
        align-items: flex-start;
        flex-direction: column;
    }

    body.demo1 .customer-details-page .cdx-primary-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.demo1 .customer-details-page .cdx-operation-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    body.demo1 .customer-details-page .cdx-workspace {
        gap: 1rem;
    }

    body.demo1 .customer-details-page .cdx-hero-content {
        padding: 1rem;
    }

    body.demo1 .customer-details-page .cdx-identity {
        align-items: flex-start;
    }

    body.demo1 .customer-details-page .cdx-avatar {
        width: 2.75rem;
        height: 2.75rem;
        flex-basis: 2.75rem;
        border-radius: .625rem;
    }

    body.demo1 .customer-details-page .cdx-primary-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.demo1 .customer-details-page .cdx-primary-actions .kt-btn {
        width: 100%;
    }

    body.demo1 .customer-details-page .cdx-kpis,
    body.demo1 .customer-details-page .cdx-overview-grid,
    body.demo1 .customer-details-page .cdx-onu-grid,
    body.demo1 .customer-details-page .cdx-graph-grid {
        grid-template-columns: 1fr;
    }

    body.demo1 .customer-details-page .cdx-kpi {
        padding: .75rem 1rem;
    }

    body.demo1 .customer-details-page .cdx-kpi + .cdx-kpi {
        border-top: 1px solid var(--border);
        border-inline-start: 0;
    }

    body.demo1 .customer-details-page .cdx-section-menu {
        top: 4rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: -.25rem;
        overflow-x: visible;
    }

    body.demo1 .customer-details-page .cdx-section-menu a.is-active {
        background: var(--primary-light);
        color: var(--primary);
    }

    body.demo1 .customer-details-page .cdx-workspace > .cdx-section {
        display: none;
    }

    body.demo1 .customer-details-page .cdx-workspace > .cdx-section.is-active {
        display: grid;
    }

    body.demo1 .customer-details-page #InternetHistory:not(.cdx-history-expanded) .cdx-table tbody tr:nth-child(n+6) {
        display: none !important;
    }

    body.demo1 .customer-details-page .cdx-mobile-history-footer {
        display: flex;
        justify-content: center;
        padding: .875rem 1rem;
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--muted) 42%, var(--card));
    }

    body.demo1 .customer-details-page .cdx-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .15rem;
    }

    body.demo1 .customer-details-page .cdx-header-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    body.demo1 .customer-details-page .cdx-table tfoot tr {
        display: block;
        width: 100%;
    }

    body.demo1 .customer-details-page .cdx-table tfoot th {
        display: grid;
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(6.75rem, 38%) minmax(0, 1fr);
        gap: .75rem;
        padding: .45rem 0 !important;
        border: 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.demo1 .customer-details-page .cdx-table tfoot th::before {
        content: attr(data-label);
        color: var(--muted-foreground);
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    body.demo1 .customer-details-page .cdx-table tfoot th[aria-hidden="true"] {
        display: none;
    }

    body.demo1 .customer-details-page .cdx-subscription-alert {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 359.98px) {
    body.demo1 .customer-details-page .cdx-primary-actions {
        grid-template-columns: 1fr;
    }

    body.demo1 .customer-details-page .cdx-detail-list > div {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    body.demo1 .customer-details-page .cdx-detail-list strong {
        text-align: start;
    }
}

/* ============================================================
   Semantic color pass (balanced). Every value below is an existing
   theme token, scoped to body.demo1 .customer-details-page only, so
   nothing here can leak into other pages.
   ============================================================ */

/* Hero — primary accent strip + gradient avatar */
body.demo1 .customer-details-page .cdx-hero {
    border-top: 3px solid var(--primary);
}
body.demo1 .customer-details-page .cdx-avatar {
    background: linear-gradient(135deg, var(--primary), var(--primary-active));
    color: var(--primary-foreground);
}

/* Status pills read as solid semantic chips instead of faint outlines */
body.demo1 .customer-details-page .cdx-name-line .kt-badge-outline.kt-badge-success {
    background: var(--success-light); color: var(--success);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
body.demo1 .customer-details-page .cdx-name-line .kt-badge-outline.kt-badge-danger {
    background: var(--danger-light); color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
body.demo1 .customer-details-page .cdx-name-line .kt-badge-outline.kt-badge-warning {
    background: var(--warning-light); color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

/* KPI summary row — a colored top accent per tile */
body.demo1 .customer-details-page .cdx-kpi { border-top: 2px solid transparent; }
body.demo1 .customer-details-page .cdx-kpi:nth-child(1) { border-top-color: var(--primary); }
body.demo1 .customer-details-page .cdx-kpi:nth-child(2) { border-top-color: var(--info); }
body.demo1 .customer-details-page .cdx-kpi:nth-child(3) { border-top-color: var(--warning); }
body.demo1 .customer-details-page .cdx-kpi:nth-child(4) { border-top-color: var(--success); }

/* Section-menu tabs keep their own hue */
body.demo1 .customer-details-page .cdx-section-menu a:nth-child(1) i { color: var(--primary); }
body.demo1 .customer-details-page .cdx-section-menu a:nth-child(2) i { color: var(--info); }
body.demo1 .customer-details-page .cdx-section-menu a:nth-child(3) i { color: var(--success); }
body.demo1 .customer-details-page .cdx-section-menu a:nth-child(4) i { color: var(--warning); }
body.demo1 .customer-details-page .cdx-section-menu a:nth-child(5) i { color: var(--info); }
body.demo1 .customer-details-page .cdx-section-menu a:nth-child(6) i { color: var(--destructive); }
body.demo1 .customer-details-page .cdx-section-menu a.is-active i,
body.demo1 .customer-details-page .cdx-section-menu a:hover i { color: inherit; }

/* Card-title icons become tinted chips, coloured per section */
body.demo1 .customer-details-page .kt-card-title i {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: .5rem;
    background: var(--primary-light);
    color: var(--primary);
}
body.demo1 .customer-details-page .kt-card:has(.ki-receipt-square) .kt-card-title i { background: var(--info-light); color: var(--info); }
body.demo1 .customer-details-page .kt-card:has(.ki-chart-line) .kt-card-title i { background: var(--success-light); color: var(--success); }
body.demo1 .customer-details-page .kt-card:has(.ki-notepad) .kt-card-title i { background: var(--warning-light); color: var(--warning); }
body.demo1 .customer-details-page .kt-card:has(.ki-abstract-26) .kt-card-title i { background: var(--info-light); color: var(--info); }
body.demo1 .customer-details-page #InternetHistory .kt-card-title i { background: var(--success-light); color: var(--success); }

/* Usage bar — threshold tone (class set in the blade) */
body.demo1 .customer-details-page .cdx-progress.is-success span { background: var(--success); }
body.demo1 .customer-details-page .cdx-progress.is-warning span { background: var(--warning); }
body.demo1 .customer-details-page .cdx-progress.is-danger span  { background: var(--destructive); }

/* Positive counterpart to the existing .cdx-text-danger helper */
body.demo1 .customer-details-page .cdx-text-success { color: var(--success) !important; }

/* Tables — tinted header + gentle zebra so long lists scan easily */
body.demo1 .customer-details-page .cdx-table thead th {
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
    color: var(--foreground);
}
body.demo1 .customer-details-page .cdx-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--muted) 32%, transparent);
}
body.demo1 .customer-details-page .cdx-table tfoot th {
    background: color-mix(in srgb, var(--success) 8%, var(--card));
}

/* Access network — turn the bare grid into tidy stat tiles and give the
   "Full ONU details" link a proper full-width action row of its own. */
body.demo1 .customer-details-page .cdx-onu-grid {
    gap: .625rem;
    padding: 1rem 1.25rem 1.25rem;
}
body.demo1 .customer-details-page .cdx-onu-grid > div {
    gap: .35rem;
    padding: .7rem .85rem;
    border: 1px solid var(--border);
    border-radius: .625rem;
    background: color-mix(in srgb, var(--muted) 40%, var(--card));
}
body.demo1 .customer-details-page .cdx-onu-grid > div span {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .7rem;
}
body.demo1 .customer-details-page .cdx-onu-grid > div strong {
    font-size: .9rem;
    font-weight: 600;
}
body.demo1 .customer-details-page .cdx-onu-grid > div:has(.kt-btn) {
    grid-column: 1 / -1;
    padding: 0;
    border: 0;
    background: transparent;
    justify-items: end;
}

/* Recharge (success) buttons — the Metronic theme ships no kt-btn-success
   fill, so this variant rendered plain. Give it a green fill to match the
   coloured Activate (primary) / Suspend (destructive) actions. */
body.demo1 .customer-details-page .kt-btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
}
body.demo1 .customer-details-page .kt-btn-success:hover {
    background-color: color-mix(in oklab, var(--success) 88%, transparent);
    border-color: color-mix(in oklab, var(--success) 88%, transparent);
    color: #fff;
}