:root {
    --Color-Grey-Grey-300: #DCDDDE;
}

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

/* ==========================================
   Global AJAX loader overlay
========================================== */
#cbec-loader{
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(1px);
}

#cbec-loader.show{
    display: flex;
}

.cbec-loader-spinner{
    width: 48px;
    height: 48px;
    border: 4px solid rgba(175, 40, 36, 0.2);
    border-top-color: #AF2824;
    border-radius: 50%;
    animation: cbec-spin 0.7s linear infinite;
}

@keyframes cbec-spin{
    to{ transform: rotate(360deg); }
}

/* Small inline spinner — replaces the old ajax-loader.gif next to
   Save/Submit buttons across the app's modals and forms. */
.cbec-inline-spinner{
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border: 3px solid rgba(175, 40, 36, 0.2);
    border-top-color: #AF2824;
    border-radius: 50%;
    animation: cbec-spin 0.7s linear infinite;
}

/* Variant for dark buttons (e.g. the Login button) */
.cbec-inline-spinner.cbec-spinner-light{
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
}

/* ==========================================
   Browser autofill: kill the default blue overlay so filled
   inputs keep the app's own background/text colors
========================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 1000px #FFF9EC inset;
    box-shadow: 0 0 0 1000px #FFF9EC inset;
    -webkit-text-fill-color: #151515;
    caret-color: #151515;
    transition: background-color 5000s ease-in-out 0s;
}

.search-box input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
}

/* ==========================================
   Capitalize first letter of words in all dropdown data
========================================== */
select,
option,
select option,
.form-select,
.custom-select,
.perpage-select,
.per-page-selector select,
.wallet-filter-input,
.country-modal-input,
.select2-container,
.select2-dropdown,
.select2-results__option,
.select2-selection__rendered,
.select2-selection__choice,
.select2-search__field,
.dropdown-menu,
.dropdown-item,
.cbec-date-menu-item {
    text-transform: capitalize;
}

/* ==========================================
   Hide scrollbars app-wide (scrolling still works
   via wheel, trackpad, and touch)
========================================== */
*{
    scrollbar-width: none;   /* Firefox */
    -ms-overflow-style: none; /* old Edge/IE */
}

*::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;           /* Chrome/Safari/Edge */
}

.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-link{
    display: inline-flex;
}

.logo-container {
    width: fit-content;
    margin: 0 auto;
    padding: 12px 30px 14px;
    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 {
        /* !important: header logos carry inline height clamps for desktop */
        height: 42px !important;
        width: auto !important;
        object-fit: contain;
        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;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.card.dashboard-card > .row > .col-md-2::-webkit-scrollbar {
    display: block;
    width: 4px;
}
.card.dashboard-card > .row > .col-md-2::-webkit-scrollbar-track {
    background: transparent;
}
.card.dashboard-card > .row > .col-md-2::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
}

/* 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;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.card.dashboard-card > .row > .col-md-10::-webkit-scrollbar {
    display: block;
    width: 4px;
}
.card.dashboard-card > .row > .col-md-10::-webkit-scrollbar-track {
    background: transparent;
}
.card.dashboard-card > .row > .col-md-10::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
}

/* 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;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.table-area::-webkit-scrollbar {
    display: block;
    width: 4px;
}
.table-area::-webkit-scrollbar-track {
    background: transparent;
}
.table-area::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
}

.card.sidebar-card{
    background: #F7F0CB;
    border-radius: 16px;
    padding: 16px 12px;
    border: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}

.card.sidebar-card > .card-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    width: 100%;
    padding: 24px 0;
}

.sidebar-card .nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.sidebar-card .nav-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sidebar-card::-webkit-scrollbar {
    display: block;
    width: 4px;
}
.card.sidebar-card::-webkit-scrollbar-track {
    background: transparent;
}
.card.sidebar-card::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
}

/* 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;
    }

    /* :not(.d-none) keeps pages without a sidebar (login) burger-free */
    .btn.menu-toggle:not(.d-none) {
        display: flex !important;
    }
}

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

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

.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: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 12px 10px !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;
}

/* Current page's menu item */
.sidebar-card .nav-link.sidebar-active {
    background-color: rgba(175, 40, 36, 0.12);
}

.sidebar-card .nav-link.sidebar-active .sidebar-text {
    color: #AF2824;
}

#locationsDropdown .nav-link.sidebar-active .sidebar-text {
    color: #AF2824;
    font-weight: 700;
}


/* Mobile offcanvas menu */
.mobile-menu > a.sidebar-active {
    background-color: rgba(175, 40, 36, 0.12);
    border-radius: 12px;
}

.mobile-menu a.sidebar-active span,
.mobile-menu a.mobile-submenu-link.sidebar-active {
    color: #AF2824;
    font-weight: 700;
}

/* Dropdown indicator on menu items that expand a submenu (Locations).
   Bootstrap keeps aria-expanded in sync, so the caret flips when open. */
.sidebar-card a[data-bs-toggle="collapse"] .sidebar-text::after,
.mobile-menu a[data-bs-toggle="collapse"] span::after{
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    margin-bottom: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    vertical-align: middle;
}

.sidebar-card a[data-bs-toggle="collapse"][aria-expanded="true"] .sidebar-text::after,
.mobile-menu a[data-bs-toggle="collapse"][aria-expanded="true"] span::after{
    transform: rotate(225deg);
    margin-bottom: -2px;
}

/* Locations sub-menu */
#locationsDropdown {
    width: 100%;
}
#locationsDropdown .nav-link {
    padding: 6px 0 !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;
    /* dvh keeps the logout footer above mobile browser toolbars */
    height: 100vh;
    height: 100dvh;
    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;
    position: relative;
}

.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;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #F7F0CB;
    margin: 4px 0;
    border-radius: 14px;
    overflow-y: auto;
}

.mobile-profile {
    text-align: center;
    padding-top: 16px;
}

