/* ===================== Cards (unified) ===================== */

/* Bootstrap ships hardcoded #0d6efd custom properties on these classes;
   re-point them at the active theme so buttons/dropdowns/pills/pagination
   follow the chosen primary color. */
.btn-primary{
    --bs-btn-color:#fff;
    --bs-btn-bg:var(--bs-primary);
    --bs-btn-border-color:var(--bs-primary);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:var(--bs-primary-hover);
    --bs-btn-hover-border-color:var(--bs-primary-hover);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:var(--bs-primary-active);
    --bs-btn-active-border-color:var(--bs-primary-active);
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:var(--bs-primary);
    --bs-btn-disabled-border-color:var(--bs-primary);
    --bs-btn-focus-shadow-rgb:var(--bs-primary-rgb);
}

.btn-outline-primary{
    --bs-btn-color:var(--bs-primary);
    --bs-btn-border-color:var(--bs-primary);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:var(--bs-primary);
    --bs-btn-hover-border-color:var(--bs-primary);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:var(--bs-primary);
    --bs-btn-active-border-color:var(--bs-primary);
    --bs-btn-disabled-color:var(--bs-primary);
    --bs-btn-disabled-border-color:var(--bs-primary);
    --bs-btn-focus-shadow-rgb:var(--bs-primary-rgb);
}

.nav-pills{
    --bs-nav-pills-link-active-color:#fff;
    --bs-nav-pills-link-active-bg:var(--bs-primary);
}

.pagination{
    --bs-pagination-active-color:#fff;
    --bs-pagination-active-bg:var(--bs-primary);
    --bs-pagination-active-border-color:var(--bs-primary);
    --bs-pagination-focus-color:var(--bs-primary);
    --bs-pagination-focus-box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
    --bs-pagination-hover-color:var(--bs-primary);
}

/* Pagination stays centered on every page, for every user. */
.d-flex.justify-content-between:has(nav .pagination){ justify-content:center; }

.dropdown-menu{
    --bs-dropdown-link-active-color:#fff;
    --bs-dropdown-link-active-bg:var(--bs-primary);
}

.list-group{
    --bs-list-group-active-color:#fff;
    --bs-list-group-active-bg:var(--bs-primary);
    --bs-list-group-active-border-color:var(--bs-primary);
}

