/* =========================================================
   RAZ CLOUD — SOURCE COMPONENT SYSTEM V5
   Shared forms / services / billing / network / tables
   Sidebar geometry untouched
   ========================================================= */


/* =========================================================
   COMMON PAGE BODY
   ========================================================= */

.source-page,
.ops-page,
.customer-page,
main.main {
    color: var(--raz-text);
}


/* =========================================================
   SECTION CARDS
   ========================================================= */

.system-grid,
.ops-grid,
.customer-grid {
    gap: 12px !important;
}


.system-body,
.ops-body,
.customer-section-body {
    padding: 14px !important;
}


.setting-section {
    padding: 14px !important;

    border-color:
        var(--raz-border) !important;
}


.setting-section h3 {
    margin: 0 0 3px !important;

    color:
        var(--raz-text) !important;

    font-size:
        10px !important;
}


.setting-section p {
    margin: 0 0 12px !important;

    color:
        var(--raz-muted) !important;

    font-size:
        7px !important;
}


/* =========================================================
   FORMS
   ========================================================= */

.system-form,
.customer-form,
.ops-form {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:
        11px 12px !important;
}


.system-field,
.customer-field,
.ops-field {
    min-width: 0;
}


.system-field > span,
.customer-field > span,
.ops-field > span,
.system-field > label,
.customer-field > label,
.ops-field > label {
    display: block;

    margin:
        0 0 5px !important;

    color:
        var(--raz-muted) !important;

    font-size:
        7px !important;

    font-weight:
        600 !important;
}


.system-field input,
.system-field select,
.system-field textarea,

.customer-field input,
.customer-field select,
.customer-field textarea,

.ops-field input,
.ops-field select,
.ops-field textarea {
    width: 100% !important;

    box-sizing:
        border-box !important;

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        var(--raz-radius) !important;

    background:
        var(--raz-surface-2) !important;

    color:
        var(--raz-text) !important;

    outline:
        none !important;

    font-size:
        8px !important;
}


.system-field input,
.system-field select,
.customer-field input,
.customer-field select,
.ops-field input,
.ops-field select {
    height:
        37px !important;

    padding:
        0 10px !important;
}


.system-field textarea,
.customer-field textarea,
.ops-field textarea {
    min-height:
        76px;

    padding:
        9px 10px !important;
}


.system-field input:focus,
.system-field select:focus,
.system-field textarea:focus,

.customer-field input:focus,
.customer-field select:focus,
.customer-field textarea:focus,

.ops-field input:focus,
.ops-field select:focus,
.ops-field textarea:focus {
    border-color:
        var(--raz-primary) !important;

    box-shadow:
        0 0 0 3px
        rgba(
            var(--raz-primary-rgb),
            .10
        ) !important;
}


/* =========================================================
   FORM FOOTER
   ========================================================= */

.system-actions,
.customer-actions,
.ops-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    margin-top:
        13px !important;
}


/* =========================================================
   BUTTON CORE
   ========================================================= */

.source-btn,
.ops-button,
.customer-button {
    min-height:
        32px;

    padding:
        0 11px !important;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        var(--raz-radius);

    background:
        var(--raz-surface-2);

    color:
        var(--raz-muted);

    cursor:
        pointer;

    font-size:
        7px !important;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        .15s ease;
}


.source-btn:hover,
.ops-button:hover,
.customer-button:hover {
    border-color:
        rgba(
            var(--raz-primary-rgb),
            .40
        );

    color:
        var(--raz-primary);
}


.source-btn.primary,
.ops-button.primary,
.customer-button.primary {
    border-color:
        var(--raz-primary) !important;

    background:
        var(--raz-primary) !important;

    color:
        #fff !important;
}


/* =========================================================
   SUMMARY / KPI CARDS
   ========================================================= */

.system-summary,
.ops-summary,
.service-summary {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:
        10px !important;

    margin-top:
        17px !important;
}


.system-summary article,
.ops-summary article,
.service-summary article {
    min-height:
        82px !important;

    padding:
        12px 13px !important;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 1px
        ) !important;

    background:
        var(--raz-surface) !important;
}


.system-summary article > span,
.ops-summary article > span,
.service-summary article > span {
    display: block;

    color:
        var(--raz-muted) !important;

    font-size:
        7px !important;
}


