:root {
    --eps-primary: #3cc79d;
    --eps-primary-dark: #145f49;
    --eps-primary-soft: #e8f4f0;
    --eps-background: #f4f7f6;
    --eps-border: #dfe8e5;
    --eps-text: #24312d;
    --eps-muted: #66756f;
    --eps-white: #ffffff;
    --risk-low: #198754;
    --risk-medium: #d39e00;
    --risk-high: #ef7d00;
    --risk-critical: #c62828;
}

html {
    font-size: 14px;
}

body {
    margin: 0;
    background: var(--eps-background);
    color: var(--eps-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

a {
    color: var(--eps-primary);
}

.portal-shell {
    display: flex;
    min-height: 100vh;
}

.portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    width: 236px;
    padding: 14px 10px;
    overflow-y: auto;
    background: var(--eps-primary);
    transition: transform .25s ease;
}

.portal-brand {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 4px 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.16);
}

    .portal-brand img {
        width: 92px;
        max-height: 40px;
        object-fit: contain;
        filter: none !important;
    }

.portal-menu {
    padding-top: 12px;
}

    .portal-menu a, .menu-parent {
        display: flex;
        width: 100%;
        gap: 10px;
        align-items: center;
        margin-bottom: 3px;
        padding: 9px 11px;
        color: rgba(255,255,255,.86);
        background: transparent;
        border: 0;
        border-radius: 7px;
        text-decoration: none;
        text-align: left;
    }

        .portal-menu a:hover, .menu-parent:hover, .portal-menu a.active, .menu-parent.active {
            color: #fff;
            background: rgba(255,255,255,.17);
        }

    .portal-menu i {
        width: 19px;
        font-size: 16px;
    }

.submenu {
    margin: 0 0 5px 28px;
    border-left: 1px solid rgba(255,255,255,.25);
}

    .submenu a {
        padding: 7px 10px;
        font-size: 13px;
    }

.portal-main {
    display: flex;
    flex-direction: column;
    width: calc(100% - 236px);
    min-height: 100vh;
    margin-left: 236px;
}

.portal-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 6px 16px;
    background: var(--eps-primary);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.header-logo {
    width: 78px;
    max-height: 34px;
    object-fit: contain;
    filter: none !important;
}

.current-user {
    color: #fff;
    font-weight: 600;
}

.icon-button {
    display: none;
    color: #fff;
    font-size: 22px;
}

.portal-content {
    flex: 1;
    padding: 14px;
}

.portal-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 46px;
    padding: 7px 16px;
    color: rgba(255,255,255,.9);
    background: var(--eps-primary);
}

    .portal-footer img {
        width: 58px;
        max-height: 28px;
        object-fit: contain;
        filter: none !important;
    }

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

    .page-heading h2 {
        margin: 0 0 2px;
        color: #173c31;
        font-size: 23px;
        font-weight: 750;
    }

    .page-heading p, .card-heading p {
        margin: 0;
        color: var(--eps-muted);
    }

.compact-heading {
    margin-bottom: 10px;
}

.content-card, .stat-card, .mini-stat-card {
    background: var(--eps-white);
    border: 1px solid var(--eps-border);
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(23,60,49,.06);
}

.content-card {
    padding: 14px;
}

.compact-card {
    padding: 12px;
}

.filter-card {
    margin-bottom: 10px;
}

.form-label {
    margin-bottom: 3px;
    color: #456058;
    font-size: 12px;
    font-weight: 650;
}

.form-control:focus, .form-select:focus {
    border-color: var(--eps-primary);
    box-shadow: 0 0 0 .18rem rgba(28,122,94,.15);
}

.btn-primary {
    background: var(--eps-primary);
    border-color: var(--eps-primary);
}

    .btn-primary:hover, .btn-primary:focus {
        background: var(--eps-primary-dark);
        border-color: var(--eps-primary-dark);
    }

.btn-outline-primary {
    color: var(--eps-primary);
    border-color: var(--eps-primary);
}

    .btn-outline-primary:hover {
        background: var(--eps-primary);
        border-color: var(--eps-primary);
    }

.table {
    margin-bottom: 0;
}

    .table thead th {
        padding: 8px 9px;
        white-space: nowrap;
        color: #fff;
        background: var(--eps-primary);
        border: 0;
        font-size: 12px;
    }

    .table td {
        padding: 7px 9px;
        white-space: nowrap;
        vertical-align: middle;
        font-size: 12px;
    }

.compact-table .form-select {
    min-width: 108px;
}

.table-action {
    padding: 3px 8px;
}

.dataTables_wrapper .dt-search input, .dataTables_wrapper .dt-length select {
    min-height: 30px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.stat-card {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 92px;
    padding: 13px;
    border-top: 3px solid var(--eps-primary);
}

    .stat-card strong {
        display: block;
        margin-top: 2px;
        font-size: 25px;
    }

    .stat-card span {
        color: var(--eps-muted);
        font-size: 12px;
    }

.stat-icon {
    display: grid;
    width: 42px;
    height: 42px;
    color: var(--eps-primary);
    font-size: 19px;
    background: var(--eps-primary-soft);
    border-radius: 10px;
    place-items: center;
}

.stat-card.stat-high {
    border-top-color: var(--risk-high);
}

.stat-card.stat-critical {
    border-top-color: var(--risk-critical);
}

.stat-icon.high {
    color: var(--risk-high);
    background: #fff4e7;
}

.stat-icon.critical {
    color: var(--risk-critical);
    background: #fdecec;
}

.stat-icon.success {
    color: var(--eps-primary);
    background: var(--eps-primary-soft);
}

.mini-stat-card {
    display: block;
    padding: 11px 14px;
    color: inherit;
    text-decoration: none;
    border-left: 4px solid var(--eps-primary);
}

    .mini-stat-card span {
        color: var(--eps-muted);
        font-size: 12px;
    }

    .mini-stat-card strong {
        float: right;
        color: #173c31;
        font-size: 20px;
    }

.mini-stat-link:hover {
    background: var(--eps-primary-soft);
}

.card-heading h4 {
    margin: 0 0 2px;
    font-size: 16px;
}

.chart-wrapper {
    height: 275px;
    margin-top: 8px;
}

.risk-chart-wrapper {
    height: 275px;
    padding: 8px;
}

.merchant-hero {
    display: grid;
    grid-template-columns: 118px 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 10px;
    border-top: 4px solid var(--eps-primary);
}

.merchant-photo-wrap {
    display: grid;
    width: 112px;
    height: 112px;
    padding: 8px;
    background: var(--eps-primary-soft);
    border-radius: 12px;
    place-items: center;
}

.merchant-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}

