html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    font-family: "Inter", sans-serif;
}

.container-fluid.main-container-fluid {
    height: 100vh;
    height: 100dvh;
    padding: 22px 10px 10px;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.header-bar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


.btn.menu-toggle {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-35%);
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: #F7F0CB;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.btn.menu-toggle img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.btn.menu-toggle:focus,
.btn.menu-toggle:active {
    box-shadow: none;
}

@media (max-width: 767.98px) {

    .container-fluid.main-container-fluid {
        padding: 24px 3px 3px;
    }

    .btn.menu-toggle {
        left: 18px;
        width: 40px;
        height: 40px;
    }

    .btn.menu-toggle img {
        width: 20px;
        height: 20px;
    }
}

/*.dashboard-wrapper {
    border-radius: 24px;
    border: 1px solid #B8494E;
    height: 100%;
    box-sizing: border-box;

    background-image: url('../images/Frame1166.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}*/

.dashboard-wrapper {
    flex: 1;
    min-height: 0;
    border-radius: 24px;
    border: 1px solid #B8494E;
    box-sizing: border-box;
    background-image: url('../images/Frame1166.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/*.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;

    margin: 0 auto;

    padding: 20px 32px 10px;
    background-color: #F7F0CB;
    box-sizing: border-box;
    border-radius: 0 0 24px 24px;

    margin-top: -20px;
}*/

.logo-container {
    width: fit-content;
    margin: 0 auto;
    padding: 2px 8px 0;
    margin-bottom: -8px;
    background-color: #F7F0CB;
    border-radius: 0 0 24px 24px;
    position: relative;
    z-index: 10;
    margin-top: -22px;
}


.dashboard-content{
    padding: 30px 40px 40px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 767.98px) {

    .dashboard-content {
        padding: 6px;
    }
}

@media (max-width: 767.98px) {

    .logo-container {
        padding: 8px 20px;
        margin-top: -10px;
        border-radius: 0 0 20px 20px;
    }

    .logo-container img {
        width: 150px;   /* Adjust between 140-160px as needed */
        height: auto;
        display: block;
    }
}

.card.dashboard-card{
    background: transparent;
    border: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card.dashboard-card > .row {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
}

/* Sidebar column — fixed height, scrollable only if needed */
.card.dashboard-card > .row > .col-md-2 {
    overflow-y: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Main content column — scrolls itself when the page has no .table-area (e.g. dashboard) */
.card.dashboard-card > .row > .col-md-10 {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Welcome/breadcrumb bar — fixed */
.welcome-card {
    flex-shrink: 0;
}

/* Table area — the only scrollable part */
.table-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.card.sidebar-card{
    background: #F7F0CB;
    border-radius: 16px;
    padding: 32px;
    border: 0;
    height: 100%;
    overflow-y: auto;
}

/* Bootstrap's d-md-block/col-md-2 breakpoint (768px) leaves the icon
   sidebar visible but squeezed on tablet widths. Extend the mobile
   hamburger/offcanvas treatment through 991.98px so the sidebar only
   appears once there's actually room for it. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .card.dashboard-card > .row > .col-md-2 {
        display: none !important;
    }

    .card.dashboard-card > .row > .col-md-10 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .btn.menu-toggle {
        display: flex !important;
    }
}

.col-md-2:has(.sidebar-card) {
    overflow-y: auto;
}

.sidebar-icon{
    width: 40px; height: 40px;
}


.sidebar-text {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    transition: color 0.2s ease-in-out;
}

.sidebar-card .nav-link {
    display: block;
    padding: 12px 16px !important;
    border-radius: 16px;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out;
}

.sidebar-card .nav-link:hover,
.sidebar-card .nav-item:hover .nav-link {
    background-color: rgba(0, 0, 0, 0.08);
}

.sidebar-card .nav-link:hover .sidebar-text,
.sidebar-card .nav-item:hover .sidebar-text {
    color: #000000;
}

/* Locations sub-menu */
#locationsDropdown .nav-link {
    padding: 6px 8px !important;
    border-radius: 8px;
}
#locationsDropdown .nav-link,
#locationsDropdown .nav-link:hover,
#locationsDropdown .nav-item:hover .nav-link,
#locationsDropdown .nav-link:focus,
#locationsDropdown .nav-link:active {
    background-color: transparent !important;
    box-shadow: none !important;
}
#locationsDropdown .sidebar-text {
    font-size: 12px;
    font-weight: 500;
}

/**Offcanvas sidebar **/

.offcanvas.mobile-sidebar {
    width: 100vw !important;
    max-width: 100vw;
    height: 100vh;
    border: none !important;
    background: #ffffff;
    padding: 10px;
    display: flex;
}

.mobile-sidebar-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
}

.mobile-sidebar-header {
    height: 90px;
    background-image: url('../images/Frame1166.png');
    background-size: cover;
    background-position: top;
    border-radius: 24px 24px 0px 0px;
    position: relative;
}

.mobile-sidebar-header .logo-container {
    margin-top: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.sidebar-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 42px;
    height: 42px;
    border: 2px solid #B8494E;
    border-radius: 12px;
    background: #F7F0CB;
}

.sidebar-close img{
    height: 24px; width: 24px;
}

.sidebar-body{
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #F7F0CB;
    margin: 4px 0;
    border-radius: 14px;
    overflow-y: auto;
}

.mobile-profile {
    text-align: center;
}

.mobile-profile-img {
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    box-shadow: none;
}

.mobile-profile h4 {
    margin-top: 8px;
    margin-bottom: 2px;
    font-size: 18px;
}

.mobile-profile p {
    margin-bottom: 0;
    font-size: 13px;
}

.mobile-menu{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
}

.mobile-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #000;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,.2);
}

.mobile-menu a:last-child {
    border-bottom: none;
}

.mobile-menu img {
    width: 28px;
    margin-bottom: 6px;
}


.mobile-menu span {
    font-size: 15px;
    font-weight: 500;
}

/* Locations dropdown toggle inside the mobile offcanvas menu */
.mobile-menu-dropdown-toggle{
    position: relative;
    border-bottom: none !important;
}

.mobile-menu-dropdown-toggle::after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s;
}