.system-summary article > strong,
.ops-summary article > strong,
.service-summary article > strong {
    display: block;

    margin-top:
        7px;

    color:
        var(--raz-text) !important;

    font-size:
        18px !important;
}


.system-summary article > small,
.ops-summary article > small,
.service-summary article > small {
    display: block;

    margin-top:
        4px;

    color:
        var(--raz-muted-2) !important;

    font-size:
        6.5px !important;
}


/* =========================================================
   SERVICE PAGE FILTER TABS
   ========================================================= */

.service-tabs,
.ops-tabs,
.session-tabs {
    display: flex;

    align-items: center;

    gap:
        6px;

    flex-wrap:
        wrap;
}


.service-tabs button,
.ops-tabs button,
.session-tabs button {
    height:
        30px;

    padding:
        0 11px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        999px;

    background:
        transparent;

    color:
        var(--raz-muted);

    cursor:
        pointer;

    font-size:
        7px;
}


.service-tabs button.active,
.ops-tabs button.active,
.session-tabs button.active {
    border-color:
        var(--raz-primary);

    background:
        rgba(
            var(--raz-primary-rgb),
            .10
        );

    color:
        var(--raz-primary);
}


/* =========================================================
   SERVICE ROW STATUS
   ========================================================= */

.status-online,
.status-active {
    color:
        var(--raz-accent) !important;
}


.status-pending {
    color:
        var(--raz-warning) !important;
}


.status-disabled,
.status-error {
    color:
        var(--raz-danger) !important;
}


/* =========================================================
   BILLING VALUE COLORS
   ========================================================= */

.money-total,
.payment-total {
    color:
        var(--raz-text) !important;

    font-weight:
        700;
}


.money-paid,
.payment-paid {
    color:
        var(--raz-accent) !important;

    font-weight:
        700;
}


.money-due,
.payment-due {
    color:
        var(--raz-warning) !important;

    font-weight:
        700;
}


/* =========================================================
   VOUCHERS
   ========================================================= */

.voucher-code {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        27px;

    padding:
        0 8px;

    border:
        1px dashed
        rgba(
            var(--raz-primary-rgb),
            .30
        );

    border-radius:
        var(--raz-radius);

    background:
        rgba(
            var(--raz-primary-rgb),
            .05
        );

    color:
        var(--raz-primary);

    font-family:
        monospace;

    font-size:
        8px;
}


/* =========================================================
   PLAN CARDS
   ========================================================= */

.plan-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px,1fr)
        );

    gap:
        10px;
}


.plan-card {
    padding:
        14px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        calc(
            var(--raz-radius)
            + 1px
        );

    background:
        var(--raz-surface);
}


.plan-card h3 {
    margin:
        0 0 4px;

    color:
        var(--raz-text);

    font-size:
        11px;
}


.plan-card small {
    color:
        var(--raz-muted);

    font-size:
        7px;
}


/* =========================================================
   IP MANAGER
   ========================================================= */

.candidate-box {
    border:
        1px solid
        rgba(
            var(--raz-primary-rgb),
            .20
        ) !important;

    border-radius:
        var(--raz-radius) !important;

    background:
        rgba(
            var(--raz-primary-rgb),
            .05
        ) !important;
}


.candidate-box strong {
    color:
        var(--raz-primary) !important;
}


.ipam-network {
    background:
        transparent !important;
}


/* =========================================================
   DIAGNOSTICS
   ========================================================= */

.diag-item {
    min-height:
        62px;

    padding:
        11px !important;

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        var(--raz-radius) !important;

    background:
        var(--raz-surface-2) !important;
}


.diag-item span {
    color:
        var(--raz-muted) !important;

    font-size:
        7px !important;
}


.diag-item strong {
    margin-top:
        5px;

    font-size:
        10px !important;
}


.diag-good {
    color:
        var(--raz-accent) !important;
}


.diag-warn {
    color:
        var(--raz-warning) !important;
}


/* =========================================================
   INFRASTRUCTURE
   ========================================================= */

.metric-row {
    min-height:
        42px !important;

    border-color:
        var(--raz-border) !important;
}


.metric-row span {
    color:
        var(--raz-muted) !important;

    font-size:
        7px !important;
}


