/* Target the select dropdown specifically within DataTables */
.dt-length select {
    width: 75px !important; /* Increased slightly for better fit */
    height: 34px;
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid #d2d6de;
    color: #555;
    background-color: #fff;
    outline: none;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    vertical-align: middle;
}

/* Hover state */
.dt-length select:hover {
    border-color: #b1b4ba;
}

/* Focus state (when clicked) */
.dt-length select:focus {
    border-color: #3c8dbc; /* Classic blue focus */
    box-shadow: 0 0 5px rgba(60, 141, 188, 0.5);
}

/* Optional: Align the "Show X entries" text better */
.dt-length label {
    font-weight: 500;
    color: #333;
    /* display: flex; */
    align-items: center;
    gap: 8px; /* Adds space between text and select box */
}

.dt-paging {
    float: right;
}

/* 1. Gap above the table (between buttons/search and the header) */
div.dt-container div.row:has(table) {
    margin-top: 10px !important;
}

/* 2. Gap below the table (between the data and pagination/info) */
div.dt-container div.row:has(table) {
    margin-bottom: 10px !important;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 25px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* 3. Optional: Extra breathing room inside the header and footer rows */
.dt-layout-row {
    padding-top: 10px;
    padding-bottom: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b{
    top: 35% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 25px !important;
}

.select2 {
    width: 185px !important;
}

/* Drawer form submit: as wide as its label (e.g. "Transfer Ticket"),
   never narrower than the old fixed 100px */
.action-submit-btn {
    margin-top: 10px !important;
    width: auto !important;
    min-width: 100px;
    padding-left: 22px;
    padding-right: 22px;
    white-space: nowrap;
}

.btn-group .dropdown-menu {
    padding: 0;
}

.action-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn.rounded-circle {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10% !important;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn.rounded-circle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* delete row */
/*.delete-row {*/
/*    width: 34px !important;*/
/*}*/

/* status toggle button design */
/* Hide checkbox */
.toggle-btn {
    display: none;
}

/* Toggle track */
.toggle-label {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    background: linear-gradient(135deg, #c4c4c4, #e0e0e0);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Inner circle (knob) */
.toggle-label::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.35s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Active (checked) state */
.toggle-btn:checked + .toggle-label {
    background: linear-gradient(135deg, #00c853, #00e676);
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.7);
}

/* Move knob right when checked */
.toggle-btn:checked + .toggle-label::after {
    left: calc(100% - 3px);
    transform: translateX(-100%);
    background: #fff;
}

/* Optional subtle hover effect */
.toggle-label:hover::after {
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.toggle-label {
    background: linear-gradient(135deg, #d9534f, #ff6b6b);
}
.toggle-btn:checked + .toggle-label {
    background: linear-gradient(135deg, #28a745, #00e676);
}

/* Center table header and content */
.table th,
.table td {
    text-align: center !important;
    vertical-align: middle !important;
}

.sidebar {
    overflow-y: auto;
    height: 100%;
}

/* right side drawer */
/* Stage for 3D */
body {
    /* perspective: 2000px; */
    background-color: #f4f7f6;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Overlay */
#drawerOverlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.3); /* Deep slate tint */
    backdrop-filter: blur(8px); /* High blur for depth */
    display: none;
    z-index: 9998;
    transition: opacity 0.8s ease;
}

/* The Premium 3D Drawer */
#globalDrawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 15px;
    width: 45%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    
    /* Design Details */
    border-top-left-radius: 30px; /* Modern rounded look */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden; /* Clean edges */

    /* 3D State: Starts tilted and far back */
    transform: translateX(120%) rotateY(-30deg) scale(0.9);
    opacity: 0;
    
    /* THE MAGIC: Slow, smooth curve */
    transition: 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
        opacity 0.8s ease,
        box-shadow 0.8s ease;
}

/* Open State */
#globalDrawer.open {
    transform: translateX(0) rotateY(0deg) scale(1);
    opacity: 1;
}

/* Content Stagger Effect */
#drawerContent {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.4s; /* Waits for drawer to finish half-way */
}

#globalDrawer.open #drawerContent {
    opacity: 1;
    transform: translateY(0);
}

/* Header */
.drawer-header {
    padding: 10px 20px;
    background: linear-gradient(135deg, #3c8dbc 0%, #2b6688 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.closeDrawer {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    font-size: 26px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.closeDrawer:hover {
    color: #ffffff;
    
    /* Elegant Rose-Violet Gradient (More sophisticated than pure red) */
    background: linear-gradient(135deg, #ff5f6d 0%, #fc4621 100%);
    
    /* 3D Dynamics */
    transform: rotate(90deg);
    
    /* Multi-layered Soft Glow */
    box-shadow: 
        0 10px 20px rgba(255, 95, 109, 0.3), /* Primary soft glow */
        0 4px 10px rgba(255, 195, 113, 0.2), /* Secondary warm light */
        0 0 0 4px rgba(255, 95, 109, 0.1);    /* Outer halo ring */
    
    border-color: rgba(255, 255, 255, 0.2);
}

#drawerTitle {
    margin-top:10px;
}

/* Body */
.drawer-body {
    padding: 30px;
    height: calc(100% - 80px); /* Adjust based on header height */
    overflow-y: auto;
}

/* Profile Image Upload */
.profile-upload-container {
    text-align: center;
    margin-bottom: 25px;
}

.profile-preview {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #e0e0e0;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: 0.3s ease;
}

.profile-preview:hover {
    transform: scale(1.05);
}

#profileImageInput {
    display: none;
}

/* Input UI */
.form-label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #444;
}

.form-control {
    border-radius: 8px;
    /* padding: 9px 12px; */
    border: 1px solid #d2d2d2;
}

.save-btnn:hover {
    background:#0b5ed7 !important;
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* for invalid input fields */
.is-invalid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 4px rgba(231, 76, 60, 0.3);
}

/* Match Bootstrap form-control height and alignment */
.select2-container .select2-selection--single {
    height: 34px !important;
    background: #f0f2f5 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 0 12px !important; 
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-shadow: inset 2px 2px 5px #d1d9e6, inset -3px -3px 5px #ffffff !important;
}

/* Fix text alignment & stop text cut-off */
.select2-container .select2-selection--single .select2-selection__rendered {
    /* line-height: 38px !important;  */
    font-size: 14px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    color: #444 !important;
    text-align: left;
}

/* Arrow alignment (Snapped back inside the box layout safely) */
.select2-container .select2-selection__arrow {
    height: 20px !important; 
    top: 10px !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
}

/* Dropdown Flyout Panel (Sets 260px globally but allows overrides) */
.select2-container--default .select2-dropdown {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    z-index: 99999 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

/* Placeholder color */
.select2-selection__placeholder {
    color: #6c757d !important;
}

/* Dropdown option hover style */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd !important;
    color: white !important;
}

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

/* Apply high z-index ONLY to select2 containers that are NOT inside the drawer */
.select2-container:not(#globalDrawer .select2-container) {
    z-index: 999; 
}

/* Ensure the Select2 dropdown inside the drawer has its own high stacking context */
#globalDrawer .select2-container--open {
    z-index: 100001 !important;
}

/* 1. GLOBAL RESET & CONTAINER */
.box-body {
    padding: 1.25rem;
    background: #f0f2f5;
}

/* Force the parent container to allow overflow */
.custom-scroll-container {
    width: 100% !important;
    /* overflow-x: auto !important; */
    display: block !important;
    -webkit-overflow-scrolling: touch;
}

/* Target Webkit browsers (Chrome, Safari, Edge) on Desktop to force show scrollbar */
.custom-scroll-container::-webkit-scrollbar {
    height: 10px !important; /* Makes the scrollbar track visible */
    display: block !important;
}

/* Track (the gray area underneath the bar) */
.custom-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px;
}

/* Thumb (the draggable scrollbar handle) */
.custom-scroll-container::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 4px;
    border: 2px solid #f1f1f1; /* Creates padding around the thumb */
}