.mobile-menu-dropdown-toggle[aria-expanded="true"]::after{
    transform: translateY(-30%) rotate(-135deg);
}

.mobile-locations-collapse{
    border-bottom: 1px solid rgba(0,0,0,.2);
    padding-bottom: 10px;
}

.mobile-locations-collapse .mobile-submenu-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: #4A4A4A;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
}

.mobile-submenu-link::before{
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.mobile-submenu-link:hover{
    color: #000;
}

#locationsDropdown .nav-link{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding-left: 20px;
}

#locationsDropdown .nav-link::before{
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9a9a9a;
    flex-shrink: 0;
}

.mobile-sidebar-footer{
    flex-shrink: 0;
    height: 70px;
    background:#E3001B;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:0 0 24px 24px;
}

.logout-btn {
    border: none;
    background: transparent;
}

.logout-btn img{
    width: clamp(25px, 12vw, 30px);
    height: clamp(25px, 12vw, 30px);
}

.logout-dash-home img{
    width: clamp(25px, 12vw, 54px);
    height: clamp(25px, 12vw, 54px);
}

.bg-stat-card {
  background-color: #F7F0CB;
  border-radius: 16px;
}

.bg-stat-card-1 {
  background-color: #F7F0CB;
  border-radius: 16px;
  min-height: 160px;
}

.bg-stat-card-1.status {
  min-height: 0;
  padding: 28px 20px !important;
  display: flex;
  align-items: center;
}

.bg-stat-card-1.status .sidebar-text {
  font-size: 20px;
  font-weight: 600;
}

.text-stat-red {
  color: #b71c1c;
}

.stat-number{
    font-size: 42px;
    font-weight: 600;
    color: #C7000B;
    line-height: 1.1;
}

.profile-dash {
    width: clamp(40px, 12vw, 80px);
    height: clamp(40px, 12vw, 80px);
    border-radius: 16px;
    object-fit: cover;
}

/* ==========================
   Mobile Dashboard Styles
========================== */
@media (max-width: 767.98px) {

    /* Dashboard stat cards */
    .bg-stat-card-1 {
        min-height: 90px;
        padding: 12px !important;
        border-radius: 12px;
    }

    /* Dashboard icons */
    .bg-stat-card-1 .sidebar-icon {
        width: 28px;
        height: 28px;
        margin-right: 10px !important;
    }

    /* Dashboard labels */
    .bg-stat-card-1 .sidebar-text {
        font-size: 9px;
        font-weight: 600;
        line-height: 1.3;
    }

    /* Dashboard numbers */
    .bg-stat-card-1 .stat-number {
        font-size: 27px;
        line-height: 1;
    }

    .bg-stat-card-1.status{
        min-height: 0px;
    }

    .bg-stat-card-1.status .sidebar-text{
        font-size: 15px !important;
    }

    /* Compact the mobile profile bar so the red frame's top ~35% still
       reaches through the stat-cards row below it */
    .bg-stat-card.d-flex.d-md-none{
        padding: 10px 14px !important;
        margin-bottom: 10px !important;
    }

    .bg-stat-card.d-flex.d-md-none .profile-dash{
        width: 40px !important;
        height: 40px !important;
    }

    .bg-stat-card.d-flex.d-md-none .profile-name{
        font-size: 15px;
    }

    .bg-stat-card.d-flex.d-md-none .profile-designation{
        font-size: 12px;
    }

    .header-bar{
        margin-bottom: 18px;
    }

    .dashboard-content{
        padding-top: 6px;
    }

    /* Student status cards (Applied / On Progress / On Hold / Completed) */
    .status-card{
        min-height: 100px !important;
        border-radius: 12px !important;
    }

    .status-card-title{
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .status-card-icon{
        width: 22px !important;
        height: 22px !important;
    }

    .status-card .stat-number{
        font-size: 26px !important;
    }

}

.bg-stat-card-1.type-1{
    background: #B72929;
}

.bg-stat-card-1.type-2{
    background: #C03850;
}

.bg-stat-card-1.type-3{
    background: #DB687E;
}

.bg-stat-card-1.type-4{
    background: #323133;
}

.bg-stat-card-1.type-1 .sidebar-text, .bg-stat-card-1.type-1 .stat-number,
.bg-stat-card-1.type-2 .sidebar-text, .bg-stat-card-1.type-2 .stat-number,
.bg-stat-card-1.type-3 .sidebar-text, .bg-stat-card-1.type-3 .stat-number,
.bg-stat-card-1.type-4 .sidebar-text, .bg-stat-card-1.type-4 .stat-number{
    color: #FFF;
}

.status-card {
    border-radius: 16px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.status-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 12px;
    width: 100%;
}

.status-card-icon {
    width: 36px;
    height: 36px;
    filter: brightness(0) invert(1);
}

.status-card .stat-number {
    color: #fff;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
}

.chart-flex-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Desktop: title on its own row, filter as a narrow column, canvas fills the rest — matches your old col-md-2 / col-md-10 split */
.chart-title-flex{
    flex: 1 1 100%;
}

.chart-filter-flex{
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
}

.chart-canvas-flex{
    flex: 1 1 0;
    min-width: 0;
}

/* Mobile: title + filter share a row, canvas drops to its own line below */
@media (max-width: 767px){

    .chart-title-flex{
        flex: 1 1 auto;
    }

    .chart-filter-flex{
        flex: 0 0 auto;
        max-width: none;
        margin-left: auto;
        margin-bottom: 0;   /* overrides the 20px bottom margin from your existing .chart-filter mobile rule */
    }

    .chart-canvas-flex{
        flex: 1 1 100%;   /* basis 100% forces it onto a new line */
        margin-top: 16px;
    }
}

.chart-title{
    font-size:18px;
    font-weight:500;
    margin-bottom:20px;
}

.chart-filter{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.chart-btn{
    border:none;
    background:#323133;
    color:#fff;
    border-radius:12px;
    height:48px;
    transition:.3s;
    font-size:15px;
}

.chart-btn.active{
    background:#C7000B;
}

.chart-btn:hover{
    transform:translateY(-2px);
}

canvas{
    width:100% !important;
}

#studentChart{
    height:250px !important;
}

@media(max-width:767px){
    .chart-filter{
        flex-direction:row;
        margin-bottom:20px;
        gap: 6px;
    }

    .chart-filter button{
        flex: 0 0 auto;
    }

    .chart-btn{
        height: 30px;
        padding: 0 14px;
        font-size: 12px;
        border-radius: 20px;
    }
}

.chart-card{
    height: 360px;
}

.donut-wrapper{
    width:270px;
    height:270px;
    margin:20px auto;
}

@media (max-width: 767.98px){
    .donut-wrapper{
        width: 170px !important;
        height: 170px !important;
        margin: 12px auto !important;
    }
}

#statusChart{
    width:100% !important;
    height:100% !important;
}
.chart-legend-grid{
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
    column-gap: 16px;
}