.merchant-hero-info h2 {
    margin: 3px 0;
    color: #173c31;
    font-size: 25px;
}

.merchant-hero-info p {
    margin: 0 0 8px;
    color: var(--eps-muted);
}

.merchant-code {
    display: inline-block;
    padding: 3px 8px;
    color: var(--eps-primary);
    background: var(--eps-primary-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.hero-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: #4f665e;
    font-size: 12px;
}

.merchant-hero-actions {
    min-width: 210px;
}

.risk-status-box {
    margin-top: 8px;
    padding: 9px;
    background: #f7faf9;
    border: 1px solid var(--eps-border);
    border-radius: 8px;
}

    .risk-status-box label {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
    }

    .risk-status-box small {
        display: block;
        margin-top: 4px;
        color: var(--eps-muted);
        font-size: 10px;
    }

.details-section-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.section-title {
    display: flex;
    gap: 9px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--eps-border);
}

    .section-title > i {
        display: grid;
        width: 34px;
        height: 34px;
        color: #fff;
        background: var(--eps-primary);
        border-radius: 8px;
        place-items: center;
    }

    .section-title h4 {
        margin: 0;
        font-size: 15px;
    }

    .section-title small {
        color: var(--eps-muted);
    }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 9px;
}

.detail-item {
    padding: 9px;
    background: #f7faf9;
    border: 1px solid var(--eps-border);
    border-radius: 7px;
}

    .detail-item span, .detail-item strong {
        display: block;
    }

    .detail-item span {
        margin-bottom: 3px;
        color: var(--eps-muted);
        font-size: 11px;
    }

    .detail-item strong {
        overflow-wrap: anywhere;
        font-size: 13px;
    }

.audit-strip {
    display: flex;
    gap: 30px;
    margin-top: 10px;
}

    .audit-strip span, .audit-strip strong {
        display: block;
    }

    .audit-strip span {
        color: var(--eps-muted);
        font-size: 11px;
    }

.status-badge {
    display: inline-block;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
}

    .status-badge.active {
        color: #166442;
        background: #e6f5ef;
    }

    .status-badge.inactive {
        color: #a32020;
        background: #fdecec;
    }

.merchant-risk-select {
    font-weight: 700;
    border-width: 1px;
}

    .merchant-risk-select.risk-low {
        color: var(--risk-low);
        border-color: rgba(25,135,84,.45);
        background-color: #ecf8f1;
    }

    .merchant-risk-select.risk-medium {
        color: #8a6500;
        border-color: rgba(211,158,0,.5);
        background-color: #fff8df;
    }

    .merchant-risk-select.risk-high {
        color: #a95200;
        border-color: rgba(239,125,0,.55);
        background-color: #fff2e6;
    }

    .merchant-risk-select.risk-critical {
        color: var(--risk-critical);
        border-color: rgba(198,40,40,.5);
        background-color: #fdecec;
    }

.toast-logo {
    width: 34px;
    height: 22px;
    object-fit: contain;
}

.auth-body {
    min-height: 100vh;
    background: linear-gradient(135deg,#e5f2ee 0%,#fff 55%,#eef7f4 100%);
}

.auth-wrapper {
    display: grid;
    min-height: 100vh;
    padding: 16px;
    place-items: center;
}

.auth-card {
    width: min(430px,100%);
    padding: 26px;
    background: #fff;
    border: 1px solid var(--eps-border);
    border-radius: 14px;
    box-shadow: 0 15px 45px rgba(28,122,94,.16);
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    margin-bottom: 12px;
    background: var(--eps-primary);
    border-radius: 10px;
}

    .auth-logo img {
        width: 96px;
        max-height: 42px;
        object-fit: contain;
        filter: none !important;
    }

.profile-card, .form-card {
    max-width: 820px;
}

.profile-image {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 4px solid var(--eps-primary-soft);
    border-radius: 50%;
}

.profile-summary {
    display: flex;
    gap: 16px;
    align-items: center;
}

@media (max-width: 991.98px) {
    .portal-sidebar {
        transform: translateX(-100%);
    }

        .portal-sidebar.show {
            transform: translateX(0);
        }

    .portal-main {
        width: 100%;
        margin-left: 0;
    }

    .icon-button {
        display: inline-flex;
    }

    .details-section-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .portal-content {
        padding: 10px;
    }

    .page-heading {
        align-items: flex-start;
        gap: 8px;
        flex-direction: column;
    }

    .merchant-hero {
        grid-template-columns: 78px 1fr;
    }

    .merchant-photo-wrap {
        width: 74px;
        height: 74px;
    }

    .merchant-hero-actions {
        grid-column: 1 / -1;
        width: 100%;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .audit-strip {
        gap: 12px;
        flex-direction: column;
    }

    .current-user {
        display: none;
    }
}

.risk-badge {
    display: inline-block;
    min-width: 66px;
    padding: 4px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
}

    .risk-badge.risk-low {
        color: var(--risk-low);
        background: #ecf8f1;
    }

    .risk-badge.risk-medium {
        color: #8a6500;
        background: #fff8df;
    }

    .risk-badge.risk-high {
        color: #a95200;
        background: #fff2e6;
    }

    .risk-badge.risk-critical {
        color: var(--risk-critical);
        background: #fdecec;
    }

/* Merchant searchable dropdown */

.select2-container {
    width: 100% !important;
}

    .select2-container .select2-selection--single {
        height: 34px !important;
        min-height: 34px !important;
        border: 1px solid #ced4da !important;
        border-radius: 5px !important;
        background-color: #ffffff !important;
    }

.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    height: 32px;
    line-height: 32px !important;
    padding-left: 10px !important;
    padding-right: 30px !important;
    color: #212529 !important;
    font-size: 13px;
}

.select2-container--default
.select2-selection--single
.select2-selection__arrow {
    height: 32px !important;
    right: 5px !important;
}

.select2-container--default.select2-container--focus
.select2-selection--single,
.select2-container--default.select2-container--open
.select2-selection--single {
    border-color: #1c7a5e !important;
    box-shadow: 0 0 0 0.15rem rgba(28, 122, 94, 0.14);
}

.select2-dropdown {
    border: 1px solid #1c7a5e !important;
    border-radius: 5px !important;
    overflow: hidden;
    z-index: 9999;
}

.select2-search--dropdown {
    padding: 7px !important;
    background: #f7fbf9;
}

    .select2-search--dropdown .select2-search__field {
        height: 34px;
        border: 1px solid #ced4da !important;
        border-radius: 4px;
        outline: none;
        font-size: 13px;
    }

        .select2-search--dropdown .select2-search__field:focus {
            border-color: #1c7a5e !important;
            box-shadow: 0 0 0 0.12rem rgba(28, 122, 94, 0.12);
        }

.select2-results__option {
    padding: 7px 10px !important;
    font-size: 13px;
}

.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #1c7a5e !important;
    color: #ffffff !important;
}