/* Change handle color on hover */
.custom-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

.responsive-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    width: 100%;
}

/* --- CLEAN WRAPPER FOR JQUERY ANIMATION --- */
#applyFilter {
    display: none; /* Controlled completely by jQuery */
}

/* --- YOUR EXACT PREVIOUS STYLES --- */
.filter-toggle-btn {
    width: 100%;
    background-color: #f5f5f5;
    color: #333;
    font-weight: 600;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px 20px;
    font-size: 16px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.filter-toggle-btn:hover {
    background-color: #e9e9e9;
    transform: translateY(-2px);
}

/* 3. THE INNER PANEL */
#applyFilter .card-body {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.8) !important;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.05) !important;
    padding: 24px !important;
    margin-top: 8px;
}

/* 4. 3D INPUTS & SELECT BOXES (INNER DEPTH) */
#applyFilter .form-control-sm, 
#applyFilter .select2-container--default .select2-selection--single,
#applyFilter input[type="text"], 
#applyFilter input[type="date"], 
#applyFilter select.form-control {
    width: 100% !important;
    height: 40px !important;
    background: #f0f2f5 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-weight: 500 !important;
    color: #444 !important;
    box-shadow: inset 2px 2px 5px #d1d9e6, inset -3px -3px 5px #ffffff !important;
    transition: all 0.25s ease-in-out !important;
}

