:root {
    --nx-partner-navy: #071B3C;
    --nx-partner-blue: #123F7B;
    --nx-partner-gold: #D5A13A;
    --nx-partner-border: rgba(7,27,60,.10);
    --nx-partner-bg: #F4F7FB
}

.nexus-partner-account-page {
    background: linear-gradient(180deg,#f4f7fb 0%,#eef3f8 100%)
}

.nexus-partner-account-hero {
    background: linear-gradient(90deg,rgba(4,18,43,.94),rgba(7,27,60,.76) 52%,rgba(7,27,60,.38)),url('/styles/images/nexus-cover.jpg') center 46%/cover no-repeat !important
}

.nexus-partner-alerts {
    display: grid;
    gap: 10px;
    margin-bottom: 18px
}

.nexus-partner-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 13px;
    font-size: 14px
}

    .nexus-partner-alert.is-success {
        color: #146c43;
        background: #eaf8f1;
        border: 1px solid #bce8d0
    }

    .nexus-partner-alert.is-danger {
        color: #a33a49;
        background: #fff0f2;
        border: 1px solid #f4c5cc
    }

.nexus-partner-loading {
    padding: 64px 24px;
    text-align: center;
    border: 1px solid var(--nx-partner-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(7,27,60,.07)
}

.nexus-partner-loading__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 18px;
    color: var(--nx-partner-navy);
    background: linear-gradient(135deg,#f5d985,#fff3c4)
}

.nexus-partner-loading h3 {
    margin: 0 0 6px;
    color: var(--nx-partner-navy);
    font-size: 20px
}

.nexus-partner-loading p {
    margin: 0;
    color: #758196
}

.nexus-partner-overview {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
    margin-bottom: 24px
}

.nexus-partner-overview--prepaid {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.nexus-partner-metric {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--nx-partner-border);
    border-radius: 20px;
    background: linear-gradient(145deg,#fff,#fbfcff 72%,#fffaf0);
    box-shadow: 0 14px 38px rgba(7,27,60,.07)
}

.nexus-partner-metric__icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg,#123F7B,#071B3C);
    box-shadow: 0 8px 18px rgba(7,27,60,.18)
}

.nexus-partner-metric.is-gold .nexus-partner-metric__icon {
    color: #071B3C;
    background: linear-gradient(135deg,#E6B94F,#FCDB99 52%,#FFCC73)
}

.nexus-partner-metric.is-blue .nexus-partner-metric__icon {
    background: linear-gradient(135deg,#4f88c8,#245d9c)
}

.nexus-partner-metric.is-green .nexus-partner-metric__icon {
    background: linear-gradient(135deg,#24aa72,#0d7f50)
}

.nexus-partner-metric.is-rose .nexus-partner-metric__icon {
    background: linear-gradient(135deg,#e36b76,#b93e4d)
}

.nexus-partner-metric span {
    display: block;
    margin-bottom: 4px;
    color: #77849a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase
}

.nexus-partner-metric strong {
    display: block;
    color: var(--nx-partner-navy);
    font-size: 18px;
    font-weight: 680;
    line-height: 1.25
}

.nexus-partner-metric small {
    display: block;
    margin-top: 4px;
    color: #7b8798;
    font-size: 12px;
    line-height: 1.35
}

.nexus-partner-workspace {
    overflow: hidden;
    border: 1px solid var(--nx-partner-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 56px rgba(7,27,60,.08)
}

.nexus-partner-workspace__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border-bottom: 1px solid rgba(7,27,60,.08);
    background: linear-gradient(145deg,#fff 0%,#fbfcff 72%,#fff9ed 100%)
}

.nexus-partner-kicker {
    display: block;
    margin-bottom: 7px;
    color: #b47700;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em
}

.nexus-partner-workspace__head h2 {
    margin: 0;
    color: var(--nx-partner-navy);
    font-size: 25px;
    font-weight: 700
}

.nexus-partner-workspace__head p {
    margin: 7px 0 0;
    color: #76839a;
    font-size: 14px
}

.nexus-partner-topup-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #d3a13a;
    border-radius: 12px;
    color: #071B3C !important;
    background: linear-gradient(135deg,#E6B94F 0%,#FCDB99 52%,#FFCC73 100%);
    box-shadow: 0 9px 24px rgba(213,161,58,.25);
    font-size: 14px;
    font-weight: 650
}

    .nexus-partner-topup-btn:hover {
        color: #071B3C !important;
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(213,161,58,.32)
    }

.nexus-partner-workspace__body {
    padding: 24px
}

.nexus-partner-balance-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    padding: 18px 20px;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(135deg,#071B3C,#123F7B)
}

    .nexus-partner-balance-strip > div span {
        display: block;
        color: rgba(255,255,255,.65);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em
    }

    .nexus-partner-balance-strip > div strong {
        display: block;
        margin-top: 4px;
        color: #fff;
        font-size: 19px
    }

    .nexus-partner-balance-strip > i {
        color: #f5cf72
    }

.nexus-partner-progress {
    grid-column: 1/-1;
    height: 7px !important;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    overflow: hidden
}

    .nexus-partner-progress span {
        display: block;
        height: 100%;
        max-width: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg,#E6B94F,#FCDB99,#FFCC73)
    }

.nexus-partner-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px
}

.nexus-partner-toolbar__title {
    display: flex;
    align-items: center;
    gap: 11px
}

    .nexus-partner-toolbar__title > i {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        color: var(--nx-partner-navy);
        background: #fff3ca
    }

    .nexus-partner-toolbar__title strong {
        display: block;
        color: var(--nx-partner-navy);
        font-size: 17px
    }

    .nexus-partner-toolbar__title span {
        display: block;
        margin-top: 2px;
        color: #7c899b;
        font-size: 12px
    }

.nexus-partner-filter {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap
}

    .nexus-partner-filter label {
        display: block;
        margin: 0
    }

        .nexus-partner-filter label > span {
            display: block;
            margin-bottom: 6px;
            color: #758196;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em
        }

    .nexus-partner-filter .k-datepicker, .nexus-partner-filter .k-widget {
        width: 170px !important;
        height: 40px !important;
        border: 1px solid rgba(7,27,60,.12) !important;
        border-radius: 11px !important;
        background: #fff !important
    }

.nexus-partner-filter__clear {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(7,27,60,.12);
    border-radius: 11px;
    color: var(--nx-partner-navy);
    background: #fff
}

    .nexus-partner-filter__clear:hover {
        border-color: #d5a13a;
        background: #fff9ed
    }

.nexus-partner-table-shell {
    overflow: hidden;
    border: 1px solid rgba(7,27,60,.10);
    border-radius: 17px;
    background: #fff
}

.nexus-partner-table-scroll {
    overflow: auto
}

.nexus-partner-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    color: #34445b;
    font-size: 13px
}

    .nexus-partner-table th {
        height: 44px;
        padding: 9px 12px;
        border-bottom: 1px solid rgba(7,27,60,.10);
        background: linear-gradient(180deg,#f5f8fc,#edf2f8);
        color: #34445b;
        font-size: 11.5px;
        font-weight: 700;
        text-align: left
    }

    .nexus-partner-table td {
        height: 42px;
        padding: 8px 12px;
        border-bottom: 1px solid rgba(7,27,60,.06);
        font-weight: 400
    }

    .nexus-partner-table tbody tr:nth-child(even) td {
        background: #f8fafd
    }

    .nexus-partner-table tbody tr:hover td {
        background: #fff9ed
    }

    .nexus-partner-table .is-center {
        text-align: center;
        width: 60px
    }

    .nexus-partner-table .is-money {
        text-align: right;
        white-space: nowrap
    }

        .nexus-partner-table .is-money strong {
            color: var(--nx-partner-navy);
            font-weight: 650
        }

.nexus-partner-date {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    color: #50627b;
    background: #eef3f8;
    font-size: 11.5px
}

.nexus-partner-empty {
    height: 190px !important;
    text-align: center !important;
    color: #8490a2
}

    .nexus-partner-empty i {
        display: block;
        margin-bottom: 8px;
        font-size: 28px;
        color: #d1a53d
    }

    .nexus-partner-empty strong, .nexus-partner-empty span {
        display: block
    }

    .nexus-partner-empty strong {
        color: var(--nx-partner-navy);
        font-size: 15px
    }

    .nexus-partner-empty span {
        margin-top: 4px;
        font-size: 12px
    }

.nexus-partner-account-page .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(7,27,60,.22)
}

.nexus-partner-account-page .modal-header {
    padding: 18px 22px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg,#071B3C,#123F7B)
}

.nexus-partner-account-page .modal-title {
    color: #fff;
    font-size: 19px;
    font-weight: 650
}

.nexus-partner-account-page .modal-body {
    padding: 22px
}

.nexus-partner-account-page .modal-footer {
    padding: 15px 22px;
    border-top: 1px solid rgba(7,27,60,.08);
    background: #f8fafd
}

.nexus-partner-account-page .form-control {
    min-height: 44px;
    border: 1px solid rgba(7,27,60,.13);
    border-radius: 11px
}

    .nexus-partner-account-page .form-control:focus {
        border-color: #d5a13a;
        box-shadow: 0 0 0 3px rgba(213,161,58,.13)
    }

@media(max-width:1199px) {
    .nexus-partner-overview {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .nexus-partner-overview--prepaid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media(max-width:991px) {
    .nexus-partner-toolbar {
        align-items: flex-start;
        flex-direction: column
    }

    .nexus-partner-workspace__head {
        align-items: flex-start
    }

    .nexus-partner-filter {
        width: 100%
    }

        .nexus-partner-filter label {
            flex: 1
        }

        .nexus-partner-filter .k-datepicker, .nexus-partner-filter .k-widget {
            width: 100% !important
        }
}

@media(max-width:767px) {
    .nexus-partner-overview, .nexus-partner-overview--prepaid {
        grid-template-columns: 1fr
    }

    .nexus-partner-workspace__head {
        display: block;
        padding: 20px
    }

    .nexus-partner-topup-btn {
        margin-top: 14px
    }

    .nexus-partner-workspace__body {
        padding: 14px
    }

    .nexus-partner-balance-strip {
        grid-template-columns: 1fr
    }

        .nexus-partner-balance-strip > i {
            transform: rotate(90deg)
        }

    .nexus-partner-filter {
        display: grid;
        grid-template-columns: 1fr 1fr auto
    }

        .nexus-partner-filter label {
            min-width: 0
        }
}

@media(max-width:520px) {
    .nexus-partner-filter {
        grid-template-columns: 1fr
    }

    .nexus-partner-filter__clear {
        width: 100%
    }

    .nexus-partner-table {
        min-width: 760px
    }
}

#mdTopUp .modal-content, #paymentModal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(7,27,60,.22)
}

#mdTopUp .modal-header, #paymentModal .modal-header {
    padding: 18px 22px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg,#071B3C,#123F7B)
}

#mdTopUp .modal-title, #paymentModal .modal-title {
    color: #fff;
    font-size: 19px;
    font-weight: 650
}

#mdTopUp .modal-body, #paymentModal .modal-body {
    padding: 22px
}

#mdTopUp .modal-footer, #paymentModal .modal-footer {
    padding: 15px 22px;
    border-top: 1px solid rgba(7,27,60,.08) !important;
    background: #f8fafd
}

#mdTopUp .form-control, #paymentModal .form-control {
    min-height: 44px;
    border: 1px solid rgba(7,27,60,.13);
    border-radius: 11px
}

    #mdTopUp .form-control:focus, #paymentModal .form-control:focus {
        border-color: #d5a13a;
        box-shadow: 0 0 0 3px rgba(213,161,58,.13)
    }