/* Merchant DataTable */

.merchant-table-card {
    overflow: hidden;
}

.merchant-table-wrapper {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
}

.merchant-data-table {
    width: 100% !important;
    min-width: 1480px !important;
    margin-bottom: 0 !important;
    color: #212529 !important;
}

    .merchant-data-table thead {
        display: table-header-group !important;
        visibility: visible !important;
    }

        .merchant-data-table thead tr {
            display: table-row !important;
        }

        .merchant-data-table thead th {
            display: table-cell !important;
            visibility: visible !important;
            opacity: 1 !important;
            white-space: nowrap;
            padding: 10px 9px !important;
            background-color: #1c7a5e !important;
            color: #ffffff !important;
            border-color: #17684f !important;
            font-size: 12px;
            font-weight: 600;
            vertical-align: middle;
        }

    .merchant-data-table tbody td {
        white-space: nowrap;
        padding: 7px 9px !important;
        color: #212529 !important;
        font-size: 12px;
        border-color: #e1e8e5;
        vertical-align: middle;
    }

    .merchant-data-table tbody tr:hover td {
        background-color: #f0f8f5 !important;
    }

.merchant-details-btn {
    min-width: 70px;
    padding: 4px 8px;
    border-color: #1c7a5e;
    color: #1c7a5e;
}

    .merchant-details-btn:hover {
        background-color: #1c7a5e;
        border-color: #1c7a5e;
        color: #ffffff;
    }

/* DataTables scroll correction */

div.dt-scroll,
div.dataTables_scroll {
    width: 100% !important;
}

div.dt-scroll-head,
div.dataTables_scrollHead {
    width: 100% !important;
    overflow: hidden !important;
}

div.dt-scroll-headInner,
div.dataTables_scrollHeadInner {
    width: 100% !important;
    min-width: 1480px !important;
}

    div.dt-scroll-headInner table,
    div.dataTables_scrollHeadInner table {
        width: 100% !important;
        min-width: 1480px !important;
    }

div.dt-scroll-body,
div.dataTables_scrollBody {
    width: 100% !important;
    overflow-x: auto !important;
}

    div.dt-scroll-body table,
    div.dataTables_scrollBody table {
        width: 100% !important;
        min-width: 1480px !important;
    }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
}

    .dataTables_wrapper .dataTables_filter input {
        height: 32px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        outline: none;
    }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: #1c7a5e;
            box-shadow: 0 0 0 0.12rem rgba(28, 122, 94, 0.12);
        }





/* Critical Merchant DataTable */

.critical-table-card {
    overflow: hidden;
}

.critical-table-wrapper {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
}

.critical-data-table {
    width: 100% !important;
    min-width: 1600px !important;
    margin-bottom: 0 !important;
    color: #212529 !important;
}

    .critical-data-table thead {
        display: table-header-group !important;
        visibility: visible !important;
    }

        .critical-data-table thead tr {
            display: table-row !important;
            visibility: visible !important;
        }

        .critical-data-table thead th {
            display: table-cell !important;
            visibility: visible !important;
            opacity: 1 !important;
            white-space: nowrap;
            padding: 10px 9px !important;
            background-color: #1c7a5e !important;
            color: #ffffff !important;
            border-color: #17684f !important;
            font-size: 12px;
            font-weight: 600;
            vertical-align: middle;
        }

    .critical-data-table tbody td {
        white-space: nowrap;
        padding: 7px 9px !important;
        color: #212529 !important;
        font-size: 12px;
        border-color: #e1e8e5;
        vertical-align: middle;
    }

    .critical-data-table tbody tr:hover td {
        background-color: #f0f8f5 !important;
    }

.critical-details-btn {
    min-width: 72px;
    padding: 4px 8px;
    border-color: #1c7a5e;
    color: #1c7a5e;
}

    .critical-details-btn:hover {
        background-color: #1c7a5e;
        border-color: #1c7a5e;
        color: #ffffff;
    }