/* Focus State */
#applyFilter .form-control-sm:focus, #applyFilter select.form-control:focus {
    background: #ffffff !important;
    border-color: rgba(255, 126, 0, 0.3) !important;
    box-shadow: 0 0 0 3px rgba(255, 126, 0, 0.15) !important;
    outline: none !important;
}

/* 5. LABELS */
#applyFilter .form-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #a0aec0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    margin-bottom: 6px !important;
}

.filter-btn, .excel-btn {
    width: 100% !important; 
    height: 40px !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease-in-out !important;
}

/* Apply Filter Colors */
.filter-btn {
    background: linear-gradient(135deg, #ff7e00, #ffb347) !important;
    box-shadow: 0 4px 10px rgba(255, 126, 0, 0.2) !important;
}

.excel-btn {
    background: linear-gradient(135deg, #1d6f42, #28a745) !important;
    box-shadow: 0 4px 10px rgba(29, 111, 66, 0.2) !important;
}

.filter-btn:hover, .excel-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 6px 14px rgba(0,0,0,0.1) !important;
}

.filter-btn:active, .excel-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Smooth Arrow Rotation */
.toggle-icon {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.table-responsive {
    border: none !important;
    margin: 15px 0;
}

.table th, .table td {
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap; /* Prevents text ugly breaking in middle of cells */
}

/* 7. ICON ANIMATION */
.toggle-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.filter-toggle-btn:not(.collapsed) .toggle-icon {
    transform: rotate(180deg);
    color: #ff7e00;
}

/* detail page styles */
/* --- User Detail Page Specific Styles --- */

/* Detail Card Styling */
.detail-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    height: 100%;
    margin-bottom: 10px;
}

.detail-card div:not(.detail-icon) {
    width: -webkit-fill-available;
    width: fill-available; /* Standard syntax support */
}

.detail-card:hover {
    background: #fafafa;
    border-color: #3c8dbc;
    /* transform: translateY(-3px); */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Icon Container in Detail Cards */
.detail-icon {
    width: 60px;
    height: 45px;
    background: rgba(60, 141, 188, 0.1); /* Subtle blue theme */
    color: #3c8dbc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 15px;
    margin-top: 8px;
}

/* Label & Value Styling */
.detail-info-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #888;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.detail-info-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    word-break: break-all;
}

/* Status Badge in Detail View */
.status-badge-floating {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Profile Section in Detail */
.detail-profile-header {
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 25px;
}

.detail-role-pill {
    background: #eef4f7;
    color: #2b6688;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-top: 5px;
}

/* Force the container to the top of the browser window */
.swal2-container.swal2-center {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Beautiful Modern Popup styling */
.swal2-popup {
    margin-top: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2) !important;
    width: 420px !important;
}

div:where(.swal2-icon) {
    width: 5.5em !important;
    height: 5.5em !important;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: 2.5em !important;
}

div:where(.swal2-container) div:where(.swal2-html-container) {
    font-size: 1.7em !important;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {
    font-size: 1.25em !important;;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    font-size: 1.25em !important;;
}

div:where(.swal2-container) button:where(.swal2-styled) {
    padding: 0.5em 1em !important;
}

.wrapper {
    overflow-y: hidden !important;
}

/* toaster css */
.toast-top-right {
    top: 55px !important;
    right: 2px !important;
}

.toast-close-button {
    top: -.1em !important;
}

#toast-container > .toast {
    opacity: 0.95 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out;
}

#toast-container > .toast:hover {
    opacity: 1.0 !important;
    transform: translateY(-2px);
}

.toast-error {
    background-color: #d24b44 !important;
}

.toast-success {
    background-color: #1f955f !important;
}

.toast-warning {
    background-color: #eb950d !important;
}

.countItems {
    position: relative;
    margin-left: 5px;
    padding: 0 7px;
    border-radius: 50px; /* Perfect pill shape */
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(45deg, #f39c12, #e67e22) !important;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    transition: transform 0.2s ease-in-out;
    display: inline-block;
    letter-spacing: 0.5px;
}

/* Optional: Soft pulse effect to draw the eye */
.countItems {
    animation: softPulse 2s infinite;
}

@keyframes softPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.skin-blue .sidebar-menu>li>.treeview-menu {
    margin: 0 10px !important;
}

.treeview-menu>li>a {
    font-size: 13px !important;
}

/* Force the toolbar to show all items and wrap to new lines if needed */
.cke_toolbar {
    display: block !important; /* Change from flex to block to allow natural wrapping */
    float: left;
}

.cke_toolbar_break {
    display: block !important;
    clear: both !important;
}

/* Ensure the header container expands to fit all buttons */
.cke_top {
    height: auto !important;
    white-space: normal !important;
}

/* Make sure the colorful icons aren't compressed */
.cke_button_icon {
    width: 16px !important;
    height: 16px !important;
}

.hover-zoom-reveal {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: zoom-in;
    /* This ensures the zoom expands downwards and outwards, not upwards */
    transform-origin: top center; 
}

.hover-zoom-reveal:hover {
    /* 1. Remove the circular crop */
    border-radius: 8px !important;
    
    /* 2. Show the full image instead of 'cover' */
    object-fit: contain !important;
    
    /* 3. Make it much larger */
    transform: scale(3.5); 
    
    /* 4. Ensure it floats above everything else */
    z-index: 9999;
    position: relative;
    
    /* 5. Add a stronger shadow for the 'popup' effect */
    box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
    
    /* Optional: Slight background in case image is transparent */
    background-color: #fff;
}

/* Keeps the control headers perfectly bounded inside your visible container */
.dataTables_wrapper {
    width: 100% !important;
    overflow: hidden !important;
}

/* Forces the table container to gracefully isolate its overflow scroll line */
.dataTables_wrapper .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    border: none;
}

/* Lock search elements to the container terminal edge */
.dataTables_filter {
    width: 100%;
}
.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    float: right; /* Fallback for legacy admin templates */
}

