.source-customers {
    padding-top: 24px;
}

.source-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.source-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.source-page-header h1 {
    margin: 0;
    font-size: 25px;
}

.source-page-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.source-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.source-search {
    width: min(400px, 31vw);
    height: 41px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 13px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: var(--surface);
}

.source-search span {
    color: #62778e;
    font-size: 18px;
}

.source-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 10px;
}

.source-search input::placeholder {
    color: #53677d;
}


/* FILTER CARD */

.source-filter-card {
    display: grid;
    grid-template-columns: 175px 1fr;
    gap: 14px;

    margin-top: 25px;
    padding: 13px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--surface);
}

.router-filter label,
.source-filter-area > label {
    display: block;
    margin: 0 0 7px 3px;

    color: #667b91;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .8px;
}

.router-filter select {
    width: 100%;
    height: 34px;

    border: 1px solid var(--border);
    border-radius: 9px;

    outline: 0;

    padding: 0 9px;

    background: rgba(255,255,255,.025);
    color: #9cafc3;

    font-size: 9px;
}

.source-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.source-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.source-filter {
    min-height: 31px;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 0 10px;

    border: 1px solid rgba(47,129,247,.35);
    border-radius: 20px;

    background: transparent;
    color: #78a8ed;

    cursor: pointer;

    font-size: 8px;
    font-weight: 700;

    transition: .16s ease;
}

.source-filter b {
    min-width: 16px;
    padding: 2px 4px;
    border-radius: 12px;

    background: rgba(255,255,255,.06);

    font-size: 7px;
}

.source-filter:hover,
.source-filter.active {
    background: rgba(47,129,247,.12);
    color: #b7d4ff;
}

.source-filter.paid {
    border-color: rgba(53,208,127,.35);
    color: var(--good);
}

.source-filter.unpaid {
    border-color: rgba(99,102,241,.35);
    color: #818cf8;
}

.source-filter.pending {
    border-color: rgba(255,184,77,.35);
    color: var(--warning);
}

.source-filter.disabled {
    border-color: rgba(239,68,68,.35);
    color: #f87171;
}

.source-filter.free {
    border-color: rgba(34,211,238,.35);
    color: #22d3ee;
}

.source-filter.inactive {
    border-color: rgba(148,163,184,.25);
    color: #94a3b8;
}

.source-filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;

    padding-left: 10px;
    border-left: 1px solid var(--border);
}

.source-reset,
.source-new-customer {
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px;

    border-radius: 18px;

    font-size: 8px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
}

.source-reset {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.025);
    color: #93a5b9;
}

.source-new-customer {
    border: 1px solid rgba(32,214,199,.30);
    background: var(--accent);
    color: #031c1a;
}


/* TABLE */

.source-table-card {
    margin-top: 14px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--surface);

    overflow: hidden;
}

.source-table-tools {
    min-height: 62px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 15px;

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

.source-table-title h2 {
    margin: 0;
    font-size: 12px;
}

.source-table-title span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 8px;
}

.source-table-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.source-table-controls label {
    color: #687c91;
    font-size: 8px;
}

.source-table-controls select,
.source-table-controls button {
    height: 29px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: rgba(255,255,255,.02);
    color: #8fa2b7;

    font-size: 8px;
}

.source-table-controls select {
    margin-left: 5px;
    padding: 0 6px;
}

.source-table-controls button {
    padding: 0 10px;
    cursor: pointer;
}

.source-table-scroll {
    overflow-x: auto;
}

.source-customer-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.source-customer-table th {
    padding: 12px 10px;

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

    background: rgba(255,255,255,.018);

    color: #657c93;

    text-align: center;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.source-customer-table td {
    padding: 11px 10px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: #9bacbd;
    text-align: center;
    font-size: 9px;
}

.source-customer-table tfoot th {
    border-top: 1px solid var(--border);
    border-bottom: 0;

    background: rgba(32,214,199,.035);

    color: #7290a6;
}

.source-customer-table tfoot .grand-total th {
    background: rgba(32,214,199,.065);
    color: #9fc4bc;
}

.source-empty-row td {
    padding: 0;
}

.source-empty-state {
    min-height: 320px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 35px;
}

.source-empty-symbol {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(32,214,199,.20);
    border-radius: 14px;

    background: rgba(32,214,199,.05);

    color: var(--accent);
    font-size: 23px;
}

.source-empty-state h3 {
    margin: 13px 0 5px;
    color: var(--text);
    font-size: 12px;
}

.source-empty-state p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 9px;
}

