/* =========================================================
   AGING DETAIL
   ========================================================= */

.aging-detail-card {
    border: 0;
    border-radius: 10px;
}


/* =========================================================
   HEADER
   ========================================================= */

.aging-detail-card .card-header {
    padding: 1rem 1.25rem;
}


/* =========================================================
   LOADING
   ========================================================= */

.aging-detail-loading {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #6c757d;
}


/* =========================================================
   STATUS SUMMARY
   ========================================================= */

.aging-status-summary {
    display: grid;

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

    gap: 12px;
}


.aging-status-card {
    padding: 14px 16px;

    border: 1px solid #e9ecef;

    border-radius: 8px;

    background: #fff;

    min-height: 95px;

    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


.aging-status-card:hover {
    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.06);

    transform:
        translateY(-1px);
}


.aging-status-name {
    font-size: 0.78rem;

    font-weight: 600;

    color: #6c757d;

    margin-bottom: 8px;
}


.aging-status-total {
    font-size: 1.35rem;

    font-weight: 700;

    color: #212529;
}


.aging-status-total small {
    font-size: 0.75rem;

    font-weight: 500;

    color: #6c757d;
}


.aging-status-meta {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-top: 6px;

    font-size: 0.72rem;

    color: #6c757d;
}


/* =========================================================
   STATUS CLASS
   ========================================================= */

.aging-status-card.status-receive,
.aging-status-title.status-receive {
    border-left: 3px solid #6f42c1;
}


.aging-status-card.status-pickup,
.aging-status-title.status-pickup {
    border-left: 3px solid #0d6efd;
}


.aging-status-card.status-delivery,
.aging-status-title.status-delivery {
    border-left: 3px solid #0dcaf0;
}


.aging-status-card.status-site,
.aging-status-title.status-site {
    border-left: 3px solid #fd7e14;
}


.aging-status-card.status-pod,
.aging-status-title.status-pod {
    border-left: 3px solid #20c997;
}


.aging-status-card.status-invoice,
.aging-status-title.status-invoice {
    border-left: 3px solid #ffc107;
}


.aging-status-card.status-paid,
.aging-status-title.status-paid {
    border-left: 3px solid #198754;
}


.aging-status-card.status-cancel,
.aging-status-title.status-cancel {
    border-left: 3px solid #dc3545;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.aging-detail-table-wrapper {

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    border: 1px solid #e9ecef;

    border-radius: 8px;
}


/*
|--------------------------------------------------------------------------
| Jangan biarkan table mengecil terlalu kecil.
|--------------------------------------------------------------------------
*/

.aging-detail-table {

    min-width: 1250px;

    width: max-content;

    margin-bottom: 0 !important;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

.aging-detail-table thead th {

    white-space: nowrap;

    padding:
        11px
        12px;

    font-size: 0.72rem;

    font-weight: 700;

    color: #6c757d;

    background: #f8f9fa;

    border-bottom:
        1px solid
        #dee2e6;
}


/* =========================================================
   TABLE BODY
   ========================================================= */

.aging-detail-table tbody td {

    padding:
        10px
        12px;

    font-size: 0.78rem;

    vertical-align: middle;

    white-space: nowrap;
}


/* =========================================================
   GROUP
   ========================================================= */

.aging-group-row td {

    background: #f8f9fa;

    font-weight: 600;

    border-top:
        1px solid
        #dee2e6;
}


.aging-group-title {

    display: flex;

    align-items: center;

    gap: 7px;
}


.aging-group-title strong {

    font-size: 0.85rem;

    color: #212529;
}


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

.aging-customer-row td {

    background: #fff;

    font-weight: 500;
}


.aging-customer-title {

    display: flex;

    align-items: center;

    gap: 7px;

    padding-left: 12px;
}


/* =========================================================
   STATUS
   ========================================================= */

.aging-status-row td {

    background: #fff;
}


.aging-status-title {

    display: flex;

    align-items: center;

    gap: 7px;

    padding-left: 24px;

    min-height: 28px;
}


.aging-status-title span {

    font-size: 0.78rem;

    font-weight: 600;

    padding-left: 5px;
}


/* =========================================================
   PROJECT
   ========================================================= */

.aging-project-row td {

    background: #fff;
}


.aging-project-title {

    display: flex;

    align-items: center;

    gap: 7px;

    padding-left: 38px;

    max-width: 400px;
}


.aging-project-title span {

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   JOB
   ========================================================= */

.aging-job-row td {

    background: #fcfcfc;
}


.aging-job-btn {

    border: 0;

    background: transparent;

    padding: 0;

    color: #495057;

    font-size: 0.76rem;

    font-family:
        monospace;

    cursor: pointer;
}


.aging-job-btn:hover {

    text-decoration:
        underline;

}


/* =========================================================
   TOGGLE
   ========================================================= */

.aging-toggle-btn {

    width: 22px;

    height: 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: #6c757d;

    font-size: 0.72rem;

    cursor: pointer;
}


.aging-toggle-btn:hover {

    color: #212529;

}


/* =========================================================
   EMPTY
   ========================================================= */

.aging-empty {

    padding: 25px;

    text-align: center;

    color: #6c757d;

    font-size: 0.8rem;
}


/* =========================================================
   JOB MODAL
   ========================================================= */

.aging-job-modal {

    position: fixed;

    inset: 0;

    z-index: 1055;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    transition:
        opacity 0.18s ease;
}


.aging-job-modal.show {

    opacity: 1;
}


.aging-job-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            0.45
        );
}