.mobile-profile-img {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #1a1a1a;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.mobile-profile h4 {
    margin-top: 0;
    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: flex-start;
    padding: 8px 20px 0;
}

.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;
}

/* Collapsed Locations still gets its separator line (the .collapse div
   that normally carries it is display:none while closed) */
.mobile-menu-dropdown-toggle:has(+ .mobile-locations-collapse:not(.show)){
    border-bottom: 1px solid rgba(0,0,0,.2) !important;
}

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

.mobile-locations-collapse{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fixed width + left alignment so the bullets and labels line up in a
   single column, centered as a group under Locations */
.mobile-locations-collapse .mobile-submenu-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 84px;
    gap: 8px;
    text-decoration: none;
    color: #4A4A4A;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
    border-bottom: none !important;
}

.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-item{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#locationsDropdown .nav-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 74px;
    text-align: left;
    padding: 6px 0 !important;
    gap: 8px;
}

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

#locationsDropdown .nav-link.sidebar-active::before{
    background: #AF2824;
}

.mobile-sidebar-footer{
    flex-shrink: 0;
    height: 54px;
    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);
}

/* Footer logout: 54px source rendered white for a crisp icon on the red bar
   (the old logout.png was 22px and blurred when upscaled) */
.logout-btn .logout-footer-icon{
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.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;
    white-space: nowrap;
}

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

/* Center/admin name is stored however the account was created (often
   all-lowercase) — capitalize each word for display without touching the
   underlying data. */
.profile-name {
    text-transform: capitalize;
}

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

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

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

    /* Label + number stack centered in the space right of the icon */
    .bg-stat-card-1 .sidebar-icon + div {
        flex: 1;
        text-align: center;
        min-width: 0;
    }

    /* Dashboard labels */
    .bg-stat-card-1 .sidebar-text {
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    /* Dashboard numbers */
    .bg-stat-card-1 .stat-number {
        font-size: clamp(15px, 5.5vw, 26px);
        font-weight: 600;
        line-height: 1;
    }

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

    .bg-stat-card-1.status .sidebar-text{
        font-size: 15px !important;
        font-weight: 500 !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;
}

/* Contrast fallback for uncolored status cards */
.status-card:not(.type-1):not(.type-2):not(.type-3):not(.type-4):not([style*="background"]) .status-card-title,
.status-card:not(.type-1):not(.type-2):not(.type-3):not(.type-4):not([style*="background"]) .stat-number {
    color: #1a2035;
}

.status-card:not(.type-1):not(.type-2):not(.type-3):not(.type-4):not([style*="background"]) .status-card-icon {
    filter: none;
}

.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 19%;
    max-width: 19%;
}

.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;
}

@media (max-width: 767.98px){
    .chart-title{
        font-size: 10px;
        font-weight: 600;
        margin-bottom: 0;
        align-self: center;
    }
}

.chart-filter{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    /* Match the chart plot area (320px canvas minus the x-label strip) so
       Month aligns with the top gridline and Day's bottom sits on the 0 line */
    height:210px;
}

.chart-btn{
    border:none;
    background:#323133;
    color:#fff;
    border-radius:20px;
    height:56px;
    transition:.3s;
    font-size:17px;
    font-weight:500;
}

.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;
        align-items:center;
        margin-bottom:0;
        gap: 8px;
        height: auto;
        justify-content: flex-start;
    }

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

    .chart-btn{
        height: 24px;
        padding: 0 12px;
        font-size: 10px;
        font-weight: 600;
        border-radius: 10px;
        line-height: 1;
    }
}

.chart-card{
    height: auto;
    min-height: 340px;
}

.donut-wrapper{
    width:180px;
    height:180px;
    margin:12px auto 2px;
}

@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: 20px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto;
    width: max-content;
    row-gap: 12px;
    column-gap: 60px;
}

.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: 13px;
    height: 13px;
    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-card{
    background: #FFFDEE;
    border-radius:18px;
    padding: 16px;
}

.table-toolbar{
    background: #FFFDEE;
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 12px;
}

@media (max-width: 767.98px){
    .table-toolbar{
        padding: 10px 12px;
    }
}

.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%;
        flex-wrap: nowrap;
    }

    /* flex:1 with auto width keeps the search box and Search button on one
       row (width:100% used to push the button onto its own line) */
    .search-box{
        width: auto !important;
        flex: 1;
        min-width: 0;
    }

    .btn.btn-search{
        flex-shrink: 0;
    }
}

.table-card{
    overflow:hidden;
}

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