.critical-reason-text {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* DataTables generated scroll header correction */

#criticalTable_wrapper {
    width: 100% !important;
}

    #criticalTable_wrapper .dt-scroll,
    #criticalTable_wrapper .dataTables_scroll {
        width: 100% !important;
    }

    #criticalTable_wrapper .dt-scroll-head,
    #criticalTable_wrapper .dataTables_scrollHead {
        width: 100% !important;
        overflow: hidden !important;
        background-color: #1c7a5e !important;
    }

    #criticalTable_wrapper .dt-scroll-headInner,
    #criticalTable_wrapper .dataTables_scrollHeadInner {
        width: 100% !important;
        min-width: 1600px !important;
    }

        #criticalTable_wrapper .dt-scroll-headInner table,
        #criticalTable_wrapper .dataTables_scrollHeadInner table {
            width: 100% !important;
            min-width: 1600px !important;
        }

        #criticalTable_wrapper .dt-scroll-headInner thead,
        #criticalTable_wrapper .dataTables_scrollHeadInner thead {
            visibility: visible !important;
        }

            #criticalTable_wrapper .dt-scroll-headInner thead th,
            #criticalTable_wrapper .dataTables_scrollHeadInner thead th {
                visibility: visible !important;
                opacity: 1 !important;
                background-color: #1c7a5e !important;
                color: #ffffff !important;
                white-space: nowrap !important;
                padding: 10px 9px !important;
            }

    #criticalTable_wrapper .dt-scroll-body,
    #criticalTable_wrapper .dataTables_scrollBody {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

        #criticalTable_wrapper .dt-scroll-body table,
        #criticalTable_wrapper .dataTables_scrollBody table {
            width: 100% !important;
            min-width: 1600px !important;
        }

        /*
 DataTables scrollX body table-এর original thead-কে height 0 করে রাখে।
 সেটি স্বাভাবিক behavior। Visible header generated scroll-head-এর ভিতরে থাকে।
*/
        #criticalTable_wrapper .dt-scroll-body thead,
        #criticalTable_wrapper .dataTables_scrollBody thead {
            visibility: collapse !important;
        }

    #criticalTable_wrapper .dataTables_length,
    #criticalTable_wrapper .dataTables_filter {
        margin-bottom: 10px;
    }

        #criticalTable_wrapper .dataTables_filter input {
            height: 32px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            outline: none;
        }

            #criticalTable_wrapper .dataTables_filter input:focus {
                border-color: #1c7a5e;
                box-shadow: 0 0 0 0.12rem rgba(28, 122, 94, 0.12);
            }

/* Risk badge */

.risk-badge {
    display: inline-flex;
    min-width: 72px;
    justify-content: center;
    align-items: center;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.risk-low {
    color: #166534;
    background-color: #dcfce7;
    border: 1px solid #86efac;
}

.risk-medium {
    color: #854d0e;
    background-color: #fef9c3;
    border: 1px solid #fde047;
}

.risk-high {
    color: #9a3412;
    background-color: #ffedd5;
    border: 1px solid #fdba74;
}

.risk-critical {
    color: #991b1b;
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
}

/* ==============================
   EPS Original Logo
   ============================== */

.eps-logo,
.navbar-brand img,
.sidebar-logo img,
.login-logo img,
.brand-logo img,
.logo img {
    width: auto !important;
    height: 48px !important;
    max-width: 180px !important;
    object-fit: contain !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    image-rendering: auto !important;
}

.header,
.navbar,
.top-header {
    background: #3cc79d;
}

/* =========================================================
   EPS GREEN + WHITE CORPORATE THEME OVERRIDE
   No HTML changes required. Keep this block at the very end.
   ========================================================= */

:root {
    --eps-primary: #1c7a5e;
    --eps-primary-hover: #17684f;
    --eps-primary-dark: #11513e;
    --eps-primary-deep: #0d3f31;
    --eps-primary-soft: #eaf6f1;
    --eps-primary-soft-2: #f4fbf8;
    --eps-primary-border: #b9dccf;
    --eps-background: #f3f8f6;
    --eps-surface: #ffffff;
    --eps-surface-muted: #f8fbfa;
    --eps-border: #d8e7e1;
    --eps-border-strong: #bfd8cf;
    --eps-text: #1e332c;
    --eps-heading: #123f32;
    --eps-muted: #667a72;
    --eps-white: #ffffff;
    --eps-shadow: 0 4px 16px rgba(17, 81, 62, 0.08);
    --eps-shadow-hover: 0 8px 24px rgba(17, 81, 62, 0.12);
}

html,
body {
    background: var(--eps-background) !important;
    color: var(--eps-text) !important;
}

body {
    background-image: radial-gradient(circle at top right, rgba(28, 122, 94, 0.05), transparent 34%), linear-gradient(180deg, #f8fcfa 0%, var(--eps-background) 100%) !important;
}

a {
    color: var(--eps-primary);
}

    a:hover {
        color: var(--eps-primary-dark);
    }

/* Sidebar */
.portal-sidebar {
    background: linear-gradient(180deg, var(--eps-primary) 0%, var(--eps-primary-dark) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 5px 0 22px rgba(13, 63, 49, 0.12);
}

.portal-brand {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

.portal-menu a,
.menu-parent {
    color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid transparent;
}

    .portal-menu a:hover,
    .menu-parent:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(255, 255, 255, 0.08);
    }

    .portal-menu a.active,
    .menu-parent.active {
        color: var(--eps-primary-dark) !important;
        background: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.65);
        box-shadow: 0 4px 12px rgba(10, 54, 41, 0.14);
        font-weight: 700;
    }

.submenu {
    border-left-color: rgba(255, 255, 255, 0.28) !important;
}

    .submenu a.active {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.16) !important;
        box-shadow: none;
    }

/* Header + Footer */
.portal-header,
.header,
.navbar,
.top-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--eps-border) !important;
    box-shadow: 0 2px 10px rgba(17, 81, 62, 0.06);
}

    .portal-header .current-user,
    .portal-header .icon-button,
    .navbar .current-user,
    .navbar .icon-button {
        color: var(--eps-heading) !important;
    }