#mdTopUp .nexus-management-btn-primary, #paymentModal .nexus-management-btn-primary {
    color: #071B3C !important;
    border-color: #d3a13a !important;
    background: linear-gradient(135deg,#E6B94F 0%,#FCDB99 52%,#FFCC73 100%) !important
}

/* v1.2 - Conservative direct styling for legacy Kendo DatePicker.
   Keep Kendo's generated structure/positioning intact; only restyle the
   actual picker, input and calendar button. */
.nexus-partner-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.nexus-partner-filter__field {
    display: block;
    min-width: 180px;
    margin: 0;
}

    .nexus-partner-filter__field > span {
        display: block;
        margin: 0 0 6px;
        color: #6f7d92;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

/* Do not change display/position of .k-datepicker: old Kendo relies on it. */
.nexus-partner-filter .k-datepicker {
    width: 180px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

    .nexus-partner-filter .k-datepicker .k-picker-wrap {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 42px 0 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(7, 27, 60, .13) !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 5px 14px rgba(7, 27, 60, .04) !important;
    }

    .nexus-partner-filter .k-datepicker:hover .k-picker-wrap {
        border-color: rgba(213, 161, 58, .58) !important;
    }

    .nexus-partner-filter .k-datepicker .k-picker-wrap.k-state-focused,
    .nexus-partner-filter .k-datepicker .k-picker-wrap.k-focus,
    .nexus-partner-filter .k-datepicker:focus-within .k-picker-wrap {
        border-color: #D5A13A !important;
        box-shadow: 0 0 0 3px rgba(213, 161, 58, .13), 0 7px 18px rgba(7, 27, 60, .05) !important;
    }

    .nexus-partner-filter .k-datepicker .k-input {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        border: 0 !important;
        outline: 0 !important;
        color: var(--nx-partner-navy) !important;
        background: transparent !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 32px !important;
        box-shadow: none !important;
    }

    /* Keep Kendo's native calendar-button dimensions and positioning.
   Only refine the visual treatment so old Kendo layout calculations remain intact. */
    .nexus-partner-filter .k-datepicker .k-select {
        border: 0 !important;
        border-left: 1px solid rgba(7, 27, 60, .08) !important;
        color: var(--nx-partner-navy) !important;
        background: linear-gradient(180deg, #f8fafd 0%, #f1f4f8 100%) !important;
        box-shadow: inset 1px 0 rgba(255,255,255,.65) !important;
        line-height: 32px;
        width: 32px;
    }

        .nexus-partner-filter .k-datepicker .k-select .k-icon,
        .nexus-partner-filter .k-datepicker .k-select .k-i-calendar {
            color: var(--nx-partner-navy) !important;
            opacity: .82;
            transition: color .16s ease, transform .16s ease, opacity .16s ease;
        }

        .nexus-partner-filter .k-datepicker .k-select:hover {
            color: #8d6400 !important;
            background: linear-gradient(180deg, #fff9e9 0%, #fff1c8 100%) !important;
        }

            .nexus-partner-filter .k-datepicker .k-select:hover .k-icon,
            .nexus-partner-filter .k-datepicker .k-select:hover .k-i-calendar {
                color: #8d6400 !important;
                opacity: 1;
                transform: scale(1.05);
            }

.nexus-partner-filter__separator {
    display: grid;
    place-items: center;
    width: 26px;
    height: 56px;
    color: #c28b17;
    font-size: 13px;
}

.nexus-partner-filter__clear {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(7, 27, 60, .13) !important;
    border-radius: 12px !important;
    color: var(--nx-partner-navy) !important;
    background: #fff !important;
    box-shadow: 0 5px 14px rgba(7, 27, 60, .05);
}

    .nexus-partner-filter__clear:hover {
        color: #8d6400 !important;
        border-color: rgba(213, 161, 58, .65) !important;
        background: #fff8e8 !important;
    }

@media (max-width: 991.98px) {
    .nexus-partner-filter {
        width: 100%;
    }

    .nexus-partner-filter__field {
        flex: 1 1 0;
        min-width: 160px;
    }

    .nexus-partner-filter .k-datepicker {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .nexus-partner-filter {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .nexus-partner-filter__field {
        min-width: 0;
    }

    .nexus-partner-filter__separator {
        display: none;
    }

    .nexus-partner-filter__clear {
        width: 100% !important;
    }
}