.aging-job-modal-dialog {

    position: relative;

    z-index: 1;

    width: min(
        900px,
        100%
    );

    max-height: 90vh;

    overflow: hidden;

    background: #fff;

    border-radius: 10px;

    box-shadow:
        0 15px 40px
        rgba(
            0,
            0,
            0,
            0.18
        );
}


.aging-job-modal-header {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 18px 20px;

    border-bottom:
        1px solid
        #e9ecef;
}


.aging-job-modal-title {

    font-size: 1rem;

    font-weight: 700;

    color: #212529;
}


.aging-job-modal-subtitle {

    margin-top: 4px;

    font-size: 0.75rem;

    color: #6c757d;
}


.aging-job-modal-close {

    width: 32px;

    height: 32px;

    border: 0;

    border-radius: 6px;

    background: #f8f9fa;

    color: #6c757d;

    font-size: 1.25rem;

    cursor: pointer;
}


.aging-job-modal-body {

    padding: 20px;

    max-height: calc(
        90vh - 80px
    );

    overflow-y: auto;
}


/* =========================================================
   JOB METRIC
   ========================================================= */

.aging-job-summary-grid {

    display: grid;

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

    gap: 10px;
}


.aging-job-metric {

    padding: 12px;

    border:
        1px solid
        #e9ecef;

    border-radius: 8px;
}


.aging-job-metric-label {

    font-size: 0.7rem;

    color: #6c757d;

    margin-bottom: 5px;
}


.aging-job-metric-value {

    font-size: 0.85rem;

    font-weight: 600;

    color: #212529;
}


/* =========================================================
   HISTORY
   ========================================================= */

.aging-job-history-wrapper {

    width: 100%;

    overflow-x: auto;
}


.aging-job-history-table {

    width: 100%;

    min-width: 500px;

    border-collapse: collapse;
}


.aging-job-history-table th,
.aging-job-history-table td {

    padding: 9px 10px;

    border-bottom:
        1px solid
        #e9ecef;

    text-align: left;

    font-size: 0.75rem;
}


.aging-job-history-table th {

    background: #f8f9fa;

    font-weight: 700;

    color: #6c757d;
}


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

@media (
    max-width: 768px
) {

    .aging-status-summary {

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

    }


    .aging-job-summary-grid {

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

    }


    .aging-detail-table {

        min-width: 1150px;

    }

}


@media (
    max-width: 480px
) {

    .aging-status-summary {

        grid-template-columns:
            1fr;

    }


    .aging-job-summary-grid {

        grid-template-columns:
            1fr;

    }

}

/*
|--------------------------------------------------------------------------
| JOB AGING
|--------------------------------------------------------------------------
*/

.aging-value {
    font-weight: 600;
    white-space: nowrap;
}


.aging-normal {
    color: #198754;
}


.aging-warning {
    color: #fd7e14;
}


.aging-danger {
    color: #dc3545;
}


/*
|--------------------------------------------------------------------------
| JOB ROW
|--------------------------------------------------------------------------
*/

.aging-job-row {
    background: #fcfcfc;
}


.aging-job-row:hover {
    background: #f8f9fa;
}