.portal-footer {
    color: #eaf8f3 !important;
    background: linear-gradient(90deg, var(--eps-primary-dark), var(--eps-primary)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

    /* Logo: preserve original color */
    .portal-brand img,
    .portal-header img,
    .header-logo,
    .portal-footer img,
    .auth-logo img,
    .eps-logo,
    .navbar-brand img,
    .sidebar-logo img,
    .login-logo img,
    .brand-logo img,
    .logo img,
    img[src*="eps.com.bd/images/logo.png"] {
        filter: none !important;
        -webkit-filter: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        background: transparent !important;
    }

/* Main content */
.portal-content {
    background: transparent;
}

.page-heading h1,
.page-heading h2,
.page-heading h3,
.card-heading h1,
.card-heading h2,
.card-heading h3,
.card-heading h4 {
    color: var(--eps-heading) !important;
}

.page-heading p,
.card-heading p,
.text-muted {
    color: var(--eps-muted) !important;
}

/* Cards */
.content-card,
.stat-card,
.mini-stat-card,
.auth-card,
.profile-card,
.form-card {
    background: var(--eps-surface) !important;
    border-color: var(--eps-border) !important;
    box-shadow: var(--eps-shadow) !important;
}

    .content-card:hover,
    .stat-card:hover,
    .mini-stat-card:hover {
        border-color: var(--eps-primary-border) !important;
        box-shadow: var(--eps-shadow-hover) !important;
    }

.filter-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--eps-primary-soft-2) 100%) !important;
}

/* Forms */
.form-label {
    color: #355f51 !important;
}

.form-control,
.form-select,
.input-group-text {
    color: var(--eps-text) !important;
    background-color: #ffffff !important;
    border-color: var(--eps-border-strong) !important;
}

    .form-control:hover,
    .form-select:hover {
        border-color: #9fcbbb !important;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--eps-primary) !important;
        box-shadow: 0 0 0 0.18rem rgba(28, 122, 94, 0.14) !important;
    }

    .form-control::placeholder {
        color: #8da098;
    }

/* Buttons */
.btn-primary,
.btn-success {
    color: #ffffff !important;
    background: linear-gradient(180deg, #238c6d 0%, var(--eps-primary) 100%) !important;
    border-color: var(--eps-primary) !important;
    box-shadow: 0 2px 6px rgba(28, 122, 94, 0.20);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-success:hover,
    .btn-success:focus {
        color: #ffffff !important;
        background: linear-gradient(180deg, var(--eps-primary) 0%, var(--eps-primary-dark) 100%) !important;
        border-color: var(--eps-primary-dark) !important;
    }

.btn-outline-primary,
.btn-outline-success {
    color: var(--eps-primary) !important;
    background: #ffffff !important;
    border-color: var(--eps-primary) !important;
}

    .btn-outline-primary:hover,
    .btn-outline-success:hover {
        color: #ffffff !important;
        background: var(--eps-primary) !important;
        border-color: var(--eps-primary) !important;
    }

.btn-outline-secondary {
    color: #4e665d !important;
    background: #ffffff !important;
    border-color: var(--eps-border-strong) !important;
}

    .btn-outline-secondary:hover {
        color: var(--eps-primary-dark) !important;
        background: var(--eps-primary-soft) !important;
        border-color: var(--eps-primary-border) !important;
    }

/* Tables + DataTables */
.table,
.merchant-data-table,
.critical-data-table {
    color: var(--eps-text) !important;
    background: #ffffff;
}

    .table thead th,
    .merchant-data-table thead th,
    .critical-data-table thead th,
    #criticalTable_wrapper .dt-scroll-headInner thead th,
    #criticalTable_wrapper .dataTables_scrollHeadInner thead th {
        color: #ffffff !important;
        background: linear-gradient(180deg, #238c6d 0%, var(--eps-primary) 100%) !important;
        border-color: var(--eps-primary-dark) !important;
    }

    .table tbody tr:nth-child(even) td,
    .merchant-data-table tbody tr:nth-child(even) td,
    .critical-data-table tbody tr:nth-child(even) td {
        background: #fbfdfc;
    }

    .table tbody tr:hover td,
    .merchant-data-table tbody tr:hover td,
    .critical-data-table tbody tr:hover td {
        background: var(--eps-primary-soft) !important;
    }

    .table td,
    .table th {
        border-color: #e2ece8 !important;
    }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dt-search input,
.dataTables_wrapper .dt-length select,
#criticalTable_wrapper .dataTables_filter input {
    background: #ffffff !important;
    border-color: var(--eps-border-strong) !important;
}

    .dataTables_wrapper .dataTables_filter input:focus,
    .dataTables_wrapper .dt-search input:focus,
    #criticalTable_wrapper .dataTables_filter input:focus {
        border-color: var(--eps-primary) !important;
        box-shadow: 0 0 0 0.14rem rgba(28, 122, 94, 0.12) !important;
    }

.page-link {
    color: var(--eps-primary) !important;
    background: #ffffff !important;
    border-color: var(--eps-border) !important;
}

    .page-item.active .page-link,
    .page-link:hover {
        color: #ffffff !important;
        background: var(--eps-primary) !important;
        border-color: var(--eps-primary) !important;
    }

/* Select2 */
.select2-container .select2-selection--single {
    border-color: var(--eps-border-strong) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--eps-primary) !important;
    box-shadow: 0 0 0 0.14rem rgba(28, 122, 94, 0.12) !important;
}

.select2-dropdown {
    border-color: var(--eps-primary) !important;
    box-shadow: 0 10px 24px rgba(17, 81, 62, 0.12);
}

.select2-search--dropdown {
    background: var(--eps-primary-soft-2) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    color: #ffffff !important;
    background: var(--eps-primary) !important;
}

/* Dashboard */
.stat-card {
    border-top-color: var(--eps-primary) !important;
}

    .stat-card strong,
    .mini-stat-card strong {
        color: var(--eps-heading) !important;
    }

.stat-icon,
.stat-icon.success {
    color: var(--eps-primary) !important;
    background: var(--eps-primary-soft) !important;
}