.metric-row strong {
    color:
        var(--raz-text) !important;

    font-size:
        8px !important;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress-track {
    height:
        5px !important;

    border-radius:
        999px !important;

    background:
        var(--raz-border) !important;

    overflow:
        hidden;
}


.progress-bar {
    height:
        100% !important;

    border-radius:
        inherit;

    background:
        var(--raz-primary) !important;
}


/* =========================================================
   CUSTOMER PROFILE
   ========================================================= */

.customer-profile-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:
        12px;
}


.customer-section {
    border:
        1px solid
        var(--raz-border);

    border-radius:
        calc(
            var(--raz-radius)
            + 1px
        );

    background:
        var(--raz-surface);

    overflow:
        hidden;
}


.customer-section-head {
    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        9px 13px;

    border-bottom:
        1px solid
        var(--raz-border);
}


.customer-section-head h3 {
    margin: 0;

    color:
        var(--raz-text);

    font-size:
        10px;
}


.customer-section-head small {
    display: block;

    margin-top:
        3px;

    color:
        var(--raz-muted);

    font-size:
        7px;
}


/* =========================================================
   NEW CUSTOMER STEPPER
   ========================================================= */

.customer-stepper {
    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        7px;
}


.customer-step {
    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 10px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        var(--raz-radius);

    background:
        var(--raz-surface-2);

    color:
        var(--raz-muted);
}


.customer-step.active {
    border-color:
        var(--raz-primary);

    background:
        rgba(
            var(--raz-primary-rgb),
            .08
        );

    color:
        var(--raz-primary);
}


.customer-step-number {
    width:
        24px;

    height:
        24px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(
            var(--raz-primary-rgb),
            .10
        );

    color:
        var(--raz-primary);

    font-size:
        7px;

    font-weight:
        700;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

html[data-raz-theme="light"]
.system-summary article,

html[data-raz-theme="light"]
.ops-summary article,

html[data-raz-theme="light"]
.service-summary article,

html[data-raz-theme="light"]
.plan-card,

html[data-raz-theme="light"]
.customer-section {
    background:
        #fff !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px) {

    .system-form,
    .customer-form,
    .ops-form,

    .customer-profile-grid {
        grid-template-columns:
            1fr;
    }


    .system-summary,
    .ops-summary,
    .service-summary {
        grid-template-columns:
            1fr 1fr;
    }


    .customer-stepper {
        grid-template-columns:
            1fr 1fr;
    }

}


@media(max-width:560px) {

    .system-summary,
    .ops-summary,
    .service-summary,

    .customer-stepper {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   NETWORK MAP — THEME-AWARE NODES
   ========================================================= */

.network-node,
.network-cloud-node,
.network-edge-node,
.topology-node {

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 2px
        ) !important;

    background:
        var(--raz-surface) !important;

    color:
        var(--raz-text) !important;

    box-shadow:
        none !important;
}


.network-node strong,
.network-cloud-node strong,
.network-edge-node strong,
.topology-node strong {

    color:
        var(--raz-text) !important;
}


.network-node span,
.network-cloud-node span,
.network-edge-node span,
.topology-node span {

    color:
        var(--raz-muted) !important;
}


html[data-raz-theme="light"]
.network-node,

html[data-raz-theme="light"]
.network-cloud-node,

html[data-raz-theme="light"]
.network-edge-node,

html[data-raz-theme="light"]
.topology-node {

    background:
        #ffffff !important;
}


html[data-raz-theme="dark"]
.network-node,

html[data-raz-theme="dark"]
.network-cloud-node,

html[data-raz-theme="dark"]
.network-edge-node,

html[data-raz-theme="dark"]
.topology-node {

    background:
        var(--raz-surface) !important;
}


/* Node icon */

.network-node .node-icon,
.network-cloud-node .node-icon,
.network-edge-node .node-icon,
.topology-node .node-icon {

    border:
        1px solid
        rgba(
            var(--raz-primary-rgb),
            .22
        ) !important;

    background:
        rgba(
            var(--raz-primary-rgb),
            .07
        ) !important;

    color:
        var(--raz-primary) !important;
}


/* Branch cards */

.network-branch {

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 1px
        ) !important;

    background:
        var(--raz-surface) !important;

    color:
        var(--raz-text) !important;
}


.network-branch strong {

    color:
        var(--raz-text) !important;
}


.network-branch span {

    color:
        var(--raz-muted) !important;
}


/* Connection lines */

.network-line,
.topology-line {

    background:
        rgba(
            var(--raz-primary-rgb),
            .30
        ) !important;
}


.network-line.good,
.topology-line.good {

    background:
        var(--raz-accent) !important;
}


.network-line.pending,
.topology-line.pending {

    background:
        var(--raz-warning) !important;
}


/* =========================================================
   CUSTOMER PROFILE — SOURCE POLISH
   ========================================================= */

.customer-profile-grid {

    gap:
        12px !important;
}


/* Profile summary cards */

.customer-summary,
.customer-profile-summary {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        10px !important;
}


.customer-summary > *,
.customer-profile-summary > * {

    min-height:
        78px;

    padding:
        12px 14px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        calc(
            var(--raz-radius)
            + 1px
        );

    background:
        var(--raz-surface);
}


.customer-summary span,
.customer-profile-summary span {

    color:
        var(--raz-muted);

    font-size:
        7px;
}


.customer-summary strong,
.customer-profile-summary strong {

    display:
        block;

    margin-top:
        6px;

    color:
        var(--raz-text);

    font-size:
        16px;
}


/* Section number */

.customer-section-number,
.customer-step-badge {

    width:
        28px !important;

    height:
        28px !important;

    min-width:
        28px !important;

    display:
        grid !important;

    place-items:
        center !important;

    border:
        1px solid
        rgba(
            var(--raz-primary-rgb),
            .24
        ) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 1px
        ) !important;

    background:
        rgba(
            var(--raz-primary-rgb),
            .07
        ) !important;

    color:
        var(--raz-primary) !important;

    font-size:
        7px !important;

    font-weight:
        800 !important;
}