.aging-job-row td {
    font-size: 0.74rem;
}

/*
|--------------------------------------------------------------------------
| AGING DETAIL TOOLBAR
|--------------------------------------------------------------------------
*/

.aging-detail-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 16px;

}


.aging-detail-toolbar h5 {

    font-size: 1rem;

    font-weight: 700;

    margin: 0;

}


.aging-detail-toolbar small {

    font-size: 0.72rem;

}


.aging-detail-toolbar .btn {

    font-size: 0.72rem;

    white-space: nowrap;

}

/*
|--------------------------------------------------------------------------
| AGING DETAIL TOOLBAR
|--------------------------------------------------------------------------
*/

.aging-detail-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 16px;

}


.aging-detail-toolbar h5 {

    font-size: 1rem;

    font-weight: 700;

    margin: 0;

}


.aging-detail-toolbar small {

    font-size: 0.72rem;

}


.aging-detail-toolbar .btn {

    font-size: 0.72rem;

    white-space: nowrap;

}

/*
|--------------------------------------------------------------------------
| JOB DETAIL
|--------------------------------------------------------------------------
*/

.aging-detail-info {

    padding: 10px 12px;

    border: 1px solid #e9ecef;

    border-radius: 8px;

    background: #fff;

}


.aging-detail-info-label {

    font-size: 0.68rem;

    color: #6c757d;

    margin-bottom: 3px;

}


.aging-detail-info-value {

    font-size: 0.78rem;

    font-weight: 600;

    color: #212529;

    word-break: break-word;

}


/*
|--------------------------------------------------------------------------
| AGING CARD
|--------------------------------------------------------------------------
*/

.aging-detail-aging-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding: 16px;

    border-radius: 10px;

    background: #f8f9fa;

}


.aging-detail-aging-label {

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.04em;

}


.aging-detail-aging-value {

    font-size: 1.6rem;

    font-weight: 700;

    margin-top: 2px;

}


.aging-detail-aging-meta {

    display: flex;

    gap: 24px;

    flex-wrap: wrap;

}


.aging-detail-aging-meta > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.aging-detail-aging-meta span {

    font-size: 0.65rem;

    color: #6c757d;

}


.aging-detail-aging-meta strong {

    font-size: 0.72rem;

}


/*
|--------------------------------------------------------------------------
| HISTORY
|--------------------------------------------------------------------------
*/

.aging-history {

    position: relative;

}


.aging-history-item {

    position: relative;

    display: flex;

    gap: 12px;

    padding-bottom: 18px;

}


.aging-history-item:not(
    .is-last
) .aging-history-marker::after {

    content: '';

    position: absolute;

    top: 12px;

    bottom: -18px;

    left: 5px;

    width: 1px;

    background: #dee2e6;

}


.aging-history-marker {

    position: relative;

    width: 12px;

    min-width: 12px;

    display: flex;

    justify-content: center;

}


.aging-history-marker span {

    width: 10px;

    height: 10px;

    margin-top: 4px;

    border-radius: 50%;

    background: #0d6efd;

}


.aging-history-content {

    flex: 1;

    min-width: 0;

}


.aging-history-content strong {

    font-size: 0.78rem;

}


.aging-history-content small {

    font-size: 0.68rem;

    white-space: nowrap;

}


.aging-history-remark {

    margin-top: 4px;

    padding: 7px 9px;

    border-radius: 6px;

    background: #f8f9fa;

    color: #6c757d;

    font-size: 0.7rem;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 768px
) {

    .aging-detail-aging-card {

        align-items: flex-start;

        flex-direction: column;

    }


    .aging-detail-aging-meta {

        width: 100%;

        gap: 12px;

    }


    .aging-detail-aging-meta > div {

        flex: 1;

        min-width: 120px;

    }

}

/* =========================================================
   AGING DETAIL - DARK DASHBOARD OVERRIDES
   ========================================================= */

.aging-detail-card,
.aging-detail-card .card-body {
    background: #111827;
    color: #e5e7eb;
}

.aging-detail-card .card-header {
    background: #111827;
    border-bottom: 1px solid #243653;
    color: #f8fafc;
}

.aging-detail-card .text-muted,
.aging-detail-card small {
    color: #86a6d4 !important;
}

/* =========================
   TABLE / HORIZONTAL SCROLL
   ========================= */