.mini-stat-card {
    border-left-color: var(--eps-primary) !important;
}

.mini-stat-link:hover {
    background: var(--eps-primary-soft-2) !important;
}

/* Merchant details */
.merchant-hero {
    background: linear-gradient(135deg, #ffffff 0%, var(--eps-primary-soft-2) 100%) !important;
    border-top-color: var(--eps-primary) !important;
}

.merchant-photo-wrap,
.profile-image {
    background: var(--eps-primary-soft) !important;
    border-color: var(--eps-primary-border) !important;
}

.merchant-hero-info h2,
.detail-item strong {
    color: var(--eps-heading) !important;
}

.merchant-code,
.status-badge.active {
    color: var(--eps-primary-dark) !important;
    background: var(--eps-primary-soft) !important;
}

.risk-status-box,
.detail-item {
    background: var(--eps-surface-muted) !important;
    border-color: var(--eps-border) !important;
}

.section-title > i {
    background: linear-gradient(180deg, #238c6d, var(--eps-primary)) !important;
}

/* Authentication */
.auth-body {
    background: radial-gradient(circle at top left, rgba(28, 122, 94, 0.13), transparent 38%), linear-gradient(135deg, #edf8f4 0%, #ffffff 54%, #f3faf7 100%) !important;
}

.auth-card {
    border-top: 4px solid var(--eps-primary) !important;
}

.auth-logo {
    background: #ffffff !important;
    border: 1px solid var(--eps-border) !important;
}

/* Badges and alerts */
.badge.bg-primary,
.text-bg-primary {
    background-color: var(--eps-primary) !important;
}

.alert-success {
    color: var(--eps-primary-dark) !important;
    background: var(--eps-primary-soft) !important;
    border-color: var(--eps-primary-border) !important;
}

/* Preserve semantic risk colors */
.risk-low,
.risk-badge.risk-low {
    color: #166534 !important;
    background-color: #dcfce7 !important;
    border-color: #86efac !important;
}

.risk-medium,
.risk-badge.risk-medium {
    color: #854d0e !important;
    background-color: #fef9c3 !important;
    border-color: #fde047 !important;
}

.risk-high,
.risk-badge.risk-high {
    color: #9a3412 !important;
    background-color: #ffedd5 !important;
    border-color: #fdba74 !important;
}

.risk-critical,
.risk-badge.risk-critical {
    color: #991b1b !important;
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
}


/* =========================================================
   FINAL EPS GREEN-WHITE UI OVERRIDES
   No HTML changes required
   ========================================================= */

:root {
    --eps-primary: #08785c;
    --eps-primary-dark: #065e49;
    --eps-primary-deep: #044d3b;
    --eps-primary-light: #cfeee4;
    --eps-primary-lighter: #eaf8f3;
    --eps-sidebar-bg: #ffffff;
    --eps-menu-bg: #d5f1e8;
    --eps-menu-hover: #c2e9dc;
    --eps-menu-active: #08785c;
    --eps-menu-text: #075f49;
    --eps-page-bg: #f4faf7;
}

/* Sidebar like EPS reference design */
.portal-sidebar {
    background: var(--eps-sidebar-bg) !important;
    border-right: 1px solid #d9ebe5 !important;
    box-shadow: 5px 0 18px rgba(4, 77, 59, 0.08) !important;
    padding: 10px 8px !important;
}

.portal-brand {
    justify-content: center !important;
    min-height: 64px !important;
    margin-bottom: 8px !important;
    padding: 4px 8px 10px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #dcece6 !important;
}

    .portal-brand img {
        width: 105px !important;
        height: auto !important;
        max-height: 48px !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

.portal-menu {
    padding-top: 4px !important;
}

    .portal-menu a,
    .menu-parent {
        min-height: 45px !important;
        margin-bottom: 8px !important;
        padding: 10px 12px !important;
        color: var(--eps-menu-text) !important;
        background: var(--eps-menu-bg) !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
        transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
    }

        .portal-menu a:hover,
        .menu-parent:hover {
            color: var(--eps-primary-dark) !important;
            background: var(--eps-menu-hover) !important;
            transform: translateX(2px);
            box-shadow: 0 5px 12px rgba(8, 120, 92, 0.10) !important;
        }

        .portal-menu a.active,
        .menu-parent.active,
        .portal-menu a[aria-current="page"] {
            color: #ffffff !important;
            background: linear-gradient( 135deg, var(--eps-primary) 0%, var(--eps-primary-dark) 100% ) !important;
            border-color: var(--eps-primary-dark) !important;
            box-shadow: 0 6px 14px rgba(8, 120, 92, 0.20) !important;
        }

            .portal-menu a.active i,
            .menu-parent.active i,
            .portal-menu a[aria-current="page"] i {
                color: #ffffff !important;
            }

    .portal-menu i {
        width: 20px !important;
        min-width: 20px !important;
        color: inherit !important;
        font-size: 16px !important;
        text-align: center !important;
    }

.menu-parent::after {
    margin-left: auto !important;
    color: inherit !important;
}

/* Profile submenu */
.submenu {
    margin: -2px 2px 8px 16px !important;
    padding: 6px 0 2px 12px !important;
    border-left: 2px solid #9bd8c5 !important;
}

    .submenu a {
        min-height: 36px !important;
        margin-bottom: 5px !important;
        padding: 7px 10px !important;
        color: var(--eps-primary-dark) !important;
        background: #eef9f5 !important;
        border-radius: 9px !important;
        font-size: 12px !important;
    }

        .submenu a:hover {
            background: #dff3ec !important;
        }

        .submenu a.active,
        .submenu a[aria-current="page"] {
            color: #ffffff !important;
            background: var(--eps-primary) !important;
        }

/* Header and footer */
.portal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #dcece6 !important;
    box-shadow: 0 3px 12px rgba(4, 77, 59, .06) !important;
}

    .portal-header .current-user {
        color: var(--eps-primary-dark) !important;
    }

    .portal-header .icon-button {
        color: var(--eps-primary) !important;
    }

.portal-footer {
    color: #ffffff !important;
    background: linear-gradient( 135deg, var(--eps-primary) 0%, var(--eps-primary-dark) 100% ) !important;
}

/* General page */
body {
    background: var(--eps-page-bg) !important;
}

.content-card,
.stat-card,
.mini-stat-card,
.profile-card,
.form-card {
    border-color: #dcece6 !important;
    box-shadow: 0 5px 16px rgba(4, 77, 59, .06) !important;
}

/* Compact profile, profile edit, and change password */
.profile-card,
.form-card {
    max-width: 760px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 16px !important;
    border-radius: 14px !important;
}

.profile-summary {
    gap: 14px !important;
    padding: 8px 0 12px !important;
    border-bottom: 1px solid #e1eee9 !important;
}

    .profile-image,
    .profile-summary img,
    .profile-card .profile-image,
    .form-card .profile-image {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        object-fit: cover !important;
        background: #ffffff !important;
        border: 3px solid #ccebe0 !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 12px rgba(4, 77, 59, .10) !important;
    }

/* Covers image preview classes without HTML changes */
.profile-preview,
.preview-image,
.profile-upload-image,
.profile-photo-preview,
.image-preview,
.avatar-preview,
.profile-card img[src*="profile"],
.form-card img[src*="profile"] {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    object-fit: cover !important;
    border: 3px solid #ccebe0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(4, 77, 59, .10) !important;
}

.profile-summary h2,
.profile-summary h3,
.profile-summary h4 {
    margin: 0 0 3px !important;
    color: var(--eps-primary-dark) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}

.profile-summary p,
.profile-summary small {
    margin: 0 !important;
    color: #64766f !important;
    font-size: 12px !important;
}

/* Reduce large upload/image area */
.profile-card .text-center,
.form-card .text-center {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.profile-card .mb-4,
.form-card .mb-4 {
    margin-bottom: 14px !important;
}

.profile-card .py-4,
.form-card .py-4,
.profile-card .py-5,
.form-card .py-5 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Forms */
.form-control,
.form-select {
    border-color: #cfe1db !important;
    border-radius: 8px !important;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--eps-primary) !important;
        box-shadow: 0 0 0 .18rem rgba(8, 120, 92, .14) !important;
    }

.btn-primary,
.page-link.active,
.active > .page-link {
    background-color: var(--eps-primary) !important;
    border-color: var(--eps-primary) !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--eps-primary-dark) !important;
        border-color: var(--eps-primary-dark) !important;
    }

/* EPS original logo colors */
.eps-logo,
.portal-brand img,
.header-logo,
.portal-footer img,
.auth-logo img,
.toast-logo,
.navbar-brand img,
.sidebar-logo img,
.login-logo img,
.brand-logo img,
.logo img,
img[src*="eps.com.bd/images/logo.png"] {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* Mobile */
@media (max-width: 767.98px) {
    .profile-card,
    .form-card {
        padding: 12px !important;
    }

    .profile-summary {
        align-items: flex-start !important;
    }

        .profile-image,
        .profile-summary img,
        .profile-preview,
        .preview-image,
        .profile-upload-image,
        .profile-photo-preview,
        .image-preview,
        .avatar-preview {
            width: 64px !important;
            height: 64px !important;
            min-width: 64px !important;
            min-height: 64px !important;
            max-width: 64px !important;
            max-height: 64px !important;
        }
}

/* ==========================
   Modern EPS Footer
   ========================== */

.portal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 52px;
    padding: 10px 20px;
    background: #ffffff !important;
    border-top: 1px solid #dcece6;
    box-shadow: 0 -2px 10px rgba(0,0,0,.04);
    color: #5d6c67 !important;
    font-size: 13px;
    font-weight: 500;
}

    .portal-footer img {
        width: 70px;
        height: auto;
        object-fit: contain;
        filter: none !important;
        -webkit-filter: none !important;
    }

    .portal-footer a {
        color: #08785c;
        text-decoration: none;
        font-weight: 600;
    }

        .portal-footer a:hover {
            color: #065e49;
        }

    .portal-footer .copyright {
        color: #7b8783;
    }

    .portal-footer .footer-right {
        display: flex;
        align-items: center;
        gap: 18px;
    }

/* ===================================
   User Profile Compact Design
   =================================== */

.profile-page-heading {
    margin-bottom: 10px;
}

.profile-showcase {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    border-radius: 14px;
}

.profile-cover {
    height: 74px;
    background: linear-gradient( 135deg, #08785c 0%, #1c9b78 100% );
}

.profile-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 16px;
}

.profile-avatar-wrap {
    display: grid;
    width: 78px;
    height: 78px;
    margin-top: -48px;
    flex: 0 0 78px;
    place-items: center;
    background: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(4, 77, 59, .16);
}

.profile-avatar-xl {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #ffffff;
    border: 2px solid #d7eee6;
    border-radius: 50% !important;
}

.profile-identity {
    min-width: 0;
}

    .profile-identity h2 {
        margin: 0 0 2px;
        color: #124d3d;
        font-size: 20px;
        font-weight: 750;
    }

    .profile-identity p {
        margin: 0 0 7px;
        overflow: hidden;
        color: #66756f;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.profile-actions {
    margin-left: auto;
}

.profile-info-card {
    margin-top: 10px;
    border-radius: 14px;
}

    .profile-info-card .detail-item {
        background: #f5fbf8;
        border-color: #dbece6;
    }

        .profile-info-card .detail-item:hover {
            background: #edf8f4;
            border-color: #b9ddcf;
        }

@media (max-width: 767.98px) {
    .profile-cover {
        height: 62px;
    }

    .profile-main {
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
        flex-wrap: wrap;
    }

    .profile-avatar-wrap {
        width: 66px;
        height: 66px;
        margin-top: -38px;
        flex-basis: 66px;
    }

    .profile-avatar-xl {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }

    .profile-identity h2 {
        font-size: 17px;
    }

    .profile-actions {
        width: 100%;
        margin-left: 0;
    }

        .profile-actions .btn {
            width: 100%;
        }
}


/* ===================================
   Profile Edit Compact Design
   =================================== */

.profile-form-card {
    max-width: 760px !important;
    margin-right: auto;
    margin-left: auto;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 14px;
}

    .profile-form-card form {
        padding: 0;
    }

.profile-edit-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: linear-gradient( 135deg, #08785c 0%, #1c9b78 100% );
}

.image-picker {
    position: relative;
    display: grid;
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    place-items: center;
    background: #ffffff;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(4,77,59,.18);
}

    .image-picker img,
    #profilePreview {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
        object-fit: cover !important;
        object-position: center !important;
        background: #ffffff;
        border: 2px solid #d8eee7;
        border-radius: 50% !important;
    }

.camera-button {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: grid;
    width: 28px;
    height: 28px;
    margin: 0;
    color: #ffffff;
    cursor: pointer;
    background: #075f49;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,.16);
    place-items: center;
    transition: .2s ease;
}

    .camera-button:hover {
        background: #044d3b;
        transform: scale(1.06);
    }

    .camera-button i {
        font-size: 12px;
    }

.profile-edit-title h4 {
    margin: 0 0 3px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.profile-edit-title p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 12px;
}

.validation-summary {
    margin: 12px 16px 0;
}

.profile-form-section {
    padding: 16px 18px 10px;
}

    .profile-form-section .section-title {
        margin-bottom: 8px;
    }

    .profile-form-section .form-control {
        min-height: 38px;
    }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid #e1eee9;
    background: #f8fcfa;
}