.chart-legend-grid li{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #151515;
}

.chart-legend-grid .legend-dot{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ==========================================
   Welcome Card
========================================== */

.welcome-card {
    background: #F7F0CB;
    border-radius: 16px;
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.welcome-content {
    display: flex;
    flex-direction: column;
}

.welcome-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #151515;
    letter-spacing: 0.25px;
}

.breadcrumb-area {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #151516;
}

.breadcrumb-area img {
    width: 32px;
    height: 32px;
}

.breadcrumb-divider {
    color: #999;
}

.welcome-action img {
    width: 46px;
    height: 46px;
    transition: .25s;
}

.welcome-action:hover img {
    transform: scale(1.08);
}


@media (max-width: 767.98px) {
    .welcome-card {
        padding: 14px 16px;
        border-radius: 14px;
        margin-bottom: 20px;
    }

    .welcome-content {
        flex: 1;
        min-width: 0;
    }

    .welcome-title {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .breadcrumb-area {
        margin-top: 0;
        gap: 6px;
        font-size: 10px;
        font-weight: 500;
    }

    .breadcrumb-area img {
        width: 12px;
        height: 12px;
    }

    .breadcrumb-divider {
        font-size: 10px;
    }

    .welcome-action {
        margin-left: 12px;
        flex-shrink: 0;
    }

    .welcome-action img {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 767.98px) {

    .breadcrumb-area {
        gap: 4px;
    }

    .breadcrumb-area img {
        display: none;
    }

}

@media (max-width: 767.98px) {
    .main-content-col{
        padding-left:0;
        padding-right:0;
    }
}

.table-area{
    background:#FEF3DD;
    border-radius:18px;
    padding:8px;
}

.table-toolbar,
.table-card{
    background: transparent;
    border-radius:16px;
}

.table-toolbar{
    padding: 12px 24px;
}

.table-toolbar-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 767.98px){
    .table-search{
        width: 100%;
    }

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

.table-card{
    overflow:hidden;
}

.table-search{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap: wrap;
}

.search-box{
    width:320px;
    height:46px;
    background:#fff;
    border:1px solid #DCDDDE;
    border-radius:14px;
    display:flex;
    align-items:center;
    padding:0 16px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
}

/* Wallet/Students pages have filters in the same row, so keep their search compact */
.search-box:has(#walletSearch),
.search-box:has(#studentSearch){
    width:220px;
}

.search-box img{
    width:18px;
    margin-right:10px;
}

.search-box input{
    border:none;
    outline:none;
    width:100%;
    background:transparent;
    text-align: right !important;
    font-size: 15px;
    color: #323133;
}

.search-box input::placeholder{
    color: #9C9C9C;
    opacity: 1;
}

.btn.btn-search{
    width:96px;
    height:46px;
    border-radius:14px;
    background:#fff;
    border:1px solid #DCDDDE;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
    font-size: 15px;
    font-weight: 500;
    color: #323133;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-search:hover, .btn.btn-search.active, .btn.btn-search:focus{
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: #323133;
    border-color: #DCDDDE;
}

.btn.btn-add-country, .btn.btn-add-country:hover{
    padding: 13px 16px ;
    border-radius:14px;
    background:#323133;
    color:#fff;
    font-size: 14px;
    font-weight: 400;
}

.btn.btn-add-country img{
    height: 24px; width: 24px;
}

/* ==========================================
   Wallet filters (date range + type)
========================================== */
.wallet-filter-row,
.wallet-filter-group{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Search on the left, filters right after it, Add Txns pinned right */
.wallet-toolbar-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 12px;
}

.wallet-toolbar-row .wallet-filter-group{
    justify-content: flex-start;
    margin-left: auto;
}

.wallet-toolbar-row .btn-add-country{
    margin-left: auto;
    flex-shrink: 0;
}

@media (min-width: 768px){
    .wallet-toolbar-row{
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .wallet-toolbar-row .table-search,
    .wallet-toolbar-row .wallet-filter-group{
        flex-shrink: 0;
    }
}

.wallet-filter{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #E4E4E4;
    border-radius: 14px;
    padding: 6px 10px;
    height: 44px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.wallet-filter label{
    margin: 0;
    color: #676A72;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.wallet-filter-input{
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #151515;
    cursor: pointer;
}

.wallet-filter select.wallet-filter-input{
    min-width: 70px;
}

.wallet-filter-icon{
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.6;
}

@media (max-width: 767.98px){
    .wallet-toolbar-row{
        gap: 10px;
    }

    /* Filters row first, search row second */
    .wallet-toolbar-row .wallet-filter-group{
        order: 1;
        width: 100%;
        margin-left: 0;
    }

    .wallet-toolbar-row .table-search{
        order: 2;
        width: 100%;
    }

    .wallet-filter-group{
        gap: 8px;
    }

    /* Date range + Type share one row; Apply/Clear wrap to the next */
    .wallet-filter-group .wallet-filter:nth-child(1){
        flex: 1 1 60%;
    }

    .wallet-filter-group .wallet-filter:nth-child(2){
        flex: 1 1 35%;
    }

    .wallet-filter-group .wallet-filter-apply,
    .wallet-filter-group .wallet-filter-clear{
        flex: 1;
    }

    .wallet-filter-range{
        min-width: 0;
        flex: 1;
    }

    .search-box{
        flex: 1;
    }
}

.wallet-filter-input.wallet-filter-range,
input.wallet-filter-range.flatpickr-input,
.wallet-filter input.flatpickr-input,
.wallet-filter input.flatpickr-input.active{
    width: 100px;
    cursor: pointer;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0;
    height: auto;
}

.btn.wallet-filter-apply{
    height: 44px;
    border: 1.5px solid #151515;
    border-radius: 14px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    color: #151515;
    flex-shrink: 0;
}

/* ==========================================
   Custom flatpickr skin (two-month, brand red)
   ========================================== */
.flatpickr-calendar.cbec-flatpickr{
    background: transparent;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 20px;
    width: auto !important;
    padding: 4px;
}

.flatpickr-calendar.cbec-flatpickr.arrowTop:before,
.flatpickr-calendar.cbec-flatpickr.arrowTop:after,
.flatpickr-calendar.cbec-flatpickr.arrowBottom:before,
.flatpickr-calendar.cbec-flatpickr.arrowBottom:after{
    display: none;
}

.cbec-flatpickr .flatpickr-months{
    display: flex;
    align-items: stretch;
    position: relative;
}

.cbec-flatpickr .flatpickr-month{
    background: #AF2824 !important;
    color: #fff !important;
    fill: #fff !important;
    border-radius: 16px 16px 0 0;
    height: 56px;
    display: flex;
    align-items: center;
}

.cbec-flatpickr .flatpickr-month:nth-child(2){
    margin-left: 20px;
}

.cbec-flatpickr .flatpickr-current-month{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    padding: 0 44px;
    left: 0;
    width: 100%;
    justify-content: center;
}

.cbec-flatpickr .flatpickr-current-month .cur-month{
    font-weight: 700;
    color: #fff !important;
    padding: 0;
}

.cbec-flatpickr .flatpickr-current-month .cur-month::before{
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -4px;
    -webkit-mask: url('../icons/calendar.png') no-repeat center/contain;
    mask: url('../icons/calendar.png') no-repeat center/contain;
    background-color: #fff;
}

.cbec-flatpickr .flatpickr-current-month .numInputWrapper{
    width: 62px;
}

.cbec-flatpickr .flatpickr-current-month input.cur-year{
    color: #fff;
    font-weight: 700;
    background: transparent;
    pointer-events: none;
}

.cbec-flatpickr .flatpickr-current-month .numInputWrapper span.arrowUp,
.cbec-flatpickr .flatpickr-current-month .numInputWrapper span.arrowDown{
    display: none;
}

.cbec-flatpickr .flatpickr-prev-month,
.cbec-flatpickr .flatpickr-next-month{
    position: absolute;
    top: 10px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #fff;
    color: #fff;
}

.cbec-flatpickr .flatpickr-prev-month{ left: 10px; }
.cbec-flatpickr .flatpickr-next-month{ right: 10px; }

.cbec-flatpickr .flatpickr-prev-month svg,
.cbec-flatpickr .flatpickr-next-month svg{
    width: 14px;
    height: 14px;
    fill: #fff;
}

.cbec-flatpickr .flatpickr-innerContainer{
    background: #FEF3DD !important;
    border-radius: 0 0 16px 16px;
    padding-bottom: 10px;
}

.cbec-flatpickr .flatpickr-weekdays{
    background: transparent;
    height: 40px;
}

.cbec-flatpickr .flatpickr-weekdaycontainer:nth-child(2){
    margin-left: 20px;
}

.cbec-flatpickr span.flatpickr-weekday{
    background: transparent;
    color: #9a9a9a !important;
    font-weight: 600;
    font-size: 13px;
}

.cbec-flatpickr .flatpickr-days{
    border: none;
}

.cbec-flatpickr .dayContainer{
    padding: 0 10px;
}

.cbec-flatpickr .dayContainer:nth-child(2){
    margin-left: 20px;
    border-left: none;
}

.cbec-flatpickr .flatpickr-day{
    border-radius: 10px;
    color: #323133 !important;
    max-width: 36px;
    height: 36px;
    line-height: 36px;
    margin: 2px;
}

.cbec-flatpickr .flatpickr-day.prevMonthDay,
.cbec-flatpickr .flatpickr-day.nextMonthDay,
.cbec-flatpickr .flatpickr-day.flatpickr-disabled{
    color: #d8d5cd !important;
}

.cbec-flatpickr .flatpickr-day:hover{
    background: #F6DAD8 !important;
    border-color: #F6DAD8 !important;
}

.cbec-flatpickr .flatpickr-day.inRange{
    background: #EFC5C2 !important;
    border-color: #EFC5C2 !important;
    box-shadow: -5px 0 0 #EFC5C2, 5px 0 0 #EFC5C2;
    color: #AF2824 !important;
}

.cbec-flatpickr .flatpickr-day.selected,
.cbec-flatpickr .flatpickr-day.startRange,
.cbec-flatpickr .flatpickr-day.endRange{
    background: #AF2824 !important;
    border-color: #AF2824 !important;
    color: #fff !important;
}

.cbec-flatpickr .flatpickr-day.selected.startRange,
.cbec-flatpickr .flatpickr-day.startRange.startRange,
.cbec-flatpickr .flatpickr-day.endRange.endRange{
    box-shadow: none;
}

.cbec-flatpickr .flatpickr-day.today{
    border-color: #AF2824;
}

.btn.wallet-filter-apply:hover{
    background: #151515;
    color: #fff;
}

.btn.wallet-filter-clear{
    height: 44px;
    border: 1px solid #E4E4E4;
    border-radius: 14px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    color: #676A72;
}

.btn.wallet-filter-clear:hover{
    background: #F7F7F7;
    color: #151515;
}


.table-title{
    font-size: 20px;
    font-weight: 600;
}

.table-subtitle{
    color: #676A72;
    font-size: 14px;
    font-weight: 400;
}

/*======================================
    COUNTRY TABLE
======================================*/

.table-responsive {
    overflow-x: auto;
    border-radius: 14px;
}

.table.country-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px; /* gap between rows */
    margin: 0;
}

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

.table.country-table thead th {
    background: #AF2824;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border: none;
    padding: 16px 14px;
    vertical-align: middle;
}

.table.country-table thead th:first-child {
    border-radius: 12px 0 0 12px;
}

.table.country-table thead th:not(:last-child) {
    border-right: 2px solid #ffffff;
}

.table.country-table thead th:last-child {
    border-radius: 0 12px 12px 0;
}

@media (max-width: 767.98px){

    .table.country-table thead th {
        border-radius: 0 12px 12px 0;
    }

}

/* ==========================================
   Sortable column headers
========================================== */

.th-sort{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.sort-icon{
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.7;
    transition: .2s;
}

.th-sort:hover .sort-icon{
    opacity: 1;
}

/* Flip the icon when sorted descending */
.th-sort.sort-desc .sort-icon{
    transform: rotate(180deg);
}

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

.table.country-table tbody td {
    background: #ffffff;
    padding: 18px 14px;
    vertical-align: middle;
    border-top: 1px solid #F2E6CF;
    border-bottom: 1px solid #F2E6CF;
}

.table.country-table tbody td:not(:last-child) {
    border-right: 2px solid #F5F5F0;
}

.table.country-table tbody td:first-child {
    border-left: 1px solid #F2E6CF;
    border-radius: 12px 0 0 12px;
}

.table.country-table tbody td:last-child {
    border-right: 1px solid #F2E6CF;
    border-radius: 0 12px 12px 0;
}

.table.country-table tbody tr:hover td {
    background: #FFF8EC;
}

@media (max-width: 767.98px){
    .table.country-table tbody td:last-child {
        border-radius: 12px;
        padding: 0;
        padding-top: 6px;
    }
}

/*======================================
    ACTION BUTTONS
======================================*/

.table-action {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #C7000B;
    background: #ffffff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
    transition: .25s;
    cursor: pointer;
}

.table-action:hover {
    background: rgba(199, 0, 11, 0.1);
}

.table-action-blocked {
    border-color: #C9A227 !important;
    background: #FFF8E7;
}
.table-action-blocked:hover {
    background: rgba(201, 162, 39, 0.15) !important;
}
.table-action-blocked img {
    filter: invert(62%) sepia(60%) saturate(600%) hue-rotate(10deg) brightness(95%);
}

.table-action img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Hide mobile detail rows by default (all breakpoints) */
.mobile-details{
    display: none;
}

@media (max-width: 767.98px){

    /* Only show when explicitly expanded */
    .mobile-details.show{
        display: table-row;
    }

    .table.country-table thead th:nth-child(3),
    .table.country-table thead th:nth-child(4),
    .table.country-table thead th:nth-child(5),
    .table.country-table tbody tr:not(.mobile-details) td:nth-child(3),
    .table.country-table tbody tr:not(.mobile-details) td:nth-child(4),
    .table.country-table tbody tr:not(.mobile-details) td:nth-child(5){
        display:none;
    }

    /* Round the actual LAST VISIBLE cell (Name), not the hidden Actions cell */
    .table.country-table tbody tr:not(.mobile-details) td:nth-child(2){
        border-right: 1px solid #F2E6CF;
        border-radius: 0 12px 12px 0;
    }

    /* Wallet table: collapsed row shows # and Center Name only */
    .table.wallet-table thead th:nth-child(6),
    .table.wallet-table thead th:nth-child(7),
    .table.wallet-table thead th:nth-child(8),
    .table.wallet-table thead th:nth-child(9),
    .table.wallet-table tbody tr:not(.mobile-details) td:nth-child(6),
    .table.wallet-table tbody tr:not(.mobile-details) td:nth-child(7),
    .table.wallet-table tbody tr:not(.mobile-details) td:nth-child(8),
    .table.wallet-table tbody tr:not(.mobile-details) td:nth-child(9){
        display: none;
    }

    .table.wallet-table tbody tr:not(.mobile-details) td:nth-child(2){
        border-right: 1px solid #F2E6CF;
        border-radius: 0 12px 12px 0;
    }

    /* Students table: collapsed row shows # and Name only */
    .table.students-table thead th:nth-child(6),
    .table.students-table thead th:nth-child(7),
    .table.students-table tbody tr:not(.mobile-details) td:nth-child(6),
    .table.students-table tbody tr:not(.mobile-details) td:nth-child(7){
        display: none;
    }

    /* Centers table: collapsed row shows # and Name only */
    .table.centers-table thead th:nth-child(6),
    .table.centers-table thead th:nth-child(7),
    .table.centers-table thead th:nth-child(8),
    .table.centers-table tbody tr:not(.mobile-details) td:nth-child(6),
    .table.centers-table tbody tr:not(.mobile-details) td:nth-child(7),
    .table.centers-table tbody tr:not(.mobile-details) td:nth-child(8){
        display: none;
    }

    /* Row is tappable to expand */
    .table.country-table tbody tr:not(.mobile-details){
        cursor: pointer;
    }

    /* Style the expanded panel to match Figma */
    .mobile-details td{
        background: transparent;
        border: none;
        padding: 0 0 10px;
    }

    .details-wrapper{
        background:#fff;
        border-radius:12px;
        padding:14px 16px;
        margin-top:-6px;
    }

    .detail-row{
        display:flex;
        justify-content:flex-start;
        align-items:center;
        gap: 16px;
        padding:8px 0;
        border-bottom:1px solid #F2E6CF;
        font-size:14px;
    }

    .detail-row:last-child{
        border-bottom:none;
    }

    .detail-row > span:first-child{
        flex: 0 0 110px;
        color:#676A72;
        font-weight:500;
    }

    .detail-row > div:last-child{
        flex: 1;
    }

    .detail-row > span:last-child{
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Chevron icon inside collapsed row, visible only on mobile */
    .row-expand-icon{
        display: block;
    }

    /* Flip chevron when row is expanded */
    tr.row-expanded .row-expand-icon{
        transform: rotate(180deg);
    }
}

/* Name cell layout: text + chevron button on opposite ends */
.name-cell{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Chevron button — same shape/style as .table-action, hidden on desktop */
.row-expand-btn{
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid #E5C8C8;
    background: #ffffff;
    display: none;
    justify-content: center;
    align-items: center;
    transition: .25s;
    flex-shrink: 0;
}

.row-expand-btn:hover{
    background: rgba(175, 40, 36, 0.2);
}

.row-expand-btn img{
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

@media (max-width: 767.98px){
    /* Higher specificity than the base rule above — wins regardless of source order */
    .table.country-table .row-expand-btn{
        display: inline-flex;
    }

    .table.country-table tr.row-expanded .row-expand-btn img{
        transform: rotate(180deg);
    }
}

.collapse-table-link{
    color: #950323;
    font-size: 14px;
    font-weight: 600;
}
@media (max-width: 767.98px){
    tr.row-expanded{
        display: none;
    }
}

.table-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    flex-wrap: nowrap;
    gap: 12px;
}

/* ==========================================
   Show per page
========================================== */

.footer-perpage{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #151515;
    font-weight: 400;
}

.perpage-select{
    border: 1px solid #DCDDDE;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #151515;
    background: #fff;
    outline: none;
    cursor: pointer;
}

/* ==========================================
   Pagination
========================================== */

.pagination-area,
.pagination-controls{
    display: flex;
    align-items: center;
    gap: 6px;
}

.per-page-selector{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #151515;
    font-weight: 400;
}

.per-page-selector select{
    border: 1px solid #DCDDDE;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #151515;
    background: #fff;
    outline: none;
    cursor: pointer;
}

#pageNumbers{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-arrow{
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .25s;
    object-fit: contain;
    padding: 0;
}

.page-arrow:hover:not(.disabled){
    opacity: 0.7;
}

.page-arrow.disabled{
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.page-number{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: #676A72;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .25s;
}

.page-number:hover{
    color: #151515;
}

.page-number.active{
    background: #AF2824;
    color: #ffffff;
    border-radius: 8px;
}

/* ==========================================
   Range text
========================================== */

.footer-range{
    font-size: 14px;
    color: #676A72;
    font-weight: 400;
}

@media (max-width: 767.98px){
    .table-footer{
        justify-content: space-between;
        background: #ffffff;
        border-radius: 12px;
        flex-wrap: wrap;
        padding: 12px 10px;
        row-gap: 10px;
    }

    .footer-range{
        order: 1;
        font-size: 12px;
        white-space: nowrap;
    }

    .pagination-area,
    .pagination-controls{
        order: 2;
        gap: 2px;
    }

    .footer-perpage,
    .per-page-selector{
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        font-size: 12px;
        gap: 4px;
    }

    .perpage-select,
    .per-page-selector select{
        padding: 4px 6px;
        font-size: 12px;
    }

    .page-arrow{
        width: 24px;
        height: 24px;
    }

    .page-number{
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}


/* ==========================================
   Add Country Modal
========================================== */

.modal-dialog.country-modal-dialog{
}

.modal-content.country-modal-content{
    background: #F7F0CB;
    border: 1px solid #C9C9C9;
    border-radius: 24px;
    padding: 12px;
}

.country-modal-inner{
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background: #FFF9EC;
}

/* ==========================================
   Country Modal Header
========================================== */

.form-area{
    padding: 0px 12px;
}

.country-modal-header{
    background:#AF2824;
    color:#fff;

    padding:12px 16px;

    border:none;
    border-radius:12px 12px 0 0;

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

.country-modal-icon{
    width:24px;
    height:24px;
    object-fit:contain;
}

.country-modal-header .modal-title{
    font-size:14px;
    font-weight:600;
    color:#fff;
    line-height:1;
}

.country-modal-close{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
    transition:.25s;
}

.country-modal-close:hover{
    background:rgba(255,255,255,.15);
}

.country-modal-close img{
    width:32px;
    height:32px;
    object-fit:contain;
}

.country-modal-subheader{
    background: #AF2824;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    margin: 16px 4px 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.country-modal-subheader-note{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Course/Basic Details header: title on the left, Status badge centered on
   the bar itself (not just centered in the leftover space) on desktop;
   stacked and centered on mobile so the badge never clips. */
.country-modal-subheader.sd-subheader-with-status{
    position: relative;
}

.country-modal-subheader.sd-subheader-with-status > span:last-child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 575.98px){
    .country-modal-subheader.sd-subheader-with-status{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        white-space: normal;
        gap: 6px;
        text-align: center;
        padding: 12px 16px;
    }

    .country-modal-subheader.sd-subheader-with-status > span:last-child{
        position: static;
        transform: none;
        justify-content: center;
        white-space: normal !important;
    }
}

.modal-body.country-modal-body{
    padding: 20px 24px 8px;
    background: #FFFDEE;
    margin-top: 0;
}
#studentDetailBody.country-modal-body {
    background: #FFF9EC;
}

.country-modal-label{
    font-size: 14px;
    font-weight: 600;
    color: #151515;
    margin-bottom: 6px;
}

.form-control.country-modal-input,
.form-select.country-modal-input{
    background: #FFF9EC;
    border: 1px solid #BCBFC5;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    color: #151515;
}

.form-control.country-modal-input::placeholder{
    color: #393B40;
}

.form-control.country-modal-input:focus,
.form-select.country-modal-input:focus{
    box-shadow: 0 0 0 3px rgba(175, 40, 36, 0.15);
    border-color: #AF2824;
    background: #FFF9EC;
}
.form-control.country-modal-input.is-invalid,
.form-select.country-modal-input.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.form-control.country-modal-input:disabled,
.form-select.country-modal-input:disabled{
    background: #F1EEE2;
    border-color: #E4E1D3;
    color: #9C9A8E;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
}

.sd-photo-frame{
    border: 1px solid #E4E1D3;
    border-radius: 10px;
    padding: 24px 16px;
    background: #FFFDF6;
}

.country-modal-footer{
    border: none;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px 24px;
}

.modal-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* Save Button */
.btn.country-btn-save,
.btn.country-btn-save:hover {
    width: 150px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 14px;
    background: #323133;
    border: 1px solid #323133;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* Cancel Button */
.btn.country-btn-cancel,
.btn.country-btn-cancel:hover {
    width: 150px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #DF001B;
    color: #DF001B;
    font-size: 14px;
    font-weight: 500;
}

/* Mobile */
@media (max-width: 767.98px) {

    .modal-btn-group {
        gap: 12px;
        flex-wrap: nowrap;
    }

    .btn.country-btn-save,
    .btn.country-btn-cancel {
        width: calc(50% - 6px);
        max-width: 150px;
        min-width: 120px;
    }

}


/**LOGIN PAGE**/

.dashboard-wrapper-login{
    min-height: calc(100vh - 40px);
    border-radius: 24px;
    border: 1px solid #B8494E;
    box-sizing: border-box;
    background-image: url('../images/CBEC-login.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

#verify-section{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form-wrapper{
    width: 100%;
    max-width: 340px;
    margin: auto;
    padding: 20px;
}

/* Verify page only: wider wrapper so the heading fits on one line */
.verify-form-wrapper{
    max-width: 400px;
}

.verify-title{
    white-space: nowrap;
    font-size: 26px;
}

@media (max-width: 767.98px){

    .verify-form-wrapper{
        max-width: 420px;   /* back to the original mobile width */
    }

    .verify-title{
        white-space: normal;   /* allow wrapping to two lines again */
        font-size: 22px;
    }
}



.login-title{
    color: #ffffff;
    text-align: center;
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 40px;
}

.login-label{
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px;
}

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

.login-input-icon{
    position: absolute;
    left: 18px;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.login-input{
    width: 100%;
    height: 34px;
    border-radius: 30px;
    border: none;
    padding: 0 50px 0 48px;
    font-size: 14px;
    color: #151515;
    background: #ffffff;
    outline: none;
    box-shadow: none;
}

.login-input::placeholder{
    color: #9C9C9C;
}

.login-input:focus{
    outline: none !important;
    border: none !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4) !important;
}

.forgot-password-link{
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
}

.forgot-password-link:hover{
    color: #F7F0CB;
    text-decoration: underline;
}

.login-remember{
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
}

.login-remember .form-check-input{
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 4px;
    border: none;
}

.login-remember .form-check-input:checked{
    background-color: #151515;
    border-color: #151515;
}

.login-remember .form-check-label{
    color: #ffffff;
    font-size: 14px;
    margin-left: 4px;
}

.btn.login-btn{
    background: #151515;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 11px 32px;
    font-size: 14px;
    font-weight: 500;
    transition: .25s;
}

.btn.login-btn:hover{
    background: #000000;
    color: #ffffff;
}

@media (max-width: 767.98px){
    .login-title{
        font-size: 22px;
        margin-bottom: 28px;
    }

    #login_form .mb-3{
        margin-bottom: 28px !important;
    }
}


/* ==========================================
   Center Verification Result Page
========================================== */

.result-page-wrapper{
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;
}

#result-section{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

#result-section::-webkit-scrollbar{
    width: 6px;
}

#result-section::-webkit-scrollbar-thumb{
    background: #EFC5C2;
    border-radius: 6px;
}

.result-content-wrapper{
    width: 100%;
    max-width: 600px;
    margin: 20px auto 40px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-search-row{
    width: 100%;
    padding: 20px 40px 0;
    display: flex;
    justify-content: flex-end;
}

.result-search-input{
    background: #FFF9EC;
    border: 1px solid #e8d5a3;
    border-radius: 10px;
    font-size: 15px;
    padding: 10px 16px;
    color: #333;
    flex: 1;
    max-width: 340px;
}

.result-search-input:focus{
    outline: none;
    border-color: #AF2824;
    box-shadow: none;
}

.result-search-btn{
    background: #AF2824;
    color: #fff;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 28px;
    border: none;
    white-space: nowrap;
}

.result-search-btn:hover{
    background: #8e1f1c;
    color: #fff;
}

.result-search-box{
    display: flex;
    align-items: center;
    background: #FFF9EC;
    border-radius: 12px;
    padding: 10px 18px;
    gap: 10px;
    width: 300px;
}

.result-search-box input{
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    color: #333;
}

.result-search-box input::placeholder{
    color: #9C9C9C;
}

.result-search-box img{
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.6;
}

@media (max-width: 767.98px){
    .result-search-row{
        justify-content: center;
        padding: 16px 16px 0;
    }

    .result-search-box{
        width: 90%;
    }

    .result-content-wrapper{
        margin: 16px auto 40px;
    }
}



.result-section-title{
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin-top: 12px;
    margin-bottom: 10px;
}

.result-info-card{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.result-info-row{
    display: flex;
    align-items: center;
    background: #FFF9EC;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 14px;
}

.result-info-row .info-label{
    min-width: 130px;
    font-weight: 600;
    color: #151515;
}

.result-info-row .info-colon{
    width: 30px;
    text-align: center;
    color: #676A72;
}

.result-info-row .info-value{
    color: #151515;
}

.course-list{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.course-item{
    background: #FFF9EC;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 400;
    color: #151515;
}


@media (max-width: 767.98px){
    .result-search-box{
        position: static;
        margin: 16px auto 0;
        width: 75%;
        margin: 16px 0 0 auto;
    }

    .result-content-wrapper{

    }

    .result-info-row .info-label{
        min-width: 90px;
        font-size: 12px;
    }

    .result-info-row .info-value{
        font-size: 12px;
    }
}

/* ==========================================
   Certificate Verification Result Page
========================================== */

.certificate-result-wrapper{
    max-width: 720px;
}

.certificate-photo-wrapper{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.certificate-photo{
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #FFF9EC;
}

/* Wider label column for this page's longer field names */
.certificate-result-wrapper .result-info-row .info-label{
    min-width: 140px;
}

@media (max-width: 767.98px){
    .certificate-photo{
        width: 125px;
        height: 126px;
    }
}


/* ==========================================
   Password Toggle (Eye Icon)
========================================== */

.password-group{
    position: relative;
}

.password-group .login-input{
    padding-right: 52px;
}

.password-toggle{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.password-toggle:focus,
.password-toggle:active{
    outline: none;
    box-shadow: none;
}

.password-toggle img{
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: .9;
    transition: .2s ease;
}

.password-toggle:hover img{
    opacity: 1;
}

@media (max-width:767.98px){

    .password-toggle{
        right:16px;
    }

    .password-toggle img{
        width:18px;
        height:18px;
    }

}
/* Wallet transaction type badges */
.wallet-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}
.wallet-badge-credit {
    color: #1a9e5c;
    background: #e6f7ef;
    border: 1px solid #b2dfce;
}
.wallet-badge-debit {
    color: #B71C1C;
    background: #fce8f3;
    border: 1px solid #f5b8d8;
}

/* Center wallet amount badge */
.wallet-amount-badge {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 500;
    color: #222;
}

/* Student certificate status badges */
.student-status-badge {
    display: inline-flex;
    align-items: center;
    align-self: center;
    line-height: 1;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    background: #2e7d32;
    color: #ffffff;
    border: 1px solid #2e7d32;
}

.country-modal-subheader.sd-subheader-with-status{
    line-height: 1;
}
.country-modal-subheader.sd-subheader-with-status .student-status-badge::before {
    display: none;
}
.student-status-badge::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url('../icons/tick-square.png') no-repeat center/contain;
    -webkit-mask: url('../icons/tick-square.png') no-repeat center/contain;
    mask: url('../icons/tick-square.png') no-repeat center/contain;
    background-color: currentColor;
}

.student-status-badge.bg-success {
    background: #EAF7EF !important;
    color: #0A3D1A !important;
    border: 1px solid #BEE6CC;
}

/* On Hold */
.student-status-badge.bg-warning {
    background: #FEF6E6 !important;
    color: #5C4200 !important;
    border: 1px solid #F5E1AA;
}

/* On Progress */
.student-status-badge.bg-info {
    background: #E9F4FC !important;
    color: #073B66 !important;
    border: 1px solid #BBDDF3;
}

/* Applied */
.student-status-badge.bg-danger {
    background: #FCEAEA !important;
    color: #5C0F0A !important;
    border: 1px solid #F3BFBD;
}

/* Fix modal-dialog-scrollable when form wraps modal-body + modal-footer */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}
.modal-dialog-scrollable .modal-content > form .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Add Student: drag-and-drop file upload sections */
.upload-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: stretch;
}

.upload-dropzone {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    border: 1.5px dashed #D8B7B5;
    border-radius: 14px;
    background: #FEFBF2;
    padding: 24px 16px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.upload-dropzone.dragover {
    border-color: #AF2824;
    background: #FDF1EE;
}

.upload-dropzone-icon img {
    width: 22px;
    height: 22px;
}

.upload-dropzone-text {
    font-size: 14px;
    font-weight: 600;
    color: #151515;
}

.upload-dropzone-hint {
    font-size: 12px;
    color: #8A8A8A;
}

.upload-browse-btn {
    margin-top: 6px;
    background: #151515;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    padding: 8px 18px;
}

.upload-hidden-input {
    display: none;
}

.upload-preview-panel {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FEFBF2;
    border: 1px solid #EFE3C9;
    border-radius: 12px;
    padding: 10px 14px;
}

.upload-preview-item img.upload-preview-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.upload-preview-info {
    flex: 1;
    min-width: 0;
}

.upload-preview-name {
    font-size: 13px;
    font-weight: 500;
    color: #151515;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-preview-size {
    font-size: 12px;
    color: #8A8A8A;
    margin-left: 6px;
}

.upload-preview-bar {
    height: 4px;
    border-radius: 4px;
    background: #EFE3C9;
    margin-top: 6px;
    overflow: hidden;
}

.upload-preview-bar-fill {
    height: 100%;
    width: 100%;
    background: #151515;
}

.upload-preview-remove {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #8A8A8A;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

/* Student Detail modal: read-only Wallet Details rows */
.sd-wallet-readonly {
    border: 1px solid #EFE3C9;
    border-radius: 12px;
    overflow: hidden;
}

.sd-wallet-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #F2E6CF;
    font-size: 14px;
}

.sd-wallet-row:last-child {
    border-bottom: none;
}

.sd-wallet-label {
    flex: 0 0 150px;
    color: #676A72;
}

.sd-wallet-colon {
    color: #676A72;
}

.sd-wallet-value {
    color: #151515;
    font-weight: 500;
}

/* ==========================================================
   Searchable Status dropdown (Select2) — Student Update modal
   ========================================================== */

/* Collapsed trigger: match the modal's .country-modal-input look */
.sd-status-container.select2-container .select2-selection--single{
    height: 44px;
    background: #FFF9EC;
    border: 1px solid #BCBFC5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 14px;
}
.sd-status-container.select2-container--focus .select2-selection--single,
.sd-status-container.select2-container--open .select2-selection--single{
    border-color: #AF2824;
    box-shadow: 0 0 0 3px rgba(175, 40, 36, 0.15);
}
.sd-status-container .select2-selection--single .select2-selection__rendered{
    padding: 0;
    color: #151515;
    font-size: 14px;
    line-height: normal;
}
.sd-status-container .select2-selection--single .select2-selection__arrow{
    height: 42px;
    right: 10px;
}

/* Dropdown panel */
.sd-status-dropdown.select2-dropdown{
    border: 1px solid #E4E1D3;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    padding: 8px;
}

/* Search box on top — red border, rounded */
.sd-status-dropdown .select2-search--dropdown{
    padding: 4px 4px 8px;
}
.sd-status-dropdown .select2-search--dropdown .select2-search__field{
    border: 1.5px solid #E7B9B7;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(175, 40, 36, 0.12);
}
.sd-status-dropdown .select2-search--dropdown .select2-search__field:focus{
    border-color: #AF2824;
    box-shadow: 0 0 0 3px rgba(175, 40, 36, 0.18);
}

/* Options list */
.sd-status-dropdown .select2-results__option{
    padding: 12px 12px;
    font-size: 15px;
    color: #151515;
    border-radius: 6px;
}
.sd-status-dropdown .select2-results__option--highlighted[aria-selected]{
    background: #F5F5F5;
    color: #151515;
}
.sd-status-dropdown .select2-results__option[aria-selected=true]{
    background: #F5F5F5;
    font-weight: 700;
}