.aging-detail-table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #2b4265;
    border-radius: 8px;
    background: #172844;
    scrollbar-width: thin;
    scrollbar-color: #4d6f9f #111b2e;
}

.aging-detail-table {
    min-width: 1500px !important;
    width: max-content !important;
    border-collapse: separate;
    border-spacing: 0;
}

/* =========================
   TABLE HEADER
   ========================= */

.aging-detail-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #142744 !important;
    color: #9bb8df !important;
    border-color: #2b4265 !important;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* =========================
   TABLE BODY
   ========================= */

.aging-detail-table tbody td {
    color: #dbe7f7 !important;
    border-color: #2b4265 !important;
}

/* =========================
   PROJECT GROUP
   ========================= */

.aging-group-row td {
    background: #2b568f !important;
    color: #ffffff !important;
    font-weight: 700;
    border-top: 1px solid #416ba5 !important;
    border-bottom: 1px solid #416ba5 !important;
}

.aging-group-title {
    padding-left: 2px;
}

.aging-group-title strong {
    color: #ffffff !important;
    font-size: .95rem;
}

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

.aging-customer-row td {
    background: #1e3a63 !important;
    color: #eaf2ff !important;
    border-top-color: #355781 !important;
}

.aging-customer-title {
    padding-left: 20px;
}

.aging-customer-title span {
    color: #dceaff !important;
    font-weight: 600;
}

/* =========================
   STATUS
   ========================= */

.aging-status-row td {
    background: #1a3152 !important;
    color: #dbe7f7 !important;
    border-top-color: #29476e !important;
}

.aging-status-title {
    padding-left: 42px;
}

.aging-status-title span {
    color: #dbe7f7 !important;
}

/* =========================
   PROJECT
   ========================= */

.aging-project-row td {
    background: #172b49 !important;
    color: #c8daf3 !important;
    border-top-color: #233e61 !important;
}

.aging-project-title {
    padding-left: 66px;
    max-width: 520px;
}

.aging-project-title span {
    display: block;
    max-width: 430px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c8daf3 !important;
}

/* =========================
   JOB
   ========================= */

.aging-job-row td {
    background: #12233c !important;
    color: #a9c5ea !important;
}

.aging-job-row:hover td {
    background: #1b3559 !important;
}

.aging-job-row td:first-child > div {
    padding-left: 90px !important;
}

.aging-job-btn {
    color: #9fc5ff !important;
}

.aging-job-btn:hover {
    color: #ffffff !important;
}

/* =========================
   TOGGLE
   ========================= */

.aging-toggle-btn {
    flex: 0 0 22px;
    color: #8eb9ff !important;
}

.aging-toggle-btn:hover,
.aging-toggle-btn:focus {
    color: #ffffff !important;
}

/* =========================
   NUMERIC COLUMNS
   ========================= */

.aging-detail-table td:nth-child(n+6),
.aging-detail-table th:nth-child(n+6) {
    text-align: right;
}

/* =========================
   STATUS CARDS
   ========================= */

.aging-status-card {
    background: #ffffff;
    color: #172033;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.aging-status-name {
    color: #607086;
}

.aging-status-total {
    color: #172033;
}

.aging-status-total small,
.aging-status-meta {
    color: #607086;
}

/* =========================
   LOADING / EMPTY
   ========================= */

.aging-detail-loading {
    color: #86a6d4 !important;
}

.aging-empty {
    color: #86a6d4 !important;
}

/* =========================
   SCROLLBAR
   ========================= */

.aging-detail-table-wrapper::-webkit-scrollbar {
    height: 9px;
}

.aging-detail-table-wrapper::-webkit-scrollbar-track {
    background: #111b2e;
    border-radius: 8px;
}

.aging-detail-table-wrapper::-webkit-scrollbar-thumb {
    background: #466996;
    border-radius: 8px;
}

.aging-detail-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #5d84b8;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {
    .aging-detail-table {
        min-width: 1400px !important;
    }

    .aging-group-title,
    .aging-customer-title,
    .aging-status-title,
    .aging-project-title {
        white-space: nowrap;
    }
}


/* =========================================================
   FINAL DARK THEME - STATUS CARDS
   ========================================================= */

/* The status cards should belong to the dashboard dark theme,
   not Bootstrap's default white cards. */