@media (max-width: 767.98px) {
    .profile-edit-head {
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }

    .image-picker {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
    }

        .image-picker img,
        #profilePreview {
            width: 58px !important;
            height: 58px !important;
            min-width: 58px !important;
            min-height: 58px !important;
            max-width: 58px !important;
            max-height: 58px !important;
        }

    .camera-button {
        width: 25px;
        height: 25px;
    }

    .profile-edit-title h4 {
        font-size: 16px;
    }

    .profile-form-section {
        padding: 13px;
    }

    .form-actions {
        padding: 12px 13px;
    }

        .form-actions .btn {
            flex: 1;
        }
}

/* ===================================
   Change Password Attractive Design
   =================================== */

.password-card {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    max-width: 860px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px;
}

.security-visual {
    position: relative;
    display: flex;
    min-height: 100%;
    padding: 28px 24px;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient( circle at top right, rgba(255, 255, 255, .16), transparent 42% ), linear-gradient( 145deg, #08785c 0%, #075f49 55%, #044d3b 100% );
    flex-direction: column;
    justify-content: center;
}

    .security-visual::before,
    .security-visual::after {
        position: absolute;
        content: "";
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 50%;
    }

    .security-visual::before {
        top: -60px;
        right: -55px;
        width: 160px;
        height: 160px;
    }

    .security-visual::after {
        right: -25px;
        bottom: -80px;
        width: 190px;
        height: 190px;
    }

.security-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 66px;
    height: 66px;
    margin-bottom: 16px;
    color: #08785c;
    font-size: 29px;
    background: #ffffff;
    border: 6px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .14);
    place-items: center;
}