.source-empty-state a {
    height: 32px;

    display: inline-flex;
    align-items: center;

    padding: 0 12px;

    border-radius: 17px;

    background: var(--accent);
    color: #03201d;

    text-decoration: none;

    font-size: 8px;
    font-weight: 800;
}


/* PAGINATION */

.source-pagination {
    min-height: 52px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 15px;

    border-top: 1px solid var(--border);
}

.source-pagination > span {
    color: #5f7388;
    font-size: 8px;
}

.source-pagination div {
    display: flex;
    gap: 4px;
}

.source-pagination button {
    min-width: 29px;
    height: 28px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: rgba(255,255,255,.02);
    color: #74879c;

    font-size: 8px;
}

.source-pagination button.current {
    border-color: rgba(32,214,199,.25);
    background: rgba(32,214,199,.08);
    color: var(--accent);
}


@media (max-width: 1050px) {
    .source-filter-card {
        grid-template-columns: 1fr;
    }

    .source-filter-actions {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 850px) {
    .source-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .source-header-actions {
        width: 100%;
    }

    .source-search {
        width: 100%;
        flex: 1;
    }

    .source-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .source-filter-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {
    .user-menu {
        display: none;
    }
}

/* =========================================================
   LIVE CUSTOMER TABLE
   ========================================================= */

.source-customer-table tbody tr:not(.source-empty-row) {
    transition:
        background .16s ease,
        box-shadow .16s ease;
}

.source-customer-table tbody tr:not(.source-empty-row):hover {
    background: rgba(255,255,255,.022);
}

.source-customer-table tr.created-highlight {
    background: rgba(32,214,199,.055);

    box-shadow:
        inset 3px 0 0 var(--accent);
}

.identity-cell,
.address-cell,
.connection-cell {
    text-align: left !important;
}

.identity-cell strong,
.address-cell strong,
.connection-cell strong {
    display: block;

    color: #c2cfdb;

    font-size: 9px;
}

.identity-cell span,
.address-cell span,
.connection-cell span {
    display: block;

    margin-top: 4px;

    color: #71869a;

    font-size: 8px;
}

.identity-cell small,
.connection-cell small {
    display: block;

    margin-top: 3px;

    color: #536a80;

    font-size: 7px;
}

.billing-breakdown,
.billing-summary-cell {
    min-width: 145px;
}

.billing-breakdown > div,
.billing-summary-cell > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;

    padding: 2px 0;
}

.billing-breakdown span,
.billing-summary-cell span {
    color: #62788d;

    font-size: 7px;
}

.billing-breakdown strong,
.billing-summary-cell strong {
    color: #a4b5c6;

    font-size: 8px;
}

.balance-clear {
    color: var(--good) !important;
}

.balance-due {
    color: var(--warning) !important;
}

.table-status-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.table-status,
.edge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;

    padding: 0 7px;

    border-radius: 12px;

    font-size: 7px;
    font-weight: 700;

    text-transform: capitalize;
}

.table-status.active {
    background: rgba(53,208,127,.09);
    color: var(--good);
}

.table-status.pending {
    background: rgba(255,184,77,.09);
    color: var(--warning);
}

.table-status.disabled {
    background: rgba(239,68,68,.08);
    color: #f87171;
}

.table-status.inactive {
    background: rgba(148,163,184,.08);
    color: #94a3b8;
}

.edge-status.pending {
    border: 1px solid rgba(255,184,77,.14);

    color: #8f8068;
}

.edge-status.applied {
    border: 1px solid rgba(53,208,127,.16);

    color: var(--good);
}

.action-cell {
    width: 45px;
}

.row-action {
    width: 27px;
    height: 27px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: rgba(255,255,255,.02);

    color: #71869b;

    cursor: pointer;

    font-size: 15px;
}

.row-action:hover {
    color: var(--accent);

    border-color: rgba(32,214,199,.22);

    background: rgba(32,214,199,.04);
}