.aging-status-card {
    position: relative;
    min-height: 118px;
    padding: 18px 20px !important;

    background: #1b3358 !important;
    border: 1px solid #2c4b73 !important;
    border-left-width: 4px !important;
    border-radius: 12px !important;

    color: #eaf2ff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16) !important;

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

.aging-status-card:hover {
    background: #203d67 !important;
    border-color: #3b5f8f !important;
    transform: translateY(-1px);
}

/* Card text */
.aging-status-card .aging-status-name {
    color: #a9c5ea !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.aging-status-card .aging-status-total {
    color: #ffffff !important;
    font-size: 1.65rem !important;
    line-height: 1.1;
    font-weight: 700 !important;
}

.aging-status-card .aging-status-total small {
    color: #8fb2dc !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
}

.aging-status-card .aging-status-meta {
    color: #a9c5ea !important;
    font-size: .72rem !important;
    margin-top: 10px !important;
}

.aging-status-card .aging-status-meta > span,
.aging-status-card .aging-status-meta strong {
    color: inherit !important;
}

/* Status accent borders */
.aging-status-card.status-receive {
    border-left-color: #8b5cf6 !important;
}

.aging-status-card.status-pickup {
    border-left-color: #3b82f6 !important;
}

.aging-status-card.status-delivery {
    border-left-color: #22d3ee !important;
}

.aging-status-card.status-site {
    border-left-color: #f97316 !important;
}

.aging-status-card.status-pod {
    border-left-color: #10b981 !important;
}

.aging-status-card.status-invoice {
    border-left-color: #f59e0b !important;
}

.aging-status-card.status-paid {
    border-left-color: #22c55e !important;
}

.aging-status-card.status-cancel {
    border-left-color: #ef4444 !important;
}

/* Keep the status summary compact and balanced */
.aging-status-summary {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(190px, 1fr)) !important;
    gap: 14px !important;
    width: 100%;
}

@media (max-width: 1400px) {
    .aging-status-summary {
        grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
    }
}

@media (max-width: 992px) {
    .aging-status-summary {
        grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .aging-status-summary {
        grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .aging-status-summary {
        grid-template-columns: 1fr !important;
    }
}

/* Remove the component-local loading space entirely. */
#agingDetailLoading {
    display: none !important;
}

/* Header should never become Bootstrap-white. */
.aging-detail-card .card-header {
    background: #111827 !important;
    color: #f8fafc !important;
}

.aging-detail-card .card-header h5 {
    color: #f8fafc !important;
}

.aging-detail-card .card-header .text-muted {
    color: #86a6d4 !important;
}


/* =========================================================
   AGING HIERARCHY SUMMARY
   ========================================================= */

.aging-detail-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}


/* =========================================================
   GROUP / CUSTOMER / STATUS SUMMARY ROW
   ========================================================= */

.aging-summary-row td,
.aging-customer-row td,
.aging-status-row td {
    padding: 0 !important;
    border-bottom: 1px solid #2c466b !important;
}


/* =========================================================
   SUMMARY CONTAINER
   ========================================================= */

.aging-hierarchy-summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 64px;

    padding: 12px 22px;

    box-sizing: border-box;
}


/* =========================================================
   NAME
   ========================================================= */

.aging-hierarchy-name {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    color: #f1f5f9;

    white-space: nowrap;
}


/* GROUP */

.aging-hierarchy-name.level-group {

    font-size: 1.05rem;

    font-weight: 700;
}


/* CUSTOMER */

.aging-hierarchy-name.level-customer {

    padding-left: 28px;

    font-size: .95rem;

    font-weight: 600;
}


/* STATUS */