/* Force modern structural alignment behaviors on pagination controls */
.dataTables_paginate {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100%;
}

/* start */
.btn-responsive-container {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}
.responsive-action-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 6px 3px;
    gap: 5px;
    height: 38px;
    border-radius: 4px;
    color: #fff;
    margin-top: -3px;
}
.filter-btn { background-color: #3c8dbc; border: 1px solid #367fa9; }
.filter-btn:hover { background-color: #367fa9; color: #fff; }
.excel-btn { background-color: #00a65a; border: 1px solid #008d4c; }
.excel-btn:hover { background-color: #008d4c; color: #fff; }
.excel-btn-wrapper { flex: 1; position: relative; width: 100%; }
.btn-text-wrapper { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.sub-txt { font-size: 8px; opacity: 0.85; display: block; letter-spacing: 0.3px; }
.main-txt { font-size: 11px; font-weight: 700; display: block; }
.responsive-action-btn i { font-size: 14px; }
.export-loader { display: none; align-items: center; gap: 4px; position: absolute; top: 100%; left: 0; margin-top: 4px; width: 100%; }
.export-loader i { font-size: 11px; color: #666; }
.export-loader span { font-size: 9px; color: #666; font-weight: 600; text-transform: uppercase; }

/* Media Viewport Overrides */
@media (min-width: 992px) {
    /* If row action contains inline button column fixes */
    .filter-action-col {
        display: flex;
        align-items: flex-end;
        padding-bottom: 2px; /* aligns perfectly flush with standard text input boxes */
    }
}

@media (max-width: 991px) {
    #globalDrawer {
        width: 65%;
    }

    .btn-responsive-container {
        margin-top: 5px;
    }

    /* Make buttons naturally split cleanly on tablets */
    .filter-action-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    #globalDrawer {
        width: 100%;
        border-radius: 0;
    }

    .box-body {
        padding: 10px;
    }

    /* Wrap the filter controls beautifully on small devices */
    #applyFilter .card-body {
        padding: 16px !important;
    }

    /* Target columns wrapper block elements inside your Filter row */
    #applyFilter .row > div {
        margin-bottom: 12px;
    }

    #applyFilter .row > div:last-child {
        margin-bottom: 0;
    }

    /* Convert action area inside filter row into clean stack blocks */
    .filter-action-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 5px;
    }

    .filter-btn, .excel-btn {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .hidden-xs { display: none !important; }
    .btn-responsive-container {
        flex-direction: row; 
        margin-top: 10px;
    }
    .responsive-action-btn {
        padding: 10px 8px;
        height: 42px;
    }
    .main-txt { font-size: 12px; }
}

@media (max-width: 480px) {
    .action-container {
        gap: 4px; /* Ensure tiny spacing context inside table streams */
    }
    
    .btn.rounded-circle {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
}

/* --- The Ultimate Overwrite for 14-Inch+ Screens (Protected Structural Buttons) --- */
@media (min-width: 1200px) {
    /* 1. Kill the scroll wrapper entirely */
    .table-responsive,
    .custom-scroll-container,
    div.dataTables_wrapper .table-responsive,
    div.dt-container .table-responsive {
        overflow: visible !important;
        overflow-x: visible !important;
        display: block !important; 
        width: 100% !important;
    }

    /* 2. Fix Table layout behavior */
    table.dataTable,
    table.table,
    #table,
    #volunteerTable {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important; /* Retain fixed layout to prevent overflow on pagination changes */
        margin: 15px 0 !important;
    }

    /* 3. Base Cell styling: Allow standard text wrapping */
    table.table th, 
    table.table td,
    table.dataTable th,
    table.dataTable td {
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        padding: 8px 4px !important;
        vertical-align: middle !important;
    }

    /* 4. Column 1 (S.No / ID): Keep narrow */
    table.table th:first-child,
    table.table td:first-child {
        width: 50px !important;
        text-align: center;
    }

    /* ⚡ FIX: ACTION COLUMN - Allow enough width for 3 buttons & prevent container breakout */
    table.table th:last-child,
    table.table td:last-child {
        width: 130px !important;        /* Increased to fit 3 buttons without overflowing */
        white-space: nowrap !important; /* Keeps action buttons side-by-side */
        word-break: normal !important;
        text-align: center;
    }

    /* Ensure buttons inside the action cell remain aligned & inline */
    table.table td:last-child a:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* 5. FILTER & EXCEL BUTTON CONTAINER */
    .btn-responsive-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        width: 100% !important;
    }

    .btn-responsive-container > .filter-btn,
    .btn-responsive-container > .excel-btn-wrapper {
        flex: 1 1 50% !important;
        width: 50% !important;
    }

    .responsive-action-btn {
        width: 100% !important;
        white-space: nowrap !important;
    }

    /* Badges handling */
    .badge-volunteer-wrap {
        white-space: normal !important;
        word-break: break-word !important;
        display: inline-block !important;
        line-height: 1.4 !important;
        margin: 2px;
    }
}

/* Responsive Structural Modifiers */
@media (max-width: 767px) {
    .premium-filter-banner .spec-btn-container {
        text-align: left !important;
        margin-top: 14px;
        padding-left: 54px; /* Perfectly aligns the action button directly beneath the text block */
    }
    .btn-premium-reset {
        display: inline-flex;
    }
    .banner-core-wrapper {
        align-items: flex-start;
    }
}

@media (min-width: 768px) {
    .premium-filter-banner .spec-btn-container {
        text-align: right !important;
    }
}

@media (max-width: 1199.98px) {
    #recordsBarContainer {
        text-align: center !important;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #recordsBar {
        float: none !important;
        display: inline-flex !important;
    }
}