.search-box{
    width:320px;
    height:46px;
    background:#FFFDEE;
    border:1px solid var(--Color-Grey-Grey-300, #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;
}

.search-clear-btn{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #AF2824;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.search-clear-btn:hover{
    background: transparent;
    color: #7A1B18;
}

.btn.btn-search{
    width:96px;
    height:46px;
    border-radius:14px;
    background:#FFFDEE;
    border:1px solid var(--Color-Grey-Grey-300, #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: #FFFDEE;
    color: #323133;
    border-color: var(--Color-Grey-Grey-300, #DCDDDE);
}

.btn.btn-add-country, .btn.btn-add-country:hover{
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 13px 16px;
    border-radius:14px;
    background:#323133;
    color:#fff;
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 767.98px){
    .search-box{
        height: 44px;
        border-radius: 16px;
        padding: 0 12px;
    }

    .btn.btn-search{
        height: 44px;
        border-radius: 16px;
        width: 104px;
        font-size: 15px;
    }

    .btn.btn-add-country, .btn.btn-add-country:hover{
        padding: 8px 14px;
        border-radius: 12px;
        font-size: 13px;
    }
}

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

@media (max-width: 767.98px){
    .btn.btn-add-country img{
        height: 18px; width: 18px;
    }
}

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

/* Title + Add Txns in one header row */
.wallet-toolbar-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.wallet-toolbar-header .table-title,
.wallet-toolbar-header .table-subtitle{
    margin-bottom: 0;
}

/* Filters row then search row */
.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;
}

@media (min-width: 768px){
    .wallet-toolbar-row .wallet-filter-group{
        margin-left: 0;
    }
}

@media (min-width: 768px){
    .wallet-toolbar-row{
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: 12px;
        column-gap: 12px;
    }

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

}

.wallet-filter{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFDEE;
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    border-radius: 14px;
    padding: 6px 16px;
    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,
.wallet-filter input,
.wallet-filter-range,
#studentFilterDateRange,
#filterDateRange {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
    cursor: pointer;
    padding-left: 4px;
}

.wallet-filter-input::placeholder,
.wallet-filter-input:-ms-input-placeholder,
.wallet-filter-input::-webkit-input-placeholder,
.wallet-filter input::placeholder,
.wallet-filter input::-webkit-input-placeholder {
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
    opacity: 1 !important;
}

.wallet-filter select.wallet-filter-input{
    min-width: 70px;
    text-align: left !important;
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
}

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

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

    /* Add Txns top, filters middle, search bottom */
    .wallet-addtxn-mobile{
        order: 0;
        width: auto;
        align-self: flex-end;
        margin-left: auto;
    }

    .wallet-toolbar-row .wallet-filter-group{
        order: 1;
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .wallet-filter-group .wallet-filter-clear{
        width: auto;
        order: 10;
    }

    /* When Clear is visible, break it onto its own row below the filters */
    .wallet-filter-group:has(.wallet-filter-clear:not(.d-none))::after{
        content: '';
        flex-basis: 100%;
        height: 0;
        order: 9;
    }

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

    .wallet-toolbar-row{
        row-gap: 8px;
    }

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

    /* Date range takes remaining space, Type fixed, Apply stays inline */
    .wallet-filter-group .wallet-filter:nth-child(1){
        flex: 1 1 0;
        min-width: 0;
    }

    .wallet-filter-group .wallet-filter:nth-child(2){
        flex: 0 0 auto;
    }

    .wallet-filter-group .wallet-filter-apply,
    .wallet-filter-group .wallet-filter-clear{
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .wallet-filter-range{
        min-width: 0;
        width: 100%;
    }

    .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: 140px;
    cursor: pointer;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0;
    height: auto;
}

/* ==========================================
   Date filter presets dropdown (Today / Yesterday / Last 7 Days / ...)
   Appended to <body> and positioned with fixed coordinates (see
   cbecDateFilterInit in script.js) so ancestors with overflow:auto/hidden
   (e.g. .wallet-toolbar-row's horizontal scroll on desktop) can't clip it.
========================================== */
.cbec-date-menu{
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    min-width: 190px;
    background: #FFFDEE;
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    border-radius: 12px;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12);
    padding: 6px;
}

.cbec-date-menu.show{
    display: flex;
}

.cbec-date-menu-item{
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #414651;
    cursor: pointer;
}

.cbec-date-menu-item:hover{
    background: #F5F5F5;
}

.cbec-date-menu-item.is-selected{
    background: #FFF0F0;
    color: #AF2824;
    font-weight: 600;
}

.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: #FDF3DE;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 24px;
    width: auto !important;
    padding: 16px;
    border: 1px solid #EEE3C8;
}

.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;
}

/* Center the calendar as a modal-like overlay on mobile instead of
   anchoring it below the date field. */
@media (max-width: 767.98px){
    .flatpickr-calendar.cbec-flatpickr{
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Single month on mobile: force the header to match the actual
       rendered width of the day grid below it, instead of relying on
       flatpickr's own JS-calculated width (which assumes default cell
       sizing and drifts out of sync with our custom cell dimensions). */
    .cbec-flatpickr .flatpickr-months,
    .cbec-flatpickr .flatpickr-month,
    .cbec-flatpickr .flatpickr-innerContainer,
    .cbec-flatpickr .flatpickr-rContainer,
    .cbec-flatpickr .flatpickr-days,
    .cbec-flatpickr .dayContainer{
        width: 100% !important;
        max-width: 100% !important;
    }

}

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

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

.cbec-flatpickr .flatpickr-current-month{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    padding: 0 48px;
    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: 17px;
    height: 17px;
    margin-right: 6px;
    vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center/contain;
}

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

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

/* Clickable month trigger wrapper */
.cbec-fp-month-trigger{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* Dropdown caret after the month name */
.cbec-fp-month-caret{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 2px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform .2s ease;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: 1px;
}

.cbec-fp-month-caret.open{
    transform: rotate(225deg);
}

/* Month picker panel (3×4 grid) */
.cbec-fp-month-panel{
    position: absolute;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    width: 248px;
    background: #fff;
    border: 1.5px solid #AF2824;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    z-index: 30;
}

.cbec-fp-month-panel .cbec-fp-month{
    padding: 8px 0;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #323133;
}

.cbec-fp-month-panel .cbec-fp-month:hover{
    background: #F6DAD8;
}

.cbec-fp-month-panel .cbec-fp-month.active{
    background: #AF2824;
    color: #fff;
}

/* Dropdown caret after the year, signaling it opens a year picker */
.cbec-fp-year-caret{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: -6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform .2s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.cbec-fp-year-caret.open{
    transform: rotate(225deg);
}

/* Year picker panel (opened by clicking the year in the header) */
.cbec-fp-year-panel{
    position: absolute;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    width: 248px;
    max-height: 224px;
    overflow-y: auto;
    background: #fff;
    border: 1.5px solid #AF2824;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    z-index: 30;
}

.cbec-fp-year-panel .cbec-fp-year{
    padding: 8px 0;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #323133;
}

.cbec-fp-year-panel .cbec-fp-year:hover{
    background: #F6DAD8;
}

.cbec-fp-year-panel .cbec-fp-year.active{
    background: #AF2824;
    color: #fff;
}

.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: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    border: none;
    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: 16px;
    height: 16px;
    fill: #fff;
    stroke: #fff;
    stroke-width: 2px;
}

.cbec-flatpickr .flatpickr-innerContainer{
    background: transparent !important;
    border-radius: 0;
    padding-bottom: 0;
}

.cbec-flatpickr .flatpickr-rContainer{
    display: flex;
    flex-direction: column;
}

.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;
    display: flex;
}

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

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

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