.security-content {
    position: relative;
    z-index: 1;
}

.security-label {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 4px 8px;
    color: #d8f5eb;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.security-content h4 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 23px;
    font-weight: 750;
}

.security-content p {
    margin: 0 0 17px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    line-height: 1.6;
}

.security-points {
    display: grid;
    gap: 8px;
}

    .security-points span {
        display: flex;
        gap: 7px;
        align-items: center;
        color: rgba(255, 255, 255, .88);
        font-size: 11px;
    }

    .security-points i {
        color: #91e3c5;
        font-size: 12px;
    }

.password-form {
    padding: 28px;
    background: #ffffff;
}

    .password-form .form-label {
        margin-bottom: 5px;
        color: #2c574a;
        font-size: 12px;
        font-weight: 700;
    }

.password-input {
    position: relative;
    display: flex;
    align-items: center;
}

    .password-input .form-control {
        min-height: 42px;
        padding-right: 44px;
        padding-left: 40px;
        border-color: #cfe1db;
        border-radius: 9px;
    }

        .password-input .form-control:focus {
            border-color: #08785c;
            box-shadow: 0 0 0 .18rem rgba(8, 120, 92, .13);
        }

.password-field-icon {
    position: absolute;
    left: 13px;
    z-index: 2;
    color: #79968c;
    font-size: 14px;
    pointer-events: none;
}

.toggle-password {
    position: absolute;
    right: 6px;
    z-index: 2;
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #557168;
    background: transparent;
    border: 0;
    border-radius: 7px;
    place-items: center;
    transition: .2s ease;
}

    .toggle-password:hover {
        color: #08785c;
        background: #eaf8f3;
    }

    .toggle-password:focus {
        outline: none;
        box-shadow: 0 0 0 .15rem rgba(8, 120, 92, .13);
    }

.password-submit-btn {
    min-height: 42px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 7px 15px rgba(8, 120, 92, .18);
}

    .password-submit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 9px 18px rgba(8, 120, 92, .24);
    }

.password-form .text-danger {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.password-form .validation-summary {
    margin-bottom: 12px;
}

@media (max-width: 767.98px) {
    .password-card {
        grid-template-columns: 1fr;
    }

    .security-visual {
        min-height: auto;
        padding: 20px;
    }

    .security-icon {
        width: 54px;
        height: 54px;
        margin-bottom: 12px;
        font-size: 23px;
        border-radius: 14px;
    }

    .security-content h4 {
        font-size: 19px;
    }

    .security-points {
        grid-template-columns: 1fr;
    }

    .password-form {
        padding: 18px;
    }
}