/* Base Layout Component Container */
.premium-filter-banner {
    position: relative;
    background-color: #f8fafc; /* Pristine white-slate editorial canvas */
    border: 1px solid #e2e8f0; /* Sharp corporate architectural division line */
    border-left: 4px solid #3b82f6; /* Bold left-hand brand-blue indicator anchor */
    border-radius: 8px; /* Clean, tight professional corner radius */
    padding: 10px 10px;
    margin-bottom: 24px;
    width: 100%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
}

/* Flexbox Infrastructure Alignment Wrapper */
.banner-core-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Elegant Icon Badge Foundation */
.banner-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eff6ff; /* Featherweight corporate ice blue fill */
    border: 1px solid #bfdbfe;
    color: #2563eb; /* True corporate structural blue */
    width: 40px;
    height: 40px;
    border-radius: 6px;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Typography Tree Architecture */
.banner-text-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Micro Tracker Identifier Tag */
.banner-meta-tag {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important; 
    font-weight: 700 !important; 
    color: #475569 !important; /* Muted corporate concrete gray tracking label */
    margin: 0 !important;
}

/* Main Premium Display Message */
.banner-display-message {
    font-size: 0.95rem !important;
    color: #1e293b !important; /* Highly readable Charcoal-Midnight text */
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Clean, Readable Data Inline Capsule */
.donor-name-glint {
    font-size: 0.9rem !important;
    font-weight: 600 !important; 
    color: #1e3a8a !important; /* Authoritative Deep Royal Navy text color */
    background: #dbeafe !important; /* Matching soft corporate blue contrast plate */
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-left: 4px !important;
    display: inline-block !important;
}

/* Professional Clean-Slate System Action Button */
.btn-premium-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* Perfect uniform spatial distribution between icon and text */
    background: #ffffff;
    color: #475569 !important; /* Soft dark slate typography link color */
    border: 1px solid #cbd5e1; /* Neutral structural frame border */
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Elegant, High-Contrast Interaction States */
.btn-premium-reset:hover {
    color: #b91c1c !important; /* Transitions text to warning-crimson on focus intent */
    background-color: #fef2f2; /* Soft scarlet warning wash background */
    border-color: #fca5a5; /* Structural framing alignment matching the warning red profile */
    transform: translateY(0); /* Zero bounce ensures a rigid enterprise application feel */
}

.btn-premium-reset:active {
    background-color: #fee2e2;
    border-color: #f87171;
}

/* ==========================================================================
   Collapse System
   ========================================================================== */
#transaction_wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateZ(0);
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.2s ease-in-out, 
                margin 0.3s ease-in-out;
    margin-bottom: 0;
}