/* Overflow days (previous/next month filling the leading/trailing empty
   boxes) stay visible so the grid never looks like it has blank cells —
   just muted enough to read as "not part of this month". */
.cbec-flatpickr .flatpickr-day.prevMonthDay,
.cbec-flatpickr .flatpickr-day.nextMonthDay{
    color: #a9a397 !important;
    background: #fff;
    border-color: #fff;
    opacity: 1 !important;
    visibility: visible !important;
}

.cbec-flatpickr .flatpickr-day.flatpickr-disabled{
    color: #d8d5cd !important;
    background: #fff;
    border-color: #fff;
}

/* Every month pane always renders a full 6-row grid, so side-by-side
   months never end up mismatched in height. */
.cbec-flatpickr .dayContainer{
    min-height: 258px;
}

.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: none;
    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;
}

/* Thin red outline drawn around each month card (positioned by JS) */
.cbec-fp-card-outline{
    position: absolute;
    border: 1.5px solid #AF2824;
    border-radius: 12px;
    pointer-events: none;
    z-index: 5;
}

.cbec-flatpickr-actions{
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    padding: 14px 4px 4px;
    background: transparent;
    border-top: 1px solid #F0E6CB;
    margin-top: 12px;
}

.cbec-flatpickr-actions .cbec-fp-btn{
    height: 44px;
    padding: 0 34px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.cbec-flatpickr-actions .cbec-fp-cancel{
    background: #fff;
    color: #AF2824;
    border: 1.5px solid #AF2824;
}

.cbec-flatpickr-actions .cbec-fp-save{
    background: #2b2b2b;
    color: #fff;
}

.cbec-flatpickr-actions .cbec-fp-cancel:hover{ background: #FBEFEE; }
.cbec-flatpickr-actions .cbec-fp-save:hover{ background: #000; }

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

.btn.wallet-filter-clear,
.wallet-filter-clear,
#clearFilterBtn,
#studentClearFilterBtn {
    --bs-btn-color: #AF2824 !important;
    --bs-btn-border-color: #AF2824 !important;
    --bs-btn-bg: #ffffff !important;
    --bs-btn-hover-color: #AF2824 !important;
    --bs-btn-hover-border-color: #AF2824 !important;
    --bs-btn-hover-bg: #FBEFEE !important;
    height: 44px !important;
    border: 1.5px solid #AF2824 !important;
    border-color: #AF2824 !important;
    border-radius: 14px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #AF2824 !important;
}

.btn.wallet-filter-clear:hover,
.wallet-filter-clear:hover,
#clearFilterBtn:hover,
#studentClearFilterBtn:hover,
.btn.wallet-filter-clear:focus,
.wallet-filter-clear:focus,
#clearFilterBtn:focus,
#studentClearFilterBtn:focus,
.btn.wallet-filter-clear:active,
.wallet-filter-clear:active,
#clearFilterBtn:active,
#studentClearFilterBtn:active {
    background: #FBEFEE !important;
    background-color: #FBEFEE !important;
    color: #AF2824 !important;
    border-color: #AF2824 !important;
    box-shadow: none !important;
}


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

.table-subtitle{
    color: #676A72;
    font-size: 16px;
    font-weight: 400;
    margin-top: 0;
}

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

.table-responsive {
    overflow-x: auto !important;
    overflow-y: hidden;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin !important;
    scrollbar-color: #CCCCCC #F2F2F2 !important;
    padding-bottom: 8px;
}

.table-responsive::-webkit-scrollbar {
    display: block !important;
    height: 10px !important;
    width: 10px !important;
}

.table-responsive::-webkit-scrollbar-track {
    background: #F2F2F2 !important;
    border-radius: 6px !important;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #CCCCCC !important;
    border-radius: 6px !important;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #A8A8A8 !important;
}

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

@media (min-width: 768px) {
    .table.country-table {
        min-width: 1000px !important;
    }
    .table.students-table {
        min-width: 1100px !important;
    }
    .table.students-table th,
    .table.students-table td {
        white-space: nowrap;
    }
    .table.students-table thead th:nth-child(2),
    .table.students-table tbody td:nth-child(2) {
        width: 125px !important;
        max-width: 125px !important;
    }
    .table.students-table thead th:nth-child(3),
    .table.students-table tbody td:nth-child(3) {
        width: 140px !important;
        max-width: 140px !important;
    }
}

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

.table.country-table thead th {
    background: #AF2824;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border: none;
    padding: 16px 10px;
    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;
}

/* Highlight whichever column currently governs the sort order */
.table.country-table thead th:has(.th-sort.sort-active){
    background: #8E1F1B;
}

.th-sort.sort-active{
    font-weight: 700;
}

.th-sort.sort-active .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: #FFFDEE;
    padding: 18px 14px;
    vertical-align: middle;
    text-transform: capitalize;
    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;
}

/* Single-line ellipsis truncation for free-text table cells.
   Full text is available via the cell's title attribute on hover. */