.aging-hierarchy-name.level-status {

    padding-left: 56px;

    font-size: .9rem;

    font-weight: 600;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.aging-hierarchy-name .aging-toggle-btn {

    width: 24px;

    height: 24px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #8db9f5;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 15px;
}


.aging-hierarchy-name .aging-toggle-btn:hover {

    color: #ffffff;

    transform: scale(1.08);
}


/* =========================================================
   METRICS
   ========================================================= */

.aging-hierarchy-metrics {

    display: flex;

    align-items: center;

    gap: 32px;

    margin-left: auto;

    padding-left: 30px;
}


.aging-metric {

    min-width: 100px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    line-height: 1.2;
}


.aging-metric-label {

    font-size: .68rem;

    text-transform: uppercase;

    letter-spacing: .04em;

    color: #7fa3d1;

    margin-bottom: 3px;
}


.aging-metric strong {

    font-size: .9rem;

    color: #eaf2ff;

    font-weight: 600;
}


/* =========================================================
   GROUP ROW
   ========================================================= */

.aging-group-row {

    background: #284f84 !important;
}


.aging-group-row:hover {

    background: #315b95 !important;
}


.aging-group-row .aging-hierarchy-summary {

    min-height: 70px;
}


/* =========================================================
   CUSTOMER ROW
   ========================================================= */

.aging-customer-row {

    background: #1d3a61 !important;
}


.aging-customer-row:hover {

    background: #24466f !important;
}


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

.aging-status-row {

    background: #193454 !important;
}


.aging-status-row:hover {

    background: #203f65 !important;
}


/* =========================================================
   STATUS ACCENT
   ========================================================= */

.aging-status-row .aging-hierarchy-name {

    border-left: 3px solid transparent;

    padding-top: 4px;

    padding-bottom: 4px;
}


.aging-status-row .status-receive {

    border-left-color: #8b5cf6;
}


.aging-status-row .status-pickup {

    border-left-color: #3b82f6;
}


.aging-status-row .status-delivery {

    border-left-color: #22d3ee;
}


.aging-status-row .status-site {

    border-left-color: #f97316;
}


.aging-status-row .status-pod {

    border-left-color: #10b981;
}


.aging-status-row .status-invoice {

    border-left-color: #f59e0b;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .aging-hierarchy-summary {

        align-items: flex-start;

        gap: 15px;

    }

    .aging-hierarchy-metrics {

        gap: 15px;

    }

}


@media (max-width: 700px) {

    .aging-hierarchy-summary {

        flex-direction: column;

        align-items: stretch;

    }

    .aging-hierarchy-metrics {

        margin-left: 36px;

        padding-left: 0;

        justify-content: flex-start;

    }

    .aging-metric {

        align-items: flex-start;

    }

}

/* =========================================================
   AGING DETAIL COMPONENT
   ========================================================= */

.aging-detail-card {
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   ACTION BAR
   ========================================================= */

.aging-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 16px 20px;

    background: transparent;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   ACTION BUTTON
   ========================================================= */

.aging-btn {
    min-height: 38px;

    padding: 8px 16px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

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

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.aging-btn:hover {
    transform: translateY(-1px);
}

.aging-btn i {
    font-size: 13px;
}


/* =========================================================
   EXPAND
   ========================================================= */

.aging-btn-expand {
    background: #f8f9fa;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.aging-btn-expand:hover {
    background: #ffffff;
    color: #111827;
}


/* =========================================================
   COLLAPSE
   ========================================================= */

.aging-btn-collapse {
    background: #f8f9fa;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.aging-btn-collapse:hover {
    background: #ffffff;
    color: #111827;
}


/* =========================================================
   HEADER
   ========================================================= */

.aging-detail-header {
    padding: 22px 30px !important;

    background: transparent;
}

.aging-detail-header h5 {
    margin: 0;

    font-size: 18px;
    line-height: 1.4;
}

.aging-detail-header small {
    display: block;

    margin-top: 3px;

    font-size: 14px;
    color: #79a9e8;
}


/* =========================================================
   BODY
   ========================================================= */

.aging-detail-card .card-body {
    padding: 28px 30px 30px;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.aging-detail-card .card-body h6 {
    font-size: 15px;
    line-height: 1.4;
}

.aging-detail-card .card-body small {
    font-size: 13px;
}


/* =========================================================
   STATUS SUMMARY
   ========================================================= */

.aging-status-summary {
    margin-top: 4px;
}


/* =========================================================
   DETAIL TABLE
   ========================================================= */

.aging-detail-table-wrapper {
    margin-top: 8px;

    border-radius: 8px;
    overflow-x: auto;
}

.aging-detail-table {
    margin-bottom: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .aging-detail-card {
        margin-top: 16px;
    }

    .aging-detail-actions {
        padding: 12px 15px;
    }

    .aging-detail-header {
        padding: 18px 20px !important;
    }

    .aging-detail-card .card-body {
        padding: 20px 15px;
    }

    .aging-btn {
        padding: 7px 11px;

        font-size: 12px;
    }

}