#transaction_wrapper.show-wrapper {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

#transaction_wrapper .detail-card {
    margin-bottom: 0 !important; 
}

/* ==========================================================================
   Badges
   ========================================================================== */
.payment-badge-premium-status {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.payment-status-pending {
    background-color: rgba(23, 162, 184, 0.12);
    color: #17a2b8;
    border: 1px solid rgba(23, 162, 184, 0.2);
}

.payment-status-confirmed {
    background-color: rgba(40, 167, 69, 0.12);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.payment-status-failed {
    background-color: rgba(220, 53, 69, 0.11);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* CSS to fix table layout & force fitting all columns */
.yajra-table {
    table-layout: auto !important;
    font-size: 13px !important;
}
.yajra-table th, 
.yajra-table td {
    vertical-align: middle !important;
    padding: 8px 6px !important;
    white-space: nowrap;
}
.yajra-table td.cell-wrap {
    white-space: normal !important;
    word-break: break-word;
    min-width: 130px;
}

.dt-loader-spin {
    width: 22px;
    height: 22px;
    border: 2.5px solid #e2e8f0;
    border-top-color: #64748b;
    border-radius: 50%;
    animation: dt-spin 0.7s linear infinite;
}

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

/* ==========================================================================
   Mobile card list  (replaces the data tables below 768px)
   ========================================================================== */

.zt-mlist { display: none; }
.zt-mlist.zt-mlist-on { display: block; }

/* On mobile hide the table itself plus the length menu, search, info and
   pagination — but keep the Total Records bar, centred above the cards. */
.dataTables_wrapper.zt-mlist-hidden .dataTables_length,
.dataTables_wrapper.zt-mlist-hidden .dataTables_filter,
.dataTables_wrapper.zt-mlist-hidden .dataTables_info,
.dataTables_wrapper.zt-mlist-hidden .dataTables_paginate,
.dataTables_wrapper.zt-mlist-hidden .table-responsive,
.dataTables_wrapper.zt-mlist-hidden #tableDotsLoader {
    display: none !important;
}

.dataTables_wrapper.zt-mlist-hidden #recordsBarContainer {
    text-align: center;
    margin-bottom: 4px;
}
/* #recordsBar carries an inline float: right for the desktop layout */
.dataTables_wrapper.zt-mlist-hidden #recordsBar {
    float: none !important;
    display: inline-flex !important;
}

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