.cell-truncate-1{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Truncate all non-action tbody cells */
.table.country-table tbody td:not(:last-child) {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px){
    .table.country-table {
        border-spacing: 0 8px;
    }

    .table.country-table tbody td:last-child {
        border-radius: 12px;
        padding: 0;
        padding-top: 6px;
    }

    .table.country-table thead th {
        padding: 12px;
        font-size: 13px;
    }

    .table.country-table tbody td {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Keep the # column narrow like the design */
    .table.country-table thead th:first-child,
    .table.country-table tbody tr:not(.mobile-details) td:first-child {
        width: 44px;
        min-width: 44px;
        text-align: center;
    }

    /* Visible divider between # and Name (the desktop divider color is
       too faint to see on mobile's white rows) */
    .table.country-table tbody tr:not(.mobile-details) td:first-child {
        border-right: 2px solid #EDE7D8;
    }

    /* Second divider: separates the expand-button area from the name.
       Button is pinned to the row's right edge with a full-height line
       drawn just before it. */
    .table.country-table tbody tr:not(.mobile-details) td:nth-child(2){
        position: relative;
        padding-right: 56px;
        /* Force the Name column to fit the remaining screen width so long
           names wrap instead of stretching the row past the viewport */
        width: 100%;
        max-width: 0;
    }

    .table.country-table tbody tr:not(.mobile-details) td:nth-child(2)::after{
        content: '';
        position: absolute;
        right: 52px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #EDE7D8;
    }

    .table.country-table tbody tr:not(.mobile-details) .name-cell .row-expand-btn{
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Single-line ellipsis truncation, same as desktop. Full text is
       still reachable via the row-expand chevron's detail panel. */
    .name-cell > span:first-child{
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Only # + Name are visible and Name is capped to the remaining width,
       so the table always fits — disable sideways scrolling so the #
       column can't be swiped off-screen */
    .table-responsive{
        overflow-x: hidden;
    }
}

/*======================================
    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
       (columns: 1 #, 2 Name, 3 Certificate No, 4 Course, 5 Center,
       6 Amt Charged, 7 Created, 8 Status, 9 Actions — 3/4/5 already
       hidden by the shared .country-table rule above) */
    .table.students-table thead th:nth-child(6),
    .table.students-table thead th:nth-child(7),
    .table.students-table thead th:nth-child(8),
    .table.students-table thead th:nth-child(9),
    .table.students-table tbody tr:not(.mobile-details) td:nth-child(6),
    .table.students-table tbody tr:not(.mobile-details) td:nth-child(7),
    .table.students-table tbody tr:not(.mobile-details) td:nth-child(8),
    .table.students-table tbody tr:not(.mobile-details) td:nth-child(9){
        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:#FFFDEE;
        border-radius:12px;
        padding:12px 14px;
        margin-top:-6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .detail-row{
        display:flex;
        justify-content:flex-start;
        align-items:center;
        gap: 12px;
        padding:8px 0;
        border-bottom:1px solid #F2E6CF;
        font-size:13px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

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

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

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

    /* Plain text values only — excludes badge spans (wallet-amount-badge,
       student-status-badge, etc.) which need to stay inline-flex, not block. */
    .detail-row > span:last-child:not([class]){
        flex: 1 1 0%;
        width: 0;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        text-transform: capitalize;
    }

    .detail-row > span.wallet-amount-badge:last-child,
    .detail-row > span.student-status-badge:last-child{
        flex: 0 0 auto;
        max-width: 100%;
    }

    /* 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%;
    min-width: 0;
}

/* Single-line ellipsis truncation at every breakpoint, split into two
   media-scoped rules (mobile version lives further up the file) rather
   than one unconditional rule, so neither can lose a same-specificity
   source-order tie-break against the other. */
@media (min-width: 768px){
    .name-cell > span:first-child{
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

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

.row-expand-btn:hover{
    background: #F0C4C4;
}

.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;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        border: 3px solid #E4B4B4;
        background: #F6DCDC;
    }

    .table.country-table .row-expand-btn img{
        width: 16px;
        height: 16px;
    }

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

.collapse-table-link{
    display: block;
    margin-top: 10px;
    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,
.per-page-selector select{
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    border-radius: 8px;
    padding: 6px 30px 6px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #151515;
    background: #FFFDEE;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

/* ==========================================
   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 30px 6px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #151515;
    background: #fff;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

#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 24px 4px 8px;
        font-size: 12px;
        background-position: right 6px center;
        background-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;
    /* Positioned so overflow:hidden actually clips absolutely-positioned
       children (Select2 dropdowns parented to this card) — keeps them
       visually inside the rounded card instead of spilling past its edge. */
    position: relative;
}

/* Inside a scrollable modal, keep header + body + footer within the card:
   the inner wrapper sits between .modal-content and the body, breaking
   Bootstrap's flex chain — without this the body's max-height (70vh) plus
   header/footer can exceed the modal height and push the footer buttons
   past the card's bottom edge. The flex chain lets the body shrink and
   scroll while the footer stays visible. */
.modal-dialog-scrollable .country-modal-inner{
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}
.modal-dialog-scrollable .country-modal-inner > form{
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.modal-dialog-scrollable .country-modal-inner .country-modal-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.modal-dialog-scrollable .country-modal-inner .modal-header,
.modal-dialog-scrollable .country-modal-inner .modal-footer{
    flex-shrink: 0;
}

/* ==========================================
   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:30px;
    height:30px;
    object-fit:contain;
}

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

.country-modal-close{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:none;
    background:transparent;
    border-radius:6px;
    cursor:pointer;
    transition:background-color .25s ease, opacity .25s ease;
}

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

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

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

/* Subheaders rendered INSIDE a modal body (e.g. Student Detail's
   "Course Status" / "Wallet Details") already sit within the body's
   24px padding — cancel that padding with a negative margin so the bar
   bleeds edge-to-edge across the full card width instead of just
   matching the (narrower) field rows above/below it. */
.country-modal-body .country-modal-subheader{
    margin-left: -12px;
    margin-right: -12px;
    border-radius: 8px;
}

/* Subheader inside a .form-area (which has 12px side padding) — pull back
   to full width so the header bar stretches edge-to-edge */
.form-area .country-modal-subheader{
    margin-left: -12px;
    margin-right: -12px;
}

.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: row;
        align-items: center;
        justify-content: space-between;
        white-space: normal;
        gap: 8px;
        padding: 12px 16px;
    }

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

.modal-body.country-modal-body{
    padding: 16px 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;
}

/* Auto-append a red asterisk to any label immediately followed by a
   required field — works app-wide, no per-field markup needed beyond
   the `required` attribute itself. Covers the common "label, then
   input/select/textarea" and "label, then wrapper div containing the
   field" layouts used throughout this app's forms. */
.country-modal-label:has(+ input[required])::after,
.country-modal-label:has(+ select[required])::after,
.country-modal-label:has(+ textarea[required])::after,
.country-modal-label:has(+ div input[required])::after,
.form-label:has(+ input[required])::after,
.form-label:has(+ select[required])::after,
.form-label:has(+ textarea[required])::after,
.form-label:has(+ div input[required])::after{
    content: ' *';
    color: #C7000B;
}

.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;
}

input.form-control.country-modal-input,
.form-select.country-modal-input{
    height: 44px;
}

.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);
}

/* Select2 hides the underlying <select>/<input> (is-invalid gets applied
   there by JS, same as plain fields), so the red border has to be painted
   on the visible sibling it renders instead. */
.form-select.country-modal-input.is-invalid + .select2-container .select2-selection,
.form-control.country-modal-input.is-invalid + .select2-container .select2-selection {
    border-color: #dc3545 !important;
    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;
}

/* Select2 inside location modals (State / District country + state dropdowns) */
.location-select2.select2-container{
    width: 100% !important;
}
.location-select2.select2-container .select2-selection--single{
    height: 44px;
    background: #FFF9EC;
    border: 1px solid #BCBFC5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 14px;
}
.location-select2.select2-container--focus .select2-selection--single,
.location-select2.select2-container--open .select2-selection--single{
    border-color: #AF2824;
    box-shadow: 0 0 0 3px rgba(175, 40, 36, 0.15);
    outline: none;
}
.location-select2.select2-container .select2-selection--single .select2-selection__rendered{
    color: #151515;
    font-size: 14px;
    line-height: normal;
    padding: 0 22px 0 0;
}
.location-select2.select2-container .select2-selection--single .select2-selection__placeholder{
    color: #393B40;
}
.location-select2.select2-container .select2-selection--single .select2-selection__arrow{
    top: 0;
    height: 100%;
    right: 10px;
    width: 20px;
}
.location-select2.select2-container .select2-selection--single .select2-selection__arrow b{
    border-color: #393B40 transparent transparent transparent;
    border-width: 5px 4px 0 4px;
    top: 50%;
    margin-top: -2px;
}
.location-select2.select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color: transparent transparent #393B40 transparent;
    border-width: 0 4px 5px 4px;
}
.location-select2-dropdown.select2-dropdown{
    background: #FFFDEE;
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    overflow: hidden;
}
.location-select2-dropdown .select2-search--dropdown{
    padding: 8px;
    border-bottom: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
}
.location-select2-dropdown.select2-dropdown .select2-search--dropdown .select2-search__field{
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    background: #FFFDEE;
    outline: none;
}
.location-select2-dropdown.select2-dropdown .select2-search--dropdown .select2-search__field:focus{
    border-color: #AF2824;
    box-shadow: 0 0 0 2px rgba(175,40,36,0.15);
}
/* Extra .select2-results ancestor raises specificity above Select2's own
   default (.select2-container--default .select2-results>.select2-results__options),
   so this wins regardless of stylesheet load order. Kept short so the whole
   dropdown (search box + list) fits inside the modal card even when the
   field sits low in the card. */
.location-select2-dropdown.select2-dropdown .select2-results .select2-results__options{
    max-height: 150px;
    overflow-y: auto;
}
.location-select2-dropdown .select2-results__option{
    font-size: 14px;
    padding: 8px 14px;
    color: #151515;
}
.location-select2-dropdown.select2-dropdown .select2-results__option--highlighted[aria-selected]{
    background: #AF2824;
    color: #fff;
}
.location-select2-dropdown.select2-dropdown .select2-results__option[aria-selected=true]{
    background: #FFF0F0;
    color: #AF2824;
}
/* Clear (×) button */
.location-select2 .select2-selection__clear{
    margin-right: 6px;
    color: #9C9A8E;
    font-size: 16px;
    line-height: 1;
}

.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 {
    width: 150px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 14px;
    background: #ffffff;
    border: 1.5px solid #AF2824;
    color: #AF2824;
    font-size: 14px;
    font-weight: 500;
}

.btn.country-btn-cancel:hover {
    background: #FBEFEE;
    color: #AF2824;
    border-color: #AF2824;
}

/* 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: 520px;
}

.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: 600;
    margin-bottom: 40px;
}

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

/* Login error messages: white pill so they read clearly on the red card */
.login-box-msg{
    margin: 0 0 12px;
}

.login-box-msg:not(:empty){
    background: #fff;
    color: #AF2824 !important;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.login-box-msg p{
    margin: 0;
}

.password-toggle-btn{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 4px;
    display: flex;
    align-items: center;
    color: #9a9a9a;
    cursor: pointer;
    z-index: 2;
}

.password-toggle-btn:hover{
    color: #151515;
}

/* Keep typed text clear of the toggle button */
.login-input-group input#pass{
    padding-right: 48px;
}

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

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

.login-input{
    width: 100%;
    height: 54px;
    border-radius: 30px;
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    padding: 0 50px 0 52px;
    font-size: 14px;
    color: #151515;
    background: #FFFDEE;
    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;
}


.form-check.login-remember{
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    margin-bottom: 0;
    min-height: 0;
}

/* Extra .form-check in the selector out-specifies Bootstrap's
   `.form-check .form-check-input` (float + negative margin-left),
   which loads after this sheet and was knocking the box out of line */
.login-remember.form-check .form-check-input{
    width: 18px;
    height: 18px;
    margin: 0;
    float: none;
    flex-shrink: 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: 0;
}

.btn.login-btn{
    background: #151515;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 14px 38px;
    font-size: 14px;
    font-weight: 600;
    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;
    }
}

.login-page-logo{
    height: clamp(40px, 3.8vw, 72px);
    width: auto;
    object-fit: contain;
    cursor: pointer;
}

@media (min-width: 768px){
    .login-form-wrapper{
        max-width: 480px;
    }

    .login-input{
        height: 46px;
    }
}


/* ==========================================
   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: #FFFDEE;
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    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: #FFFDEE;
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    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: flex-start;
    background: #FFF9EC;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 14px;
}

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

.result-info-row .info-colon{
    width: 30px;
    flex-shrink: 0;
    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;
}

.course-item-hidden{
    display: none;
}

.course-item-hidden.course-item-visible{
    display: block;
}

.course-view-more-btn{
    align-self: flex-start;
    margin-top: 6px;
    border: none;
    background: none;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
}

.course-view-more-btn:hover{
    color: #FFF9EC;
}


@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;
    }
}


/* 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.is-invalid {
    border-color: #dc3545;
    border-style: solid;
    background: #FDECEE;
}

.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;
}

/* Student edit modal: dropzone and preview panel take equal halves */
.sd-upload-row .upload-dropzone,
.sd-upload-row .upload-preview-panel{
    flex: 1 1 0;
    min-width: 0;
}

/* Mobile: stack — dropzone on top, current file full-width below */
@media (max-width: 767.98px){
    .sd-upload-row{
        flex-direction: column;
    }

    .sd-upload-row .upload-dropzone,
    .sd-upload-row .upload-preview-panel{
        flex: 1 1 auto;
        width: 100%;
    }

    .sd-upload-row .sd-current-file{
        width: 100%;
    }

    .sd-upload-row .sd-current-file-img,
    .sd-upload-row .sd-current-file-frame,
    .sd-upload-row .sd-current-file-doc{
        width: 100%;
        max-width: 100%;
        height: 200px;
    }
}

.sd-upload-row .sd-current-file-img,
.sd-upload-row .sd-current-file-frame,
.sd-upload-row .sd-current-file-doc{
    max-width: 100%;
}

/* Greyed-out dropzone while the student isn't editable (status not
   Applied/On Hold) — visible per design, but not interactive */
.upload-dropzone.upload-dropzone-disabled{
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

/* Student edit modal: existing file shown as a large framed preview with a
   caption underneath (dropzone left / current file right) */
.sd-current-panel{
    justify-content: flex-start;
}

.sd-current-file{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.sd-current-file-img{
    width: 100%;
    max-width: 320px;
    height: 170px;
    object-fit: cover;
    background: #fff;
    border: 1px solid #EFE3C9;
    border-radius: 4px;
    padding: 4px;
    display: block;
}

/* Inline PDF preview inside the same frame as image previews */
.sd-current-file-frame{
    width: 100%;
    max-width: 320px;
    height: 170px;
    background: #fff;
    border: 1px solid #EFE3C9;
    border-radius: 4px;
    display: block;
}

.sd-current-file-doc{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    min-height: 90px;
    background: #fff;
    border: 1px solid #EFE3C9;
    border-radius: 4px;
    padding: 12px 16px;
    color: #151515;
    font-size: 13px;
    text-decoration: none;
    word-break: break-all;
}

.sd-current-file-doc:hover{
    border-color: #AF2824;
    color: #AF2824;
}

.sd-current-file-caption{
    font-size: 12px;
    color: #676A72;
    display: flex;
    align-items: center;
    gap: 6px;
}

.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 */
/* Type filter (student list toolbar): Select2 trigger styled to blend
   into the existing .wallet-filter pill */
/* Select2's width:'element' option sets an inline width on THIS element
   (the outer .select2-container) sized off the original hidden <select> —
   without a matching min-width here, .select2-selection--single below
   overflows past this narrower box and the arrow (right:0 against the
   wider inner box) renders outside/behind the next filter pill. */
.type-filter-container.select2-container{
    min-width: 110px;
}
.type-filter-container.select2-container .select2-selection--single{
    height: 30px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    min-width: 110px;
}
.type-filter-container .select2-selection--single .select2-selection__rendered{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 22px 0 0;
    color: #151515 !important;
    font-size: 14px;
    line-height: normal;
}
/* Select2 prepends the clear "x" inside .select2-selection__rendered ahead
   of the text (float:right doesn't apply once the parent is flex) — the
   gap above keeps it from touching the label; this just neutralizes the
   float so it stays put as a normal flex item instead of drifting. */
.type-filter-container .select2-selection--single .select2-selection__clear{
    position: static;
    float: none;
    margin: 0;
}
.type-filter-container .select2-selection--single .select2-selection__arrow{
    top: 0;
    height: 100%;
    right: 0;
}
.type-filter-container.select2-container--focus .select2-selection--single,
.type-filter-container.select2-container--open .select2-selection--single{
    outline: none;
    box-shadow: none;
}

.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;
}

/* The Code (phone country code) select2 is initialized with width:'100%'
   while its modal is still display:none — Select2 can't measure the real
   (narrow, col-md-1) column at that point, so it bakes in an inline width
   copied from a wider ancestor instead. Override with !important so the
   container always matches its actual grid column. Covers both the Add
   Student modal (#country) and the Edit Student modal (#sd_country). */
#country + .select2-container.sd-status-container,
#sd_country + .select2-container.sd-status-container{
    width: 100% !important;
    min-width: 84px;
}

/* Email + Code + Phone stay on one row via a plain nowrap flex container
   instead of Bootstrap's percentage-based columns. A percentage column
   (col-md-1) can't reliably fit Code's select2 box (it has a fixed
   min-width — see above) at typical modal widths: too narrow a column
   either overflows into Phone, or forces the whole row to wrap, neither
   of which is "all three in one row." Fixed flex-basis on Code plus
   flex-grow on Email/Phone (roughly matching their old 5:6 ratio) fits
   reliably regardless of container width; only true phone-sized viewports
   fall back to stacking. */
.email-code-phone-row{
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.email-code-phone-email{
    flex: 5 1 0%;
    min-width: 0;
}
.email-code-phone-phone{
    flex: 6 1 0%;
    min-width: 0;
}
.country-code-col{
    flex: 0 0 110px;
    min-width: 110px;
}
.email-code-phone-email .mb-3,
.email-code-phone-phone .mb-3{
    margin-bottom: 0;
}

@media (max-width: 575.98px){
    .email-code-phone-row{
        flex-direction: column;
    }
    .email-code-phone-email,
    .email-code-phone-phone,
    .country-code-col{
        flex: 1 1 auto;
        width: 100%;
    }
}
.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 22px 0 0;
    color: #151515;
    font-size: 14px;
    line-height: normal;
}
.sd-status-container .select2-selection--single .select2-selection__arrow{
    top: 0;
    height: 100%;
    right: 10px;
}

/* Multi-select variant (e.g. Add Center's "Select Courses") — stays a
   single compact row like the single-select, with selected items as chips
   that wrap onto additional lines only once chosen. */
.sd-status-container.select2-container .select2-selection--multiple{
    position: relative;
    min-height: 44px;
    background: #FFF9EC;
    border: 1px solid #BCBFC5;
    border-radius: 6px;
    padding: 5px 10px;
}

.sd-status-container.select2-container--focus .select2-selection--multiple,
.sd-status-container.select2-container--open .select2-selection--multiple{
    border-color: #AF2824;
    box-shadow: 0 0 0 3px rgba(175, 40, 36, 0.15);
}

.sd-status-container .select2-selection--multiple .select2-selection__rendered{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
}

.sd-status-container .select2-selection--multiple .select2-search__field{
    margin-top: 0;
    color: #151515;
    font-size: 14px;
}

.sd-status-container .select2-selection--multiple .select2-selection__choice{
    background: #F6DAD8;
    border: 1px solid #EFC5C2;
    border-radius: 6px;
    color: #AF2824;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 8px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sd-status-container .select2-selection--multiple .select2-selection__choice__remove{
    color: #AF2824;
    border: none;
    margin: 0;
    font-weight: 700;
}

.sd-status-container .select2-selection--multiple .select2-selection__choice__remove:hover{
    color: #151515;
    background: transparent;
}

/* Dropdown panel */
.sd-status-dropdown.select2-dropdown{
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    padding: 8px;
    z-index: 1056 !important;
    min-width: 100px !important;
    background: #FFFDEE;
}

/* 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: 1px solid var(--Color-Grey-Grey-300, #DCDDDE);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    background: #FFFDEE;
    box-shadow: none;
}
.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 — fixed row height + scroll instead of stretching to
   whatever space Select2 calculates, which produced huge gaps between
   options when only a few existed in a tall dropdown */
.sd-status-dropdown .select2-results__options{
    max-height: 220px;
    overflow-y: auto;
}
.sd-status-dropdown .select2-results__option{
    padding: 10px 12px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #151515;
    border-radius: 6px;
    background: #FFFDEE;
}
.sd-status-dropdown .select2-results__option--highlighted[aria-selected]{
    background: #F8E3E3 !important;
    color: #151515 !important;
}
.sd-status-dropdown .select2-results__option[aria-selected=true]{
    background: #F6DAD8 !important;
    color: #AF2824 !important;
    font-weight: 700;
}

/* Global Select2 dropdown defaults */
.select2-dropdown {
    background-color: #FFFDEE !important;
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE) !important;
}
.select2-dropdown .select2-search--dropdown .select2-search__field {
    background-color: #FFFDEE !important;
    border: 1px solid var(--Color-Grey-Grey-300, #DCDDDE) !important;
}
.select2-dropdown .select2-results__option {
    background-color: #FFFDEE;
}
select option {
    background-color: #FFFDEE !important;
    color: #151515;
}

/* Dropdown arrow indicator for multi-select fields (Select2 only draws one
   for single-select by default) */
.sd-status-container.select2-container .select2-selection--multiple{
    padding-right: 34px;
}
.sd-status-container .select2-selection--multiple::after{
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #676A72;
    border-bottom: 2px solid #676A72;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    transition: transform .15s;
}
.sd-status-container.select2-container--open .select2-selection--multiple::after{
    transform: translateY(-30%) rotate(-135deg);
}

/* Disabled state for sd-status Select2 dropdowns */
.sd-status-container.select2-container--disabled .select2-selection--single,
.sd-status-container.select2-container--disabled .select2-selection--multiple{
    background: #F1EEE2 !important;
    border-color: #E4E1D3 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
.sd-status-container.select2-container--disabled .select2-selection__rendered{
    color: #9C9A8E !important;
}
.sd-status-container.select2-container--disabled .select2-selection__arrow b{
    border-color: #9C9A8E transparent transparent !important;
}
/* Disabled plain inputs inside the status form */
#sdStatusForm input:disabled{
    background: #F1EEE2 !important;
    border-color: #E4E1D3 !important;
    color: #9C9A8E !important;
    opacity: 1;
    cursor: not-allowed;
}

/* ==========================================================
   Standard toast notifications (showToast() in script.js)
   ========================================================== */
#cbec-toast-container{
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
}

.cbec-toast{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    font-size: 15px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    min-width: 320px;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.25s, transform 0.25s;
}

.cbec-toast.cbec-toast-show{
    opacity: 1;
    transform: translateX(0);
}

.cbec-toast-success{
    background: #EAF7EE;
    color: #1E8E3E;
    border: 1.5px solid #1E8E3E;
}

.cbec-toast-error{
    background: #FFF0EF;
    color: #AF2824;
    border: 1.5px solid #AF2824;
}

.cbec-toast-icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 1px;
}

.cbec-toast-msg{
    flex: 1;
    line-height: 1.4;
    word-break: break-word;
}

.cbec-toast-close{
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.cbec-toast-close:hover{
    opacity: 1;
}

@media (max-width: 767.98px){
    #cbec-toast-container{
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }

    .cbec-toast{
        min-width: 0;
    }
}

@media (max-width: 767px) {
.table-1 input,  .table-1 select {
   font-size: 16px;
}
}