/* Form controls: focus border follows the active theme primary */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.input-group:focus-within .form-control{
    border-color:var(--bs-primary);
    box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.form-check-input:checked{
    background-color:var(--bs-primary);
    border-color:var(--bs-primary);
}

.form-range::-webkit-slider-thumb{
    background-color:var(--bs-primary);
}

.form-range::-moz-range-thumb{
    background-color:var(--bs-primary);
}

.btn-primary:focus-visible,
.btn-outline-primary:focus-visible,
.btn-link:focus-visible{
    box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.admin-card,
.dash-card,
.info-card,
.stat-box,
.filter-card{
background:var(--white);
border-radius:14px;
box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.admin-card{ padding:24px; }
.dash-card{ padding:24px; }
.info-card{ padding:22px; }
.stat-box{ padding:18px; height:100%; }
.stat-box .num{ font-size:26px; font-weight:800; }
.stat-box .lab{ font-size:12.5px; color:#666; }
.filter-card{ padding:18px; margin-bottom:18px; }

@media(max-width:768px){
.admin-card{ padding:16px; border-radius:12px; }
.dash-card{ padding:16px; border-radius:12px; }
.info-card{ padding:16px; border-radius:12px; }
}

/* Definition list rows inside profile cards */
.profile-dl dt{ font-size:13px; color:#666; font-weight:500; }
.profile-dl dd{ font-size:13.5px; color:#222; margin-bottom:6px; }

/* Stat cards */
.stat-card{
background:var(--white);
border-radius:14px;
padding:22px;
box-shadow:0 2px 12px rgba(0,0,0,.05);
height:100%;
}

@media(max-width:768px){
.stat-card{
    padding:16px;
    border-radius:12px;
}
.stat-card .icon{
    width:38px;
    height:38px;
    font-size:17px;
    margin-bottom:10px;
}
.stat-card .num{
    font-size:22px;
}
.stat-card .label{
    font-size:12.5px;
}
}

.stat-card .icon{
width:46px;
height:46px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
margin-bottom:14px;
}

/* ===================== Drag rows (visual reorder) ===================== */

.drag-handle{
cursor:grab;
opacity:.5;
color:var(--bs-primary);
user-select:none;
font-size:22px;
line-height:1;
padding:0 2px;
vertical-align:middle;
}
.drag-handle:hover{opacity:.9;}
.drag-handle:active{cursor:grabbing;opacity:.9;}
#assignmentTable tbody tr,
#coursesTable tbody tr,
#certificatesTable tbody tr,
#institutesTable tbody tr,
#subjectsTable tbody tr,
#archiveTable tbody tr,
#trainingCertificatesTable tbody tr,
#studentsTable tbody tr,
#requestsTable tbody tr,
#courseMasterTable tbody tr,
#curriculaTable tbody tr,
#institutesBinTable tbody tr,
#examsTable tbody tr,
#resultsTable tbody tr,
#appointmentsTable tbody tr,
#queueTable tbody tr{transition:background-color .12s ease, transform .28s cubic-bezier(.2,.85,.35,1);}
#assignmentTable tbody tr.dragging td,
#coursesTable tbody tr.dragging td,
#certificatesTable tbody tr.dragging td,
#institutesTable tbody tr.dragging td,
#subjectsTable tbody tr.dragging td,
#archiveTable tbody tr.dragging td,
#trainingCertificatesTable tbody tr.dragging td,
#studentsTable tbody tr.dragging td,
#requestsTable tbody tr.dragging td,
#courseMasterTable tbody tr.dragging td,
#curriculaTable tbody tr.dragging td,
#institutesBinTable tbody tr.dragging td,
#examsTable tbody tr.dragging td,
#resultsTable tbody tr.dragging td,
#appointmentsTable tbody tr.dragging td,
#queueTable tbody tr.dragging td{
background:#fff;
position:relative;
z-index:10;
transform:translateY(-4px) scale(1.1);
box-shadow:0 8px 16px rgba(13,110,253,.16), 0 3px 6px rgba(0,0,0,.12);
transition:transform .22s cubic-bezier(.2,.85,.35,1), box-shadow .22s ease;
color:#000;
}
#assignmentTable tbody tr.dragging td a,
#assignmentTable tbody tr.dragging td .text-muted,
#coursesTable tbody tr.dragging td a,
#coursesTable tbody tr.dragging td .text-muted,
#certificatesTable tbody tr.dragging td a,
#certificatesTable tbody tr.dragging td .text-muted,
#institutesTable tbody tr.dragging td a,
#institutesTable tbody tr.dragging td .text-muted,
#subjectsTable tbody tr.dragging td a,
#subjectsTable tbody tr.dragging td .text-muted,
#archiveTable tbody tr.dragging td a,
#archiveTable tbody tr.dragging td .text-muted,
#trainingCertificatesTable tbody tr.dragging td a,
#trainingCertificatesTable tbody tr.dragging td .text-muted,
#studentsTable tbody tr.dragging td a,
#studentsTable tbody tr.dragging td .text-muted,
#requestsTable tbody tr.dragging td a,
#requestsTable tbody tr.dragging td .text-muted,
#courseMasterTable tbody tr.dragging td a,
#courseMasterTable tbody tr.dragging td .text-muted,
#curriculaTable tbody tr.dragging td a,
#curriculaTable tbody tr.dragging td .text-muted,
#institutesBinTable tbody tr.dragging td a,
#institutesBinTable tbody tr.dragging td .text-muted,
#examsTable tbody tr.dragging td a,
#examsTable tbody tr.dragging td .text-muted,
#resultsTable tbody tr.dragging td a,
#resultsTable tbody tr.dragging td .text-muted,
#appointmentsTable tbody tr.dragging td a,
#appointmentsTable tbody tr.dragging td .text-muted,
#queueTable tbody tr.dragging td a,
#queueTable tbody tr.dragging td .text-muted{color:#000!important;}
#assignmentTable tbody tr.dragging td:first-child,
#coursesTable tbody tr.dragging td:first-child,
#certificatesTable tbody tr.dragging td:first-child,
#institutesTable tbody tr.dragging td:first-child,
#subjectsTable tbody tr.dragging td:first-child,
#archiveTable tbody tr.dragging td:first-child,
#trainingCertificatesTable tbody tr.dragging td:first-child,
#studentsTable tbody tr.dragging td:first-child,
#requestsTable tbody tr.dragging td:first-child,
#courseMasterTable tbody tr.dragging td:first-child,
#curriculaTable tbody tr.dragging td:first-child,
#institutesBinTable tbody tr.dragging td:first-child,
#examsTable tbody tr.dragging td:first-child,
#resultsTable tbody tr.dragging td:first-child,
#appointmentsTable tbody tr.dragging td:first-child,
#queueTable tbody tr.dragging td:first-child{
border-radius:12px 0 0 12px;
border-left:4px solid var(--bs-primary);
}
#assignmentTable tbody tr.dragging td:last-child,
#coursesTable tbody tr.dragging td:last-child,
#certificatesTable tbody tr.dragging td:last-child,
#institutesTable tbody tr.dragging td:last-child,
#subjectsTable tbody tr.dragging td:last-child,
#archiveTable tbody tr.dragging td:last-child,
#trainingCertificatesTable tbody tr.dragging td:last-child,
#studentsTable tbody tr.dragging td:last-child,
#requestsTable tbody tr.dragging td:last-child,
#courseMasterTable tbody tr.dragging td:last-child,
#curriculaTable tbody tr.dragging td:last-child,
#institutesBinTable tbody tr.dragging td:last-child,
#examsTable tbody tr.dragging td:last-child,
#resultsTable tbody tr.dragging td:last-child,
#appointmentsTable tbody tr.dragging td:last-child,
#queueTable tbody tr.dragging td:last-child{border-radius:0 12px 12px 0;}
#medical-queue-list tr.dragging td{background:#fff;position:relative;z-index:10;transform:translateY(-4px) scale(1.02);box-shadow:0 28px 56px rgba(13,110,253,.24), 0 14px 28px rgba(0,0,0,.18);transition:transform .22s cubic-bezier(.2,.85,.35,1), box-shadow .22s ease;color:#000;}
#medical-queue-list tr.dragging td a,#medical-queue-list tr.dragging td .text-muted{color:#000!important;}
#medical-queue-list tr.dragging td:first-child{border-radius:12px 0 0 12px;border-left:4px solid var(--bs-primary);}
#medical-queue-list tr.dragging td:last-child{border-radius:0 12px 12px 0;}
#appointmentsTable tbody tr.dragging,#medical-queue-list tr.dragging{filter:drop-shadow(0 6px 8px rgba(13,110,253,.20)) drop-shadow(0 2px 4px rgba(0,0,0,.14));}

.stat-card .num{
font-size:28px;
font-weight:800;
color:var(--dark);
}

.stat-card .label{
font-size:13.5px;
color:#666;
}

.stat-card .stat-sub{
font-size:12px;
color:#8a97a5;
margin-top:2px;
}

.stat-card a{
text-decoration:none;
display:block;
}

.stat-card a:hover .num{ color:var(--primary); }

.stat-card .go{
display:inline-flex;
align-items:center;
gap:4px;
font-size:12px;
font-weight:600;
color:var(--primary);
opacity:0;
transition:opacity .1s ease;
}

.stat-card:hover .go{ opacity:1; }

.stat-card.stat-clickable{
transition:transform .15s ease, box-shadow .15s ease;
}
a:hover > .stat-card.stat-clickable{
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(0,0,0,.10);
}
a:active > .stat-card.stat-clickable{ transform:translateY(-1px); }

/* Borderless cards (edit / profile forms) */
.card{
border:none;
border-radius:14px;
box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.card .card-header{
background:var(--white);
border-radius:14px 14px 0 0 !important;
border-bottom:1px solid #eee;
font-weight:700;
}

/* ===================== Page header ===================== */

.page-header{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:20px;
}

.page-header .page-header-title{
font-size:20px;
font-weight:700;
color:var(--dark);
margin:0 0 2px;
}

.page-header .page-header-desc{
font-size:13.5px;
color:var(--muted);
margin:0;
}

.page-header .page-header-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}

@media(max-width:768px){
.page-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}
.page-header .page-header-title{
    font-size:17px;
}
.page-header > .d-flex:last-child{
    flex-wrap:wrap;
    gap:8px;
    width:100%;
}
.page-header > .d-flex:last-child > .dropdown{
    flex:1 1 auto;
    min-width:0;
}
.page-header > .d-flex:last-child > .dropdown > .btn{
    width:100%;
    justify-content:flex-start;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
}

.industry-filter .industry-filter-label,
.country-filter .country-filter-label{
max-width:180px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

@media(max-width:768px){
.industry-filter .industry-filter-label,
.country-filter .country-filter-label,
.sub-industry-filter .sub-industry-filter-label{
    max-width:120px;
}
}

.country-flag{
border-radius:2px;
object-fit:cover;
box-shadow:0 0 0 1px rgba(0,0,0,.08);
vertical-align:-2px;
}

.phone-country-btn{
max-width:150px;
min-width:118px;
white-space:nowrap;
border-start-end-radius:0;
border-end-end-radius:0;
}
.phone-country-menu{
width:280px;
padding:0;
}
.phone-country-search-wrap{
position:relative;
padding:8px 10px;
}
.phone-country-search-wrap .bi-search{
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
color:var(--muted);
font-size:13px;
}
.phone-country-search{
width:100%;
border:1px solid var(--border);
border-radius:6px;
padding:6px 10px 6px 30px;
font-size:13px;
background:var(--white);
color:var(--dark);
outline:none;
}
.phone-country-list{
max-height:260px;
overflow-y:auto;
}
.phone-country-list .dropdown-item{
display:flex;
align-items:center;
padding-left:12px;
}
.phone-country-list .dropdown-item:hover{
background:var(--light);
}
html.monetix-dark .phone-country-search{
background:#1f2733;
color:#eef2f6;
border-color:#2c3645;
}
html.monetix-dark .phone-country-list .dropdown-item:hover{
background:#232c39;
}

.country-dropdown{
width:260px;
padding:0;
}
.country-dropdown .dropdown-divider{
margin:.25rem 0;
}
.country-dropdown .dropdown-item-country-search{
padding:8px 10px;
}
.country-dropdown .country-search-input{
width:100%;
border:1px solid var(--border);
border-radius:6px;
padding:6px 10px 6px 30px;
font-size:13px;
background:var(--white);
color:var(--dark);
outline:none;
}
.country-dropdown .dropdown-item-country-search{
position:relative;
}
.country-dropdown .dropdown-item-country-search .bi-search{
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
color:var(--muted);
font-size:13px;
}
.country-dropdown .country-dropdown-list{
list-style:none;
margin:0;
padding:0;
max-height:300px;
overflow-y:auto;
}
.country-dropdown .country-dropdown-list .dropdown-item{
padding-left:12px;
}
.country-dropdown .country-dropdown-list .dropdown-item:hover{
background:var(--light);
}
html.monetix-dark .country-dropdown .country-search-input{
background:#1f2733;
color:#eef2f6;
border-color:#2c3645;
}
html.monetix-dark .country-dropdown .country-dropdown-list .dropdown-item:hover{
background:#232c39;
}

.page-header-flip .page-header-actions{ order:2; }
.page-header-flip .page-header-text{ order:1; }

@media(min-width:992px){
.page-header-flip .page-header-text{ order:2; }
.page-header-flip .page-header-actions{ order:1; }
}

/* ===================== Pills (scope / filter) ===================== */

.scope-pill,
.filter-pill{
border:1px solid #dfe3e8;
border-radius:30px;
padding:6px 16px;
font-size:13px;
font-weight:600;
color:#555;
text-decoration:none;
background:var(--white);
display:inline-flex;
align-items:center;
gap:6px;
}

.scope-pill.active,
.filter-pill.active{
background:var(--primary);
border-color:var(--primary);
color:#fff;
}

/* ===================== Filter grid ===================== */

.filter-layout{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.filter-search-row{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.filter-search{
position:relative;
flex:1 1 260px;
min-width:220px;
}

@media(max-width:768px){
.filter-search{
    flex:1 1 100%;
    min-width:0;
}
.filter-actions{
    flex-wrap:wrap;
}
}

.filter-search > i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted, #6c757d);
    font-size:15px;
    pointer-events:none;
}

.filter-search .form-control{
    padding-left:38px;
}

.filter-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.filter-card .filter-row{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

@media(min-width:768px){
    .filter-card .filter-row{ grid-template-columns:repeat(2,1fr); }
}

@media(min-width:1200px){
    .filter-card .filter-row{ grid-template-columns:repeat(3,1fr); }
}

.filter-card .filter-row .filter-span{ grid-column:span 1; }

/* ===================== Table toolbar ===================== */

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

.table-toolbar .toolbar-info{
font-size:13px;
color:var(--muted);
display:flex;
align-items:center;
gap:6px;
}

.table-toolbar .toolbar-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}

@media(max-width:768px){
.table-toolbar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}
.table-toolbar .toolbar-info{
    font-size:12.5px;
}
}

/* ===================== Tables ===================== */

table th{
font-size:12.5px;
text-transform:uppercase;
letter-spacing:.03em;
color:#888;
border-bottom:2px solid #eee;
white-space:nowrap;
}

table td{
vertical-align:middle;
font-size:14px;
}

/* ===================== Shared bits ===================== */

.badge-soft{ font-weight:600; }

.inst-dropdown{
position:relative;
}
.inst-dropdown .inst-caret{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
pointer-events:none;
color:var(--muted);
font-size:12px;
}
.inst-dropdown .form-control{
padding-right:26px;
}
.inst-list{
display:none;
position:absolute;
z-index:1050;
top:100%;
left:0;
right:0;
margin:2px 0 0;
    padding:4px;
    list-style:none;
    max-height:220px;
overflow:auto;
background:var(--white);
border:1px solid var(--border);
border-radius:8px;
box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
}
.inst-list.open{ display:block; }
.inst-item{
padding:.4rem .6rem;
cursor:pointer;
font-size:.875rem;
border-radius:6px;
color:var(--dark);
}
.inst-item:hover{ background:var(--light); }
.inst-item.active{ background:var(--primary); color:#fff; }
html.monetix-dark .inst-list{
background:#1a1d27;
border-color:#2a2f3a;
}
html.monetix-dark .inst-item:hover{ background:#262b35; }
html.monetix-dark .inst-item.active{ background:var(--primary); color:#fff; }

.col-check{
width:40px;
}

.btn-icon{
padding:.25rem .45rem;
line-height:1;
}
.btn-icon i{
font-size:1rem;
}

.col-toggle-menu{
width:220px;
}
.col-toggle-menu .dropdown-item{
display:flex;
align-items:center;
padding:.45rem .75rem;
}
.col-toggle-menu .dropdown-item:hover{
background:var(--light);
}
html.monetix-dark .col-toggle-menu .dropdown-item:hover{
background:#232c39;
}

.inst-logo{
width:42px;
height:42px;
object-fit:cover;
border-radius:8px;
background:#eee;
}

.course-thumb-sm{
width:56px;
height:42px;
object-fit:cover;
border-radius:6px;
background:#eee;
}

.img-preview{
width:64px;
height:64px;
object-fit:cover;
border-radius:10px;
border:1px solid #e3e6ea;
background:#f8f9fa;
}
html.monetix-dark .img-preview,
html.monetix-dark .cover-preview,
html.monetix-dark .course-thumb-sm{
background:#262b35;
border-color:#2a2f3a;
}

.cover-preview{
width:180px;
height:90px;
object-fit:cover;
border-radius:10px;
border:1px solid #e3e6ea;
background:#f8f9fa;
}

.form-label{ font-size:13px; font-weight:600; color:#555; }

.table-row-click{ transition:background-color .12s ease; cursor:pointer; }
.table-row-click:hover{ background-color:#f1f5ff; }
.table-row-click td{ padding-top:12px; padding-bottom:12px; }

#assignmentTable td{ padding-top:4px; padding-bottom:4px; }

.lang-option{
border:1.5px solid #e2e6ea;
border-radius:12px;
padding:18px 20px;
cursor:pointer;
transition:all .15s ease;
}

.lang-option:hover{ border-color:#c6d4f0; background:#f8faff; }
.lang-option.selected{ border-color:var(--primary); background:#eef4ff; }
.lang-option .lang-name{ font-weight:700; font-size:16px; }
.lang-option .lang-tag{ font-size:12px; color:#888; }

/* ===================== Theme picker ===================== */

.theme-option{
display:flex;
flex-direction:column;
gap:10px;
border:1.5px solid #e2e6ea;
border-radius:12px;
padding:12px;
cursor:pointer;
transition:all .15s ease;
position:relative;
}

.theme-option input{ position:absolute; opacity:0; pointer-events:none; }

.theme-option:hover{ border-color:#c6d4f0; background:#f8faff; }

.theme-option.selected{
border-color:var(--primary);
background:#eef4ff;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.theme-swatch{
display:flex;
overflow:hidden;
border-radius:8px;
height:34px;
border:1px solid #e6e8ec;
}

.theme-swatch .swatch-primary{ flex:1 1 60%; }

.theme-swatch .swatch-secondary{ flex:1 1 40%; }

.theme-option .theme-name{ font-size:13px; font-weight:600; color:#333; text-align:center; padding-right:18px; }

.theme-option .theme-check{ position:absolute; top:10px; right:10px; color:var(--primary); font-size:16px; }

.form-check-input{ cursor:pointer; }

/* ===================== Header avatar ===================== */

.avatar-wrap{
position:relative;
display:inline-block;
line-height:0;
}

.avatar-circle{
width:53px;
height:53px;
border-radius:50%;
object-fit:cover;
border:2px solid var(--border);
background:var(--white);
}

.role-badge{
font-size:0.6em;
font-weight:500;
padding:0.25em 0.5em;
}

.avatar-initials{
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:16px;
color:#fff;
background:var(--primary);
}

.avatar-wrap .avatar-status-dot{
position:absolute;
right:-1px;
bottom:-1px;
width:14px;
height:14px;
border-radius:50%;
border:2px solid var(--white);
}

/* ===================== Connectivity signal at the avatar corner =====================
   Replaces the static green presence dot: pins the signal's box at the avatar's
   bottom-right so its CENTER lands on the 44px circular image's edge � the circle
   cuts through the dot's middle (was :right/bottom:-1px, floated outside it).
   Ripple rings overflow the box but stay clipped by the sidebar. */

.avatar-wrap .cs-root.cs-avatar-corner{
    position:absolute;
    right:1px;
    bottom:1px;
}

.avatar-status-dot.is-active{ background:#198754; }
.avatar-status-dot.is-inactive{ background:#dc3545; }

/* ===================== Sidebar user card status dot pulse ===================== */

.sidebar-user-card .avatar-status-dot.is-active{
    animation:user-dot-online 2.2s ease-in-out infinite;
}
@keyframes user-dot-online{
    0%,100%{ box-shadow:0 0 0 0 rgba(25,135,84,.45), 0 0 4px rgba(25,135,84,.5); }
    50%{ box-shadow:0 0 0 6px rgba(25,135,84,.18), 0 0 12px rgba(25,135,84,.7); }
}

/* ===================== Internet connection indicator (avatar status dot) ===================== */

.avatar-wrap .avatar-status-dot{
transition:background .3s ease, box-shadow .3s ease;
}

.avatar-wrap.conn-online .avatar-status-dot{
background:#198754 !important;
box-shadow:none;
}

.avatar-wrap.conn-reconnecting .avatar-status-dot{
background:#198754 !important;
box-shadow:none;
}

.avatar-wrap.conn-offline .avatar-status-dot{
background:#dc3545 !important;
animation:conn-dot-pulse 2s ease-in-out infinite;
}
@keyframes conn-dot-pulse{
0%,100%{ box-shadow:0 0 0 0 rgba(220,53,69,.35), 0 0 4px rgba(220,53,69,.45); }
50%{ box-shadow:0 0 0 5px rgba(220,53,69,.18), 0 0 10px rgba(220,53,69,.6); }
}

.avatar-wrap .conn-ripple{
position:absolute;
right:-1px;
bottom:-1px;
width:14px;
height:14px;
border-radius:50%;
border:2px solid transparent;
pointer-events:none;
opacity:0;
}
.avatar-wrap.conn-offline .conn-ripple,
.avatar-wrap.conn-reconnecting .conn-ripple{
animation:conn-ripple 2.1s ease-out infinite;
}
.avatar-wrap.conn-offline .conn-ripple{ border-color:rgba(220,53,69,.85); }
.avatar-wrap.conn-reconnecting .conn-ripple{ border-color:rgba(25,135,84,.85); }
@keyframes conn-ripple{
0%{ transform:scale(1); opacity:.75; }
100%{ transform:scale(4.2); opacity:0; }
}
/* ===================== Manual dark mode (topbar toggle) ===================== */

html.monetix-dark{
--dark:#eef1f6; --light:#12141a; --white:#1a1d27; --border:#2a2f3a; --muted:#8ba0b8;
--text:#eef1f6; --surface:#151820; --surface-alt:#262b35;
--bs-body-bg:#11141b; --bs-body-color:#d7dde6;
--bs-secondary-color:#8ba0b8; --bs-secondary-color-rgb:139,160,184;
--bs-border-color:#2a2f3a; --bs-border-color-rgb:42,47,58;
--bs-card-bg:#1a1d27; --bs-card-color:#d7dde6; --bs-card-border-color:#2a2f3a;
--bs-table-bg:#171a22; --bs-table-color:#d7dde6; --bs-table-hover-bg:#1f2330;
--bs-table-striped-bg:#1a1e28; --bs-table-border-color:#262b36;
--bs-form-color:#d7dde6; --bs-form-bg:#151820;
--bs-dropdown-bg:#1a1d27; --bs-dropdown-color:#d7dde6; --bs-dropdown-border-color:#2a2f3a;
--bs-modal-bg:#1a1d27; --bs-modal-border-color:#2a2f3a; --bs-modal-footer-bg:#1a1d27;
--bs-accordion-bg:#1a1d27; --bs-accordion-border-color:#2a2f3a; --bs-accordion-color:#d7dde6;
--bs-pagination-bg:#1a1d27; --bs-pagination-border-color:#2a2f3a; --bs-pagination-color:#9db8e6;
--bs-pagination-hover-bg:#222634; --bs-pagination-hover-color:#fff; --bs-pagination-hover-border-color:#37415c;
}
html.monetix-dark body{ background:#11141b; color:#d7dde6; }
html.monetix-dark .topbar{ background:#1a1d27; border-bottom-color:#2a2f3a; }
html.monetix-dark .topbar .icon-btn,
html.monetix-dark .notification-trigger{ background:#1a1d27; border-color:#2a2f3a; color:#aab4c4; }
html.monetix-dark .notification-menu-header{ color:#eef1f6; }
html.monetix-dark .notification-item{ color:#c9d1dc; }
html.monetix-dark .notification-item:hover{ background:#22262f; color:#fff; }
html.monetix-dark .notification-item .notification-item-title{ color:#eef1f6; }
html.monetix-dark .notification-item .notification-item-msg{ color:#9aa8bc; }
html.monetix-dark .notification-item .notification-item-time{ color:#7f8ea3; }
html.monetix-dark .notification-empty{ color:#8ba0b8; }
html.monetix-dark .sidebar{ --sidebar-bg:#171a22 !important; background:#171a22 !important; border-right-color:#262b35; }
  html.monetix-dark .sidebar .nav-link{ color:#aab4c4; }
  html.monetix-dark .sidebar .nav-link.active{ background:rgba(96,165,250,.10); color:var(--primary); border-left-color:var(--primary); }
  html.monetix-dark .sidebar .nav-link:not(.disabled):hover{ background:rgba(96,165,250,.10); color:var(--primary); border-left-color:var(--primary); }
  html.monetix-dark .sidebar .nav-link.sub{ color:#8ba0b8; }
  html.monetix-dark .sidebar .nav-link.sub:not(.disabled):hover{ background:rgba(96,165,250,.10); color:var(--primary); border-left-color:var(--primary); }
  html.monetix-dark .sidebar .nav-link.sub.active{ background:rgba(96,165,250,.10); color:var(--primary); border-left-color:var(--primary); }
  html.monetix-dark .sidebar .nav-link.sub-sub{ color:#8ba0b8; }
  html.monetix-dark .sidebar .nav-link.sub-sub:not(.disabled):hover{ background:rgba(96,165,250,.10); color:var(--primary); border-left-color:var(--primary); }
  html.monetix-dark .sidebar .nav-link.sub-sub.active{ background:rgba(96,165,250,.10); color:var(--primary); border-left-color:var(--primary); }
html.monetix-dark .sidebar .nav-link.disabled{ color:#555a66; }
html.monetix-dark .sidebar .soon-badge{ background:#262b35; color:#8ba0b8; }
html.monetix-dark .sidebar-user-card{ background:#171a22; border-color:#262b35; box-shadow:none; }
html.monetix-dark .sidebar-user-card .sidebar-user-name{ color:#eef1f6; }
html.monetix-dark .sidebar-user-card .sidebar-user-caret{ color:#8ba0b8; }
html.monetix-dark .sidebar-user-card .badge.bg-light{ background:#262b35 !important; color:#c4ccd8 !important; border-color:#2a2f3a !important; }
html.monetix-dark .sidebar-user-card .badge.bg-info-subtle{ background:rgba(13,188,240,.15) !important; color:#7dd3fc !important; border-color:rgba(13,188,240,.35) !important; }
html.monetix-dark .admin-card,
html.monetix-dark .dash-card,
html.monetix-dark .filter-card,
html.monetix-dark .stat-card,
html.monetix-dark .stat-box,
html.monetix-dark .card,
html.monetix-dark .info-card{ background:#1a1d27; box-shadow:0 2px 12px rgba(0,0,0,.35); }
html.monetix-dark .card .card-header{ background:#1a1d24; border-bottom-color:#2a2f3a; }
html.monetix-dark .page-header .page-header-title{ color:#f2f5f8; }
html.monetix-dark .page-header .page-header-desc{ color:#8ba0b8; }
html.monetix-dark .profile-dl dt{ color:#8ba0b8; }
html.monetix-dark .profile-dl dd{ color:#eef1f6; }
html.monetix-dark .stat-card .num{ color:#f2f5f8; }
html.monetix-dark .stat-card .label{ color:#8ba0b8; }
html.monetix-dark .stat-card .icon{ background:rgba(96,165,250,.14); }
html.monetix-dark table{ color:#d7dde6; }
html.monetix-dark table th{ color:#8ba0b8; border-bottom-color:#2a2f3a; }
html.monetix-dark .form-label{ color:#c4ccd8; }
html.monetix-dark .avatar-circle{ border-color:#2a2f3a; background:#1a1d27; }
html.monetix-dark .border.rounded-3,
html.monetix-dark .border.rounded-3.bg-light-subtle{ background:#151820 !important; border-color:#2a2f3a !important; }
html.monetix-dark .badge.bg-light{ background:#262b35 !important; color:#c4ccd8 !important; border-color:#2a2f3a !important; }
html.monetix-dark .bg-white{ background:#1a1d27 !important; }
html.monetix-dark img.bg-white,
html.monetix-dark .img-fluid.bg-white{ background:#fff !important; }
html.monetix-dark code{ background:#262b35; color:#9db8e6; }
html.monetix-dark hr{ border-color:#2a2f3a; opacity:1; }
html.monetix-dark .text-primary{ color:#60a5fa !important; }
html.monetix-dark .field label{ color:#c4ccd8; }
html.monetix-dark .hint,
html.monetix-dark .field .form-text{ color:#8ba0b8; }
html.monetix-dark .student-id-photo{ border-color:#2a2f3a; background:#171a22; }
html.monetix-dark .student-id-photo-placeholder{ background:#171a22; border-color:#37415c; color:#6b7a90; }

/* ===================== Passport-size ID photo (student profile) ===================== */

.student-id-photo{
width:145px;
aspect-ratio:7 / 9;
height:auto;
object-fit:cover;
object-position:top;
border-radius:12px;
border:1px solid #dee2e6;
box-shadow:0 2px 8px rgba(0,0,0,.08);
background:#f8f9fa;
}

.student-id-photo-placeholder{
display:inline-flex;
align-items:center;
justify-content:center;
color:#adb5bd;
font-size:2.5rem;
border:1px dashed #adb5bd;
background:#f8f9fa;
}

/* ===================== Photo crop modal (js/photo-crop.js) ===================== */

.crop-stage{
position:relative;
width:min(320px,100%);
aspect-ratio:7 / 9;
margin:0 auto;
overflow:hidden;
border-radius:10px;
background:#111;
touch-action:none;
cursor:grab;
user-select:none;
}

.crop-stage.dragging{ cursor:grabbing; }

.crop-stage .crop-img{
position:absolute;
left:0;
top:0;
max-width:none;
max-height:none;
will-change:transform;
-webkit-user-drag:none;
}

.crop-stage .crop-frame{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
box-shadow:0 0 0 9999px rgba(0,0,0,.55);
border:2px solid #fff;
border-radius:10px;
}

.crop-controls{
display:flex;
align-items:center;
gap:.5rem;
width:100%;
}

.crop-controls .form-range{ min-width:0; }

/* ===================== Large editable modal (student profile edit) ===================== */

#editStudentModal .modal-dialog{
max-width:1140px;
transition:none;
}
#editStudentModal.monetix-maximized .modal-dialog{
width:calc(100vw - 2rem) !important;
max-width:calc(100vw - 2rem) !important;
height:calc(100vh - 2rem);
max-height:calc(100vh - 2rem);
margin:1rem auto;
}
#editStudentModal .modal-body{
max-height:calc(100vh - 220px);
overflow-y:auto;
overscroll-behavior:contain;
}
#editStudentModal.monetix-maximized .modal-body{
max-height:calc(100vh - 200px);
}
#editStudentModal .monetix-resize-handle{
position:absolute;
right:4px;
bottom:4px;
width:18px;
height:18px;
cursor:nwse-resize;
z-index:10;
background:linear-gradient(135deg, transparent 50%, rgba(13,110,253,.65) 50%, rgba(13,110,253,.65) 57%, transparent 57%);
border-radius:0 0 6px 0;
touch-action:none;
}
@media (max-width:767.98px){
#editStudentModal .modal-dialog{
max-width:calc(100vw - 1.5rem);
margin:.75rem auto;
}
#editStudentModal .modal-body{
max-height:calc(100vh - 180px);
}
#editStudentModal.monetix-maximized .modal-dialog{
width:calc(100vw - 1rem) !important;
max-width:calc(100vw - 1rem) !important;
height:calc(100vh - 1rem);
max-height:calc(100vh - 1rem);
margin:.5rem auto;
}
}
html.monetix-dark .scope-pill,
html.monetix-dark .filter-pill{ border-color:#2a2f3a; color:#cfd6e0; background:#1a1d27; }

/* ===================== Dashboard nav-tabs responsive ===================== */
@media(max-width:768px){
.nav-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
}
.nav-tabs::-webkit-scrollbar{
    display:none;
}
.nav-tabs .nav-item{
    flex:0 0 auto;
}
.nav-tabs .nav-link{
    font-size:13px;
    padding:8px 14px;
    white-space:nowrap;
}
}

/* ===================== Notification bell + dropdown ===================== */

.notification-trigger{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:50%;
background:var(--white);
border:1px solid var(--border);
color:#555;
font-size:17px;
cursor:pointer;
transition:background .15s ease, color .15s ease;
}
.notification-trigger:hover{
background:rgba(13,110,253,.08);
color:var(--primary);
}
.notification-trigger .bell-dot{
position:absolute;
top:3px;
right:2px;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:10px;
background:#dc3545;
color:#fff;
font-size:10px;
font-weight:700;
line-height:16px;
text-align:center;
display:none;
}
.notification-trigger .bell-dot.show{ display:block; }

.notification-menu{
width:360px;
max-width:calc(100vw - 32px);
padding:0;
border:1px solid var(--border);
box-shadow:0 12px 32px rgba(0,0,0,.14);
}
.notification-menu-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 16px;
border-bottom:1px solid var(--border);
font-weight:700;
font-size:14px;
}
.notification-menu-footer{
display:block;
text-align:center;
padding:10px;
font-weight:600;
font-size:13px;
color:var(--primary);
border-top:1px solid var(--border);
text-decoration:none;
}
.notification-menu-footer:hover{ background:rgba(13,110,253,.06); color:var(--primary); }
.notification-list{ max-height:340px; overflow-y:auto; }
.notification-item{
display:block;
padding:11px 16px;
border-bottom:1px solid var(--border);
text-decoration:none;
color:#444;
position:relative;
}
.notification-item:hover{ background:var(--light); color:#333; }
.notification-item.unread{ background:rgba(13,110,253,.05); }
.notification-item.unread .notification-item-title{ font-weight:700; }
.notification-item .notification-item-title{
font-size:13.5px;
font-weight:600;
color:#222;
padding-right:14px;
}
.notification-item.unread .notification-item-title::before{
content:"";
position:absolute;
top:17px;
right:14px;
width:8px;
height:8px;
border-radius:50%;
background:var(--primary);
}
.notification-item .notification-item-msg{
font-size:12.5px;
color:#666;
margin-top:2px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.notification-item .notification-item-time{
font-size:11px;
color:#999;
margin-top:4px;
}
.notification-empty{
padding:32px 16px;
text-align:center;
color:#999;
font-size:13px;
}
.notification-mark-all{
background:none;
border:none;
color:var(--primary);
font-size:12px;
font-weight:600;
padding:0;
cursor:pointer;
}
.notification-mark-all:hover{ text-decoration:underline; }

.notifications-center .notif-filters .btn{
border-color:var(--border);
color:#555;
}
.notifications-center .notif-filters .btn.active{
background:rgba(13,110,253,.08);
color:var(--primary);
border-color:rgba(13,110,253,.35);
}

/* ---- AI Assistant chat ---- */
.ai-chat-card{ display:flex; flex-direction:column; height:calc(100vh - 210px); min-height:420px; padding:0; overflow:hidden; }
.ai-chat-body{ flex:1; overflow-y:auto; padding:20px 22px; display:flex; flex-direction:column; gap:10px; }
.ai-empty{ margin:auto; text-align:center; color:#8a8f98; }
.ai-empty-icon{ font-size:42px; margin-bottom:8px; color:var(--primary, #0d6efd); opacity:.55; }
.ai-empty p{ margin:0 0 14px; font-size:.95rem; }
.ai-empty p small{ color:#a8adb5; }
.ai-suggestions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:640px; margin:0 auto; }
.ai-msg{ display:flex; }
.ai-msg-user{ justify-content:flex-end; }
.ai-msg-assistant{ justify-content:flex-start; }
.ai-bubble{ max-width:78%; padding:10px 14px; border-radius:14px; font-size:.925rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.ai-msg-user .ai-bubble{ background:var(--primary, #0d6efd); color:#fff; border-bottom-right-radius:4px; }
.ai-msg-assistant .ai-bubble{ background:var(--surface-alt, #f1f3f5); color:var(--text, #212529); border-bottom-left-radius:4px; }
.monetix-dark .ai-msg-assistant .ai-bubble{ background:#2a2f36; color:#e9ecef; }
.ai-note{ font-size:.75rem; color:#9aa0a6; text-align:center; }
.ai-chat-input{ display:flex; align-items:flex-end; gap:10px; padding:14px 18px; border-top:1px solid var(--border, #e5e7eb); background:var(--surface, #fff); }
.ai-prompt{ resize:none; border-radius:12px; }
.ai-send{ flex:0 0 auto; border-radius:12px; width:46px; height:46px; }
.ai-cancel{ flex:0 0 auto; border-radius:12px; width:46px; height:46px; }
.ai-bubble p{ margin:0 0 .45rem; }
.ai-bubble p:last-child{ margin-bottom:0; }
.ai-bubble ul{ margin:0 0 .45rem; padding-left:1.2rem; }
.ai-bubble ul:last-child{ margin-bottom:0; }
.ai-retry{ display:flex; justify-content:center; margin-top:2px; }

/* ===================== AJAX toast ===================== */
.ajax-toast{
    position:fixed;
    top:18px;
    right:18px;
    z-index:1090;
    max-width:340px;
    padding:12px 16px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    color:#fff;
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .25s ease, transform .25s ease;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
    pointer-events:none;
}
.ajax-toast.show{ opacity:1; transform:none; }
.ajax-toast-success{ background:#198754; }
.ajax-toast-danger{ background:#dc3545; }
.ajax-toast-warning{ background:#ffc107; color:#212529; }
.ajax-toast-info{ background:#0d6efd; }

/* ===================== Address component & shared form fields =====================
   Moved out of students/form.blade.php so the <x-address> selector renders with
   the same field design anywhere it is used (add/edit form, profile edit modal). */

.address-component .grid,
.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.address-component .grid-basic,
.grid-basic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .address-component .grid,
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .address-component .grid-basic,
    .grid-basic {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}
@media (min-width: 992px) {
    .address-component .grid-basic,
    .grid-basic {
        grid-template-columns: repeat(6, 1fr);
    }
    .address-component .field-fill,
    .field-fill {
        grid-column: span 2;
    }
}

.address-component .field,
.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.address-component .field label,
.field label {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
}
.address-component .field label .req,
.field label .req {
    color: #dc3545;
}

.address-component .field input,
.address-component .field select,
.address-component .field textarea,
.field input,
.field select,
.field textarea {
    padding: 9px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    background: #fff;
    color: #212529;
    transition: border-color .15s, box-shadow .15s;
}
html.monetix-dark .address-component .field input,
html.monetix-dark .address-component .field select,
html.monetix-dark .address-component .field textarea,
html.monetix-dark .field input,
html.monetix-dark .field select,
html.monetix-dark .field textarea {
    background: #151820;
    border-color: #2a2f3a;
    color: #d7dde6;
}
html.monetix-dark .address-component .field input[readonly],
html.monetix-dark .field input[readonly] {
    background: #1a1d27;
    color: #8ba0b8;
}
.address-component .field input:focus,
.address-component .field select:focus,
.address-component .field textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}
.address-component .field input[readonly],
.field input[readonly] {
    background: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

.address-component form {
    margin: 0;
}
.address-component .hint,
.hint {
    font-size: 12px;
    color: #6c757d;
}
.address-component .field .form-text,
.field .form-text {
    font-size: 12px;
}

/* Address menu boxes (shared with students/form.blade.php) so the quick-edit
   modal and the full form render the <x-address> component with the same
   standard "Present/Permanent Address" panel format. */
.address-box {
    border: 1px solid #e3e8ef;
    background: #f8f9fb;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 16px;
}
.address-box .box-title {
    font-size: 13px;
    font-weight: 600;
    color: #0d6efd;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.check-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    color: #495057;
}
.check-row input {
    width: auto;
}
html.monetix-dark .address-box {
    background: #151820 !important;
    border-color: #2a2f3a !important;
}
html.monetix-dark .address-box .box-title {
    color: #60a5fa;
}

/* The <x-address> cascade toggles level fields via the [hidden] attribute
   (geo-select.refreshVisibility). The author rule above (display:flex) would
   otherwise override the UA [hidden] display:none and keep Division/District/
   Upazila visible. */
.address-component .field[hidden],
.field[hidden],
.address-component [data-address-level][hidden],
[data-address-level][hidden] {
    display: none !important;
}

/* Column header funnel filters (custom command "column header filter") */
.colhdr {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.colhdr-label {
    white-space: nowrap;
}
.colhdr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    line-height: 1;
    font-size: .75rem;
    color: #adb5bd;
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
.colhdr-btn:hover,
.colhdr-btn.is-active {
    color: var(--primary, #0d6efd);
    background: var(--light, #f1f3f5);
}
.colhdr-pop {
    position: absolute;
    z-index: 1060;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 210px;
    padding: 10px 12px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #e3e6ea);
    border-radius: 8px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    text-align: left;
    font-weight: 400;
}
.colhdr-pop[hidden] { display: none; }
.colhdr-pop .colhdr-title {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: 6px;
}
.colhdr-pop .colhdr-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 6px;
    border: 0;
    background: none;
    border-radius: 6px;
    font-size: .875rem;
    color: var(--dark, #212529);
    cursor: pointer;
    text-align: left;
}
.colhdr-pop .colhdr-opt:hover { background: var(--light, #f1f3f5); }
.colhdr-pop .colhdr-opt.is-active { color: var(--primary, #0d6efd); font-weight: 600; }
.colhdr-pop .colhdr-opt i { width: 14px; font-size: .8rem; }
.colhdr-pop form { margin-top: 8px; }
.colhdr-pop label {
    display: block;
    font-size: .8125rem;
    margin-bottom: 4px;
    color: #6c757d;
}
.colhdr-pop input[type="date"] {
    width: 100%;
    padding: 4px 8px;
    font-size: .8125rem;
    border: 1px solid var(--border, #e3e6ea);
    border-radius: 6px;
    background: var(--white, #fff);
    color: var(--dark, #212529);
}
.colhdr-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border, #e3e6ea);
}
.colhdr-actions .btn { flex: 1 1 0; }
html.monetix-dark .colhdr-pop {
    background: #1a1d27;
    border-color: #2a2f3a;
}
html.monetix-dark .colhdr-pop .colhdr-opt:hover { background: #262b35; }
html.monetix-dark .colhdr-pop input[type="date"] {
    background: #151820;
    border-color: #2a2f3a;
    color: #e9ecef;
}
html.monetix-dark .colhdr-actions { border-color: #2a2f3a; }

/* ===================== Global Glass Effect � Popups =====================
   Non-destructive trap fix: backdrop is purely visual, never blocks clicks
   when hidden; modal always sits above backdrop even after frequent open/close
   on same page (seamless-fade / loadPage swaps). */
.modal-backdrop{
    opacity:0 !important;
    background:rgba(255,255,255,.05) !important;
    backdrop-filter:blur(6px) saturate(1.5) !important;
    -webkit-backdrop-filter:blur(6px) saturate(1.5) !important;
    will-change:opacity;
    transition:opacity .28s ease !important;
    pointer-events:none !important;
    visibility:hidden !important;
    z-index:1040 !important;
}
.modal-backdrop.show{
    opacity:1 !important;
    pointer-events:auto !important;
    visibility:visible !important;
}
html.monetix-dark .modal-backdrop{
    background:rgba(255,255,255,.05) !important;
    backdrop-filter:blur(6px) saturate(1.5) !important;
    -webkit-backdrop-filter:blur(6px) saturate(1.5) !important;
}
html.monetix-dark .modal-backdrop.show{
    background:rgba(255,255,255,.05) !important;
}
/* Modal must always stack above the glass backdrop � prevents "trapped under
   effect" when Bootstrap creates a new backdrop on frequent same-page opens. */
.modal{
    z-index:1055 !important;
    position:fixed !important;
    inset:0 !important;
}
.modal-dialog{
    position:relative;
    z-index:1056;
    pointer-events:auto;
}
/* Force backdrop to be viewport-fixed even if injected inside a transformed
   ancestor (admin-card/content with translateZ). Without this, backdrop may
   be sized to the card and blur the full page incorrectly. */
.modal-backdrop{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
}
/* Orphan backdrop guard: if Bootstrap failed to remove the node after hide,
   or loadPage swapped content while modal was open, hide it without JS. */
.modal-backdrop:not(.show){
    pointer-events:none !important;
    visibility:hidden !important;
}
body:not(.modal-open) .modal-backdrop{
    display:none !important;
    pointer-events:none !important;
}
/* Avoid double blur stacking when user spams the trigger � only the
   topmost backdrop paints the blur. Keep underlying layers transparent. */
.modal-backdrop ~ .modal-backdrop{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}
.modal-backdrop ~ .modal-backdrop.show{
    background:transparent !important;
}
/* Full-page lock fix: if no modal is actually visible, ensure page remains
   scrollable � handles orphan lock after frequent open/close without reload. */
body:not(:has(.modal.show)){
    overflow:auto !important;
}

/* ===================== Popup / Dropdown escape fix (non-destructive) =====================
   Fixes trapped dropdowns/menus that were clipped by ancestor overflow.
   No HTML structure change � only overflow/position tweaks.
   Covers: .table-responsive, .card, .admin-card, .filter-card, .modal-body,
           .colhdr-pop, .inst-list, .phone-country-list, and generic dropdowns.
   --------------------------------------------------------------------------- */

/* 1) Let Bootstrap dropdowns float above clipping ancestors � high z-index + solid visual */
.dropdown-menu{
    z-index: 1085 !important;
    --bs-dropdown-zindex: 1085;
}
.modal .dropdown-menu{
    z-index: 1090 !important;
}
.colhdr-pop,
.inst-list,
.phone-country-menu,
.country-dropdown,
.col-toggle-menu,
.notification-menu{
    z-index: 1085 !important;
}

/* 2) When a popup is open, its scroll container becomes overflow:visible
      so the absolute menu is not cut off. JS adds .popup-open; CSS :has()
      provides a no-JS fallback for modern browsers. */
.table-responsive.popup-open,
.card.popup-open,
.admin-card.popup-open,
.filter-card.popup-open,
.modal-body.popup-open,
.admin-card.popup-open .table-responsive,
.card.popup-open .table-responsive{
    overflow: visible !important;
}
/* Fallback via :has() � works even before JS loads */
.table-responsive:has(.dropdown-menu.show),
.table-responsive:has(.colhdr-pop:not([hidden])),
.table-responsive:has(.inst-list.open),
.card:has(.dropdown-menu.show),
.admin-card:has(.dropdown-menu.show),
.filter-card:has(.dropdown-menu.show),
.modal-body:has(.dropdown-menu.show),
.table-responsive:has(.dropdown.show){
    overflow: visible !important;
}

/* 3) Keep table horizontal scroll when no popup is open, but avoid
      vertical clipping of popups. */
.table-responsive:not(.popup-open):not(:has(.dropdown-menu.show)):not(:has(.colhdr-pop:not([hidden]))){
    overflow-x: auto;
    overflow-y: visible;
}

/* 4) Modal body: allow popup to escape without losing scroll */
.modal-body.popup-open{
    overflow: visible !important;
    overscroll-behavior: auto !important;
}

/* 5) Generic escape for any card-like wrapper that may have overflow hidden
      for border-radius � keep radius but do not clip dropdowns */
.card:has(.dropdown-menu.show),
.admin-card:has(.dropdown-menu.show){
    overflow: visible !important;
}

/* 6) Ensure colhdr popover and inst-list are not clipped by th/card */
th:has(.colhdr-pop:not([hidden])),
.filter-card:has(.inst-list.open){
    overflow: visible !important;
}

/* 7) Visual clarity � opaque background, strong shadow, no blur bleed
      Fixes "popup visual not clear" where glass backdrop / low contrast
      made menus look washed out. Purely visual, no structure change. */
.dropdown-menu,
.colhdr-pop,
.inst-list,
.phone-country-menu,
.country-dropdown,
.col-toggle-menu,
.notification-menu{
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    background-clip: padding-box !important;
    border: 1px solid var(--border, #e9ecef) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.10) !important;
    isolation: isolate;
}
.dropdown-menu{
    background: var(--white, #fff) !important;
    background-color: var(--white, #fff) !important;
}
.colhdr-pop,
.inst-list{
    background: var(--white, #fff) !important;
}
html.monetix-dark .dropdown-menu,
html.monetix-dark .colhdr-pop,
html.monetix-dark .inst-list,
html.monetix-dark .phone-country-menu,
html.monetix-dark .country-dropdown,
html.monetix-dark .col-toggle-menu,
html.monetix-dark .notification-menu{
    background: #1a1d27 !important;
    background-color: #1a1d27 !important;
    border-color: #2a2f3a !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.30) !important;
    color: #d7dde6 !important;
}
html.monetix-dark .dropdown-menu .dropdown-item,
html.monetix-dark .colhdr-pop .colhdr-opt,
html.monetix-dark .inst-list .inst-item{
    color: #d7dde6 !important;
}
html.monetix-dark .dropdown-menu .dropdown-item:hover,
html.monetix-dark .dropdown-menu .dropdown-item:focus,
html.monetix-dark .colhdr-pop .colhdr-opt:hover{
    background: #262b35 !important;
    color: #fff !important;
}
/* Remove transform isolation that limits z-index inside cards */
.admin-card:has(.dropdown-menu.show),
.card:has(.dropdown-menu.show),
.admin-card.popup-open,
.card.popup-open{
    transform: none !important;
}
.page-header:has(+ * .dropdown-menu.show){
    transform: none !important;
}

/* ===================== Breadcrumbs (Super Admin) ===================== */

.breadcrumb{
    background:transparent;
    padding:0;
    margin:0;
    font-size:13px;
}

.breadcrumb-item + .breadcrumb-item::before{
    content:'/';
    color:var(--muted, #6c757d);
    font-weight:400;
}

.breadcrumb-item a{
    color:var(--primary, #0D6EFD);
    font-weight:500;
    transition:color .15s ease;
}

.breadcrumb-item a:hover{
    color:var(--bs-primary-hover, #0b5ed7);
    text-decoration:underline !important;
}

.breadcrumb-item.active{
    color:var(--muted, #6c757d);
    font-weight:500;
}

html.monetix-dark .breadcrumb-item.active{
    color:#8ba0b8;
}

/* ===================== Shallow Depth � iPhone Portrait (non-destructive) =====================
   Upgrade over the 6px glass: true depth-of-field like iPhone portrait background.
   - Backdrop: 18-22px bokeh blur + warm saturate + soft vignette dim
   - Foreground modal: crisp frosted glass, lifted shadow, subtle border
   - Background page (.content/.sidebar/.topbar) gently blurs/scales when modal open
   No HTML/route change � pure CSS override, layered after existing glass rules.
   --------------------------------------------------------------------------- */

/* 1) Backdrop � stronger bokeh (was blur(6px)) */
.modal-backdrop{
    background:rgba(248,249,250,.34) !important;
    backdrop-filter:blur(20px) saturate(1.75) brightness(1.04) !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.75) brightness(1.04) !important;
    transition:opacity .42s cubic-bezier(.22,1,.36,1), backdrop-filter .42s ease !important;
}
/* subtle vignette + light tint via extra layer � paints under the blur */
.modal-backdrop.show{
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.55) 0%, transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(13,110,253,.08) 0%, transparent 55%),
        rgba(248,249,250,.36) !important;
}
html.monetix-dark .modal-backdrop{
    background:rgba(12,16,24,.42) !important;
    backdrop-filter:blur(22px) saturate(1.35) brightness(.92) !important;
    -webkit-backdrop-filter:blur(22px) saturate(1.35) brightness(.92) !important;
}
html.monetix-dark .modal-backdrop.show{
    background:
        radial-gradient(1100px 600px at 50% -8%, rgba(255,255,255,.06) 0%, transparent 62%),
        radial-gradient(800px 500px at 100% 100%, rgba(96,165,250,.10) 0%, transparent 60%),
        rgba(12,16,24,.46) !important;
}

/* 2) Depth-of-field: background page softly defocuses & recedes when modal open
      (mimics iPhone shallow DOF: subject sharp, background creamy bokeh) */
body.modal-open .layout > .content,
body.modal-open main.content{
    filter:blur(1.8px) saturate(.92) brightness(.985) !important;
    transform:scale(.985) !important;
    transform-origin:center top !important;
    transition:filter .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1) !important;
    will-change:filter, transform;
}
body.modal-open .sidebar{
    filter:blur(1.2px) saturate(.94) brightness(.98) !important;
    transition:filter .45s cubic-bezier(.22,1,.36,1) !important;
}
body.modal-open div.topbar{
    filter:blur(1.2px) saturate(.94) brightness(.985) !important;
    transition:filter .45s cubic-bezier(.22,1,.36,1) !important;
}
/* release immediately when closing � no lingering blur */
body:not(.modal-open) .layout > .content,
body:not(.modal-open) main.content,
body:not(.modal-open) .sidebar,
body:not(.modal-open) div.topbar{
    transition:filter .32s ease, transform .32s ease !important;
}

/* 3) Foreground modal � crisp frosted glass lifted off the creamy background */
.modal-content{
    background:rgba(255,255,255,.88) !important;
    backdrop-filter:blur(16px) saturate(1.5) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.5) !important;
    border:1px solid rgba(255,255,255,.62) !important;
    border-radius:16px !important;
    box-shadow:
        0 24px 56px rgba(15,23,42,.16),
        0 8px 20px rgba(15,23,42,.10),
        0 0 0 1px rgba(255,255,255,.55) inset !important;
    overflow:hidden;
}
html.monetix-dark .modal-content{
    background:rgba(26,29,39,.84) !important;
    backdrop-filter:blur(18px) saturate(1.35) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.35) !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:
        0 28px 64px rgba(0,0,0,.45),
        0 10px 24px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.06) inset !important;
}
.modal-header{
    background:linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,0)) !important;
    border-bottom-color:rgba(0,0,0,.06) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
}
html.monetix-dark .modal-header{
    background:linear-gradient(to bottom, rgba(255,255,255,.06), transparent) !important;
    border-bottom-color:rgba(255,255,255,.08) !important;
}
.modal-footer{
    background:rgba(248,249,250,.72) !important;
    border-top-color:rgba(0,0,0,.06) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
}
html.monetix-dark .modal-footer{
    background:rgba(21,24,32,.72) !important;
    border-top-color:rgba(255,255,255,.08) !important;
}

/* 4) Entrance � gentle scale + fade like iOS sheet (replaces Bootstrap slide) */
.modal.fade .modal-dialog{
    transform:scale(.96) translateY(8px) !important;
    opacity:0 !important;
    transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .32s ease !important;
    will-change:transform, opacity;
}
.modal.show .modal-dialog{
    transform:scale(1) translateY(0) !important;
    opacity:1 !important;
}
/* keep maximized edit modal crisp � no scale bounce */
#editStudentModal.monetix-maximized.modal.show .modal-dialog{
    transform:none !important;
}

@media (prefers-reduced-motion: reduce){
    .modal-backdrop, .modal.fade .modal-dialog, body.modal-open .layout > .content{
        transition:none !important;
        transform:none !important;
        filter:none !important;
    }
}