.zt-mcard {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 12px 10px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 3px 8px rgba(15, 23, 42, .05);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Every value is injected as-is from the endpoint, so clamp it hard */
.zt-mcard > * { min-width: 0; }
.zt-mcard a,
.zt-mcard span,
.zt-mcard div { max-width: 100%; }

.zt-mcard-badge { margin-bottom: 4px; }
.zt-mcard-badge .badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 9px;
    border-radius: 999px;
}

.zt-mcard-img img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.zt-mcard-title,
.zt-mcard-title a {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    /* Always reserve two lines so shorter names don't shift the fields below */
    min-height: 2.6em;
}

/* The headline value — amount, goal, etc. */
.zt-mcard-lead {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
/* Amount arrives as a space-between flex row built for a table cell */
.zt-mcard-lead > div {
    justify-content: flex-start !important;
    gap: 5px;
}

/* One value per line, no label — long values are clipped, not wrapped */
.zt-mcard-meta {
    font-size: 11.5px;
    line-height: 1.45;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Opt-in labelled variant: small grey label left, value right */
.zt-mcard-meta.has-k {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: normal;
    padding: 1px 0;
}
.zt-mcard-meta.has-k .zt-mcard-k {
    flex: 0 0 50px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
}
.zt-mcard-meta.has-k .zt-mcard-v {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    color: #475569;
    word-break: break-word;
}

/* Badges arriving in a value (status, preferred areas) stay compact */
.zt-mcard-v .badge { font-size: 9.5px; padding: 2px 6px; }

.zt-mcard-actions {
    /* Pin to the bottom so buttons line up across a row of unequal cards */
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.zt-mcard-actions > div { justify-content: center !important; }
.zt-mcard-actions .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 30px;
}

/* Footer: spinner while loading, then an end / empty message */
.zt-mlist-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 14px 0 4px;
}
.zt-mlist-spin,
.zt-mlist-end,
.zt-mlist-empty { display: none; }

.zt-mlist-foot.is-loading .zt-mlist-spin { display: block; }
.zt-mlist-foot.is-end .zt-mlist-end,
.zt-mlist-foot.is-empty .zt-mlist-empty { display: block; }

.zt-mlist-end,
.zt-mlist-empty {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* One-up on very narrow phones, where two cards leave ~140px each */
@media (max-width: 359px) {
    .zt-mlist-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==============================================================
   Receipt form popup
   The shared .swal2-popup rules above pin every dialog to 420px
   and blow its text up to 1.7em, which suits a yes/no confirmation
   but not a sixteen-field form. Everything here is scoped to this
   popup, so the confirmations keep the look they have.
   ============================================================== */
.swal2-popup.receipt-popup {
    width: 880px !important;
    max-width: 96vw !important;
    padding: 0 0 16px !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28) !important;
}

/* Reads as a header bar rather than a shouted title */
.swal2-popup.receipt-popup .swal2-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    text-align: left !important;
    padding: 18px 22px 0 !important;
    margin: 0 !important;
}

.swal2-popup.receipt-popup .swal2-html-container {
    font-size: 13px !important;
    text-align: left !important;
    color: #111827 !important;
    margin: 0 !important;
    padding: 0 22px !important;

    /* The form is sized to fit, so it must not grow its own scrollbar */
    max-height: none !important;
    overflow: visible !important;
}

.swal2-popup.receipt-popup .swal2-actions {
    width: auto !important;
    justify-content: flex-end !important;
    margin: 16px 22px 0 !important;
}

.swal2-popup.receipt-popup .swal2-styled {
    padding: 8px 18px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* ---------- the form ---------- */
.receipt-form .rf-note {
    margin: 2px 0 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid #eef1f6;
    font-size: 11.5px;
    line-height: 1.5;
    color: #8b95a7;
}

.receipt-form .rf-note b {
    color: #3c8dbc;
}

/* Tighter gutters than Bootstrap's 15px, so three columns still breathe */
.receipt-form .row {
    margin-left: -6px;
    margin-right: -6px;
}

.receipt-form [class^="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

.receipt-form .form-group {
    margin-bottom: 9px;
}

.receipt-form label {
    display: block;
    margin-bottom: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8b95a7;
}

.receipt-form .form-control {
    height: 31px;
    padding: 4px 9px;
    font-size: 12.5px;
    color: #111827;
    border: 1px solid #e2e6ef;
    border-radius: 6px;
    box-shadow: none;
}

/* Locked: taken from the record and printed as it stands */
.receipt-form .form-control[readonly] {
    background: #f6f7f9;
    color: #55606e;
    cursor: default;
}

/* The three that can be changed carry a blue edge, so which ones are
   in play is obvious without reading the note */
.receipt-form .rf-editable .form-control {
    background: #fff;
    border-left: 3px solid #3c8dbc;
}

.receipt-form .rf-editable .form-control:focus {
    border-color: #3c8dbc;
    box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.15);
}

.receipt-form .rf-editable .form-control::placeholder {
    color: #b6bdc9;
}

.receipt-form .input-group-addon {
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #55606e;
    background: #f6f7f9;
    border: 1px solid #e2e6ef;
    border-right: 0;
    border-radius: 6px 0 0 6px;
}

.receipt-form .input-group .form-control {
    border-radius: 0 6px 6px 0;
}

/* The drawer sits at z-index 9999 and its overlay at 9998 with an 8px
   backdrop-filter. The z-index rule further up only matches .swal2-center, and
   this popup opens at position 'top', so without this it rendered underneath
   the drawer and came through the overlay's blur. */
.swal2-container.receipt-popup-container {
    z-index: 1000000 !important;
}

/* The three editable boxes sit together at the foot, set off by a rule */
.receipt-form .rf-edit-row {
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid #eef1f6;
}

/* Finance import: the duplicate rows to choose from. The shared .swal2-popup
   rules pin dialogs to 420px with 1.7em text, too cramped for a table. */
.swal2-popup.import-review-popup {
    width: 720px !important;
    max-width: 96vw !important;
}

.swal2-popup.import-review-popup .swal2-html-container {
    font-size: 14px !important;
}

.import-review td,
.import-review th {
    vertical-align: middle !important;
}

/* Finance export: blue, so it is not mistaken for the green full export beside it */
.excel-btn.finance-export-btn {
    background: linear-gradient(135deg, #2b6688, #3c8dbc) !important;
    border-color: #2b6688 !important;
    box-shadow: 0 4px 10px rgba(43, 102, 136, 0.2) !important;
}