/* Section header */

.customer-section-head {

    min-height:
        52px !important;

    padding:
        10px 13px !important;

    background:
        transparent !important;
}


.customer-section-head > div:first-child {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.customer-section-head h3 {

    font-size:
        10px !important;
}


.customer-section-head small {

    font-size:
        6.5px !important;
}


/* Save button */

.customer-section-head .source-btn,
.customer-section-head button {

    min-height:
        31px !important;

    padding:
        0 11px !important;

    border-radius:
        var(--raz-radius) !important;

    font-size:
        7px !important;
}


/* Service selector */

.service-selector,
.customer-service-tabs {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        12px;
}


.service-selector button,
.customer-service-tabs button {

    height:
        31px;

    padding:
        0 12px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        999px;

    background:
        transparent;

    color:
        var(--raz-muted);

    cursor:
        pointer;

    font-size:
        7px;
}


.service-selector button.active,
.customer-service-tabs button.active {

    border-color:
        var(--raz-primary);

    background:
        rgba(
            var(--raz-primary-rgb),
            .09
        );

    color:
        var(--raz-primary);
}


/* Light mode */

html[data-raz-theme="light"]
.customer-summary > *,

html[data-raz-theme="light"]
.customer-profile-summary > *,

html[data-raz-theme="light"]
.customer-section {

    background:
        #ffffff !important;
}


/* Dark mode */

html[data-raz-theme="dark"]
.customer-summary > *,

html[data-raz-theme="dark"]
.customer-profile-summary > *,

html[data-raz-theme="dark"]
.customer-section {

    background:
        var(--raz-surface) !important;
}


@media(max-width:900px) {

    .customer-summary,
    .customer-profile-summary {

        grid-template-columns:
            1fr 1fr;
    }

}


@media(max-width:560px) {

    .customer-summary,
    .customer-profile-summary {

        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   NEW CUSTOMER — SOURCE FLOW POLISH
   ========================================================= */

.customer-stepper {

    margin-bottom:
        14px !important;
}


.customer-step {

    position:
        relative;

    min-height:
        48px !important;

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 1px
        ) !important;

    background:
        var(--raz-surface) !important;

    transition:
        border-color .15s ease,
        background .15s ease;
}


.customer-step.active {

    border-color:
        var(--raz-primary) !important;

    background:
        rgba(
            var(--raz-primary-rgb),
            .06
        ) !important;
}


.customer-step.completed {

    border-color:
        rgba(
            var(--raz-accent-rgb),
            .40
        ) !important;
}


.customer-step.completed
.customer-step-number {

    background:
        var(--raz-accent) !important;

    color:
        #ffffff !important;
}


/* Step text */

.customer-step strong {

    display:
        block;

    color:
        var(--raz-text);

    font-size:
        8px;
}


.customer-step small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--raz-muted);

    font-size:
        6.5px;
}