@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.cdnfonts.com/css/baskerville');
@import url('https://fonts.cdnfonts.com/css/gotham');

html, body {
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font-family: 'Gotham', sans-serif;
    color: #1C1C18;
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Baskerville', serif;
}

.font-sans {
    font-family: 'Gotham', sans-serif;
}

/* Universal Material Symbols & Icons Font Engine (Fixes ligature raw text bug) */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp,
.material-icons,
[class*="material-symbols"] {
    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' 1 !important;
    font-feature-settings: 'liga' 1 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    vertical-align: middle;
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24;
}

/* Header Desktop Responsive Utilities (Guarantees topbar elements always show properly on desktop view) */
@media (min-width: 768px) {
    .header-desktop-date {
        display: flex !important;
    }
    .header-desktop-divider {
        display: block !important;
    }
}
@media (min-width: 1024px) {
    .header-desktop-toggle {
        display: flex !important;
    }
}
@media (min-width: 640px) {
    .header-desktop-admin {
        display: inline-block !important;
    }
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 350, 'GRAD' 0, 'opsz' 24 !important;
}

/* Universal Hardware-Accelerated Status & Dot Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.92);
    }
}
@-webkit-keyframes pulse {
    0%, 100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
    50% {
        opacity: 0.35;
        -webkit-transform: scale(0.92);
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    will-change: opacity, transform !important;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}
@-webkit-keyframes ping {
    75%, 100% {
        -webkit-transform: scale(2);
        opacity: 0;
    }
}
.animate-ping {
    animation: ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite !important;
    -webkit-animation: ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite !important;
    will-change: opacity, transform !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translateY(4px); }
    to { opacity: 1; -webkit-transform: translateY(0); }
}
.animate-fadeIn {
    animation: fadeIn 0.25s ease-out forwards !important;
    -webkit-animation: fadeIn 0.25s ease-out forwards !important;
}

/* Page Level Vertical Scrollbar (Far Right Edge of Screen) */
html {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #AE9A64 #E8DFC9;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #E8DFC9;
}

::-webkit-scrollbar-thumb {
    background: #AE9A64;
    border-radius: 9999px;
    min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background: #988452;
}

/* Hide scrollbars on internal elements where unwanted (e.g. Live Notifications) */
#live-notifications-list,
.no-scrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#live-notifications-list::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Custom Visible Luxury Gold Horizontal Scroller for Kanban Board */
.kanban-scroller {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: thin !important;
    scrollbar-color: #AE9A64 #E8DFC9 !important;
}

.kanban-scroller::-webkit-scrollbar {
    display: block !important;
    height: 9px !important;
}

.kanban-scroller::-webkit-scrollbar-track {
    background: #E8DFC9;
    border-radius: 9999px;
}

.kanban-scroller::-webkit-scrollbar-thumb {
    background: #AE9A64;
    border-radius: 9999px;
}

.kanban-scroller::-webkit-scrollbar-thumb:hover {
    background: #988452;
}

.kanban-scroller {
    scrollbar-width: thin;
    scrollbar-color: #AE9A64 #E8DFC9;
    overflow-x: auto;
}

/* Custom Border Left 3 Utility */
.border-l-3 {
    border-left-width: 3px !important;
}

/* Kanban Card Stage Styling via data-stage */
.kanban-card[data-stage="pending"] { border-left-color: #f59e0b !important; }
.kanban-card[data-stage="pending"]:hover { border-color: rgba(251, 191, 36, 0.8) !important; box-shadow: 0 6px 18px rgba(245, 158, 11, 0.12) !important; }
.kanban-card[data-stage="pending"] .card-action-btn { background-color: #f59e0b !important; }
.kanban-card[data-stage="pending"] .card-action-btn:hover { background-color: #d97706 !important; }
.kanban-card[data-stage="pending"] .card-status-badge { color: #b45309 !important; background-color: #fef3c7 !important; border-color: #fde68a !important; }
.kanban-card[data-stage="pending"] .card-status-dot { background-color: #f59e0b !important; }

.kanban-card[data-stage="in-progress"] { border-left-color: #AE9A64 !important; }
.kanban-card[data-stage="in-progress"]:hover { border-color: #AE9A64 !important; box-shadow: 0 6px 18px rgba(174, 154, 100, 0.18) !important; }
.kanban-card[data-stage="in-progress"] .card-action-btn { background-color: #AE9A64 !important; }
.kanban-card[data-stage="in-progress"] .card-action-btn:hover { background-color: #988452 !important; }
.kanban-card[data-stage="in-progress"] .card-status-badge { color: #AE9A64 !important; background-color: rgba(174, 154, 100, 0.12) !important; border-color: rgba(174, 154, 100, 0.3) !important; }
.kanban-card[data-stage="in-progress"] .card-status-dot { background-color: #AE9A64 !important; }

.kanban-card[data-stage="for-approval"] { border-left-color: #9333ea !important; }
.kanban-card[data-stage="for-approval"]:hover { border-color: #c084fc !important; box-shadow: 0 6px 18px rgba(168, 85, 247, 0.15) !important; }
.kanban-card[data-stage="for-approval"] .card-action-btn { background-color: #9333ea !important; }
.kanban-card[data-stage="for-approval"] .card-action-btn:hover { background-color: #7e22ce !important; }
.kanban-card[data-stage="for-approval"] .card-status-badge { color: #7e22ce !important; background-color: #f3e8ff !important; border-color: #e9d5ff !important; }
.kanban-card[data-stage="for-approval"] .card-status-dot { background-color: #9333ea !important; }

.kanban-card[data-stage="completed"] { border-left-color: #2A6A48 !important; }
.kanban-card[data-stage="completed"]:hover { border-color: #2A6A48 !important; box-shadow: 0 6px 18px rgba(42, 106, 72, 0.15) !important; }
.kanban-card[data-stage="completed"] .card-action-btn { background-color: #2A6A48 !important; }
.kanban-card[data-stage="completed"] .card-action-btn:hover { background-color: #205238 !important; }
.kanban-card[data-stage="completed"] .card-status-badge { color: #2A6A48 !important; background-color: #ecfdf5 !important; border-color: #a7f3d0 !important; }
.kanban-card[data-stage="completed"] .card-status-dot { background-color: #2A6A48 !important; }

.kanban-card[data-stage="collapsed"] { border-left-color: #94a3b8 !important; opacity: 0.85; }
.kanban-card[data-stage="collapsed"]:hover { border-color: #94a3b8 !important; opacity: 1; box-shadow: 0 6px 18px rgba(100, 116, 139, 0.12) !important; }
.kanban-card[data-stage="collapsed"] .card-action-btn { background-color: #64748b !important; }
.kanban-card[data-stage="collapsed"] .card-action-btn:hover { background-color: #475569 !important; }
.kanban-card[data-stage="collapsed"] .card-status-badge { color: #64748b !important; background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; }
.kanban-card[data-stage="collapsed"] .card-status-dot { background-color: #64748b !important; }

/* Drag and Drop visual feedback */
.kanban-cards.drag-over { background-color: rgba(174, 154, 100, 0.08); outline: 2px dashed #AE9A64; border-radius: 0.5rem; }

/* Sidebar Collapse (Full Width Mode) */
#sidebar, #main-wrapper, #main-header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed #sidebar {
    transform: translateX(-100%);
}

body.sidebar-collapsed #main-wrapper {
    padding-left: 0 !important;
}

body.sidebar-collapsed #main-header {
    left: 0 !important;
}

/* Stepper Active & Done States */
.step-indicator.active .step-circle { background-color: #AE9A64 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(174,154,100,0.35); outline: 4px solid rgba(174,154,100,0.2); }
.step-indicator.active .step-label { color: #514554 !important; font-weight: 600 !important; }
.step-indicator.done .step-circle { background-color: #514554 !important; color: #fff !important; }
.step-indicator.done .step-label { color: #514554 !important; font-weight: 500 !important; }
.step-indicator .step-check,
.step-indicator:not(.done) .step-check { display: none !important; }
.step-indicator .step-num,
.step-indicator:not(.done) .step-num { display: inline-block !important; }
.step-indicator.done .step-num { display: none !important; }
.step-indicator.done .step-check { display: inline-block !important; }

/* ==========================================
   Sidebar Navigation: Hover & Active Box
   ========================================== */
.nav-menu-item,
.nav-sub-item {
    border-left: 2px solid transparent !important;
    color: rgba(81, 69, 84, 0.75) !important;
    background-color: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
}

.nav-menu-item .material-symbols-outlined {
    color: rgba(81, 69, 84, 0.75);
    transition: color 0.2s ease;
}

.nav-sub-item .material-symbols-outlined {
    color: rgba(81, 69, 84, 0.7);
    transition: color 0.2s ease;
}

/* Soft hover on unclicked items */
.nav-menu-item:hover,
.nav-sub-item:hover {
    background-color: #ffffff !important;
    color: #514554 !important;
    border-left-color: rgba(174, 154, 100, 0.45) !important;
    box-shadow: 0 1px 4px rgba(81, 69, 84, 0.04) !important;
}

.nav-menu-item:hover .material-symbols-outlined,
.nav-sub-item:hover .material-symbols-outlined {
    color: #AE9A64 !important;
}

/* Box Style: SIRF CLICKED (ACTIVE) MODULE PE */
.nav-menu-item.active,
.nav-sub-item.active {
    background-color: #ffffff !important;
    color: #514554 !important;
    font-weight: 600 !important;
    border-left-color: #AE9A64 !important;
    box-shadow: 0 2px 6px rgba(81, 69, 84, 0.07) !important;
}

.nav-menu-item.active .material-symbols-outlined,
.nav-sub-item.active .material-symbols-outlined {
    color: #AE9A64 !important;
}

/* Clear duplicate Tailwind Forms SVG background chevron from custom-styled selects */
select.appearance-none {
    background-image: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
select.appearance-none::-ms-expand {
    display: none;
}

/* Agent My Training high-scanability grid */
@media (min-width: 1024px) {
    .mytraining-grid {
        display: grid !important;
        grid-template-columns: 2.8fr 1.6fr 1.6fr 1.4fr 2.2fr 1.8fr !important;
        gap: 1.5rem !important;
    }
}

/* Trade List Table & Card Grid */
.tradelist-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .agent-table-header {
        display: grid !important;
    }
    .tradelist-grid,
    .lg\:tradelist-grid {
        display: grid !important;
        grid-template-columns: 2.5fr 1.8fr 1.7fr 1fr 1.3fr 1.6fr 0.8fr !important;
        gap: 1.25rem !important;
        align-items: center !important;
    }
}

/* Agent My Trades Grid */
.mytradelist-grid {
    display: grid !important;
    grid-template-columns: minmax(160px, 2.1fr) minmax(130px, 1.35fr) minmax(130px, 1.35fr) minmax(100px, 1.45fr) minmax(70px, 0.9fr) minmax(120px, 1.5fr) minmax(130px, 1.6fr) minmax(50px, 0.55fr) !important;
    gap: 1rem !important;
    align-items: center !important;
    min-width: 900px;
}

@media (min-width: 1024px) {
    .mytradelist-grid {
        display: grid !important;
        grid-template-columns: 2.1fr 1.35fr 1.35fr 1.45fr 0.9fr 1.5fr 1.6fr 0.55fr !important;
        gap: 1rem !important;
        align-items: center !important;
        min-width: unset;
    }
}

/* Kanban Horizontal Scroller */
.kanban-scroller {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #AE9A64 #F1EFE9;
}
.kanban-scroller::-webkit-scrollbar {
    height: 7px;
}
.kanban-scroller::-webkit-scrollbar-track {
    background: #F1EFE9;
    border-radius: 9999px;
}
.kanban-scroller::-webkit-scrollbar-thumb {
    background-color: #AE9A64;
    border-radius: 9999px;
}

/* Animations & Notification Transitions */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.2s ease-out forwards;
}

.notification-row {
    transition: all 0.2s ease;
}

/* ==========================================
   Brand Luxury Flatpickr Datepicker Theme
   ========================================== */
.flatpickr-calendar {
    background: #FFFFFF !important;
    border: 1px solid #E8DFC9 !important;
    box-shadow: 0 10px 25px -5px rgba(81, 69, 84, 0.12), 0 8px 10px -6px rgba(81, 69, 84, 0.08) !important;
    border-radius: 12px !important;
    font-family: 'Gotham', sans-serif !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}
.flatpickr-months {
    background: #FAFAFA !important;
    border-bottom: 1px solid #E8DFC9 !important;
    padding: 6px 0 !important;
}
.flatpickr-current-month {
    color: #514554 !important;
    font-weight: 600 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #514554 !important;
    font-weight: 700 !important;
}
span.flatpickr-weekday {
    color: #756F68 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #AE9A64 !important;
    border-color: #AE9A64 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
.flatpickr-day:hover {
    background: #F7F4EC !important;
    border-color: #E8DFC9 !important;
    color: #514554 !important;
}
.flatpickr-day.today {
    border-color: #AE9A64 !important;
}

/* ==========================================
   Global MM/DD/YYYY Date Input Styling
   ========================================== */
input[data-is-date="true"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23756F68' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px 18px !important;
    padding-right: 38px !important;
    cursor: pointer !important;
}
input[data-is-date="true"]:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23AE9A64' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E") !important;
}

/* ==========================================
   Brand Luxury Summernote Lite Theme
   ========================================== */
.note-editor.note-frame {
    border: 1px solid #E8DFC9 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: none !important;
    font-family: 'Gotham', sans-serif !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
}
.note-editor.note-frame.focus,
.note-editor.note-frame:focus-within {
    border-color: #AE9A64 !important;
    box-shadow: 0 0 0 1px rgba(174, 154, 100, 0.35) !important;
}
.note-toolbar {
    background-color: #FAFAFA !important;
    border-bottom: 1px solid #E8DFC9 !important;
    padding: 8px 10px !important;
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
}
.note-btn-group .note-btn {
    border: 1px solid #E8DFC9 !important;
    background-color: #FFFFFF !important;
    color: #514554 !important;
    border-radius: 6px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    margin-right: 2px !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
}
.note-btn-group .note-btn:hover,
.note-btn-group .note-btn.active {
    background-color: #F7F4EB !important;
    color: #AE9A64 !important;
    border-color: #AE9A64 !important;
}
.note-editable {
    font-size: 13px !important;
    color: #1C1C18 !important;
    background-color: #FFFFFF !important;
    min-height: 140px !important;
    padding: 14px 16px !important;
    line-height: 1.6 !important;
    font-family: 'Gotham', sans-serif !important;
}
.note-placeholder {
    padding: 14px 16px !important;
    font-size: 13px !important;
    color: #756F68 !important;
    opacity: 0.6 !important;
}
.note-statusbar {
    background-color: #FAFAFA !important;
    border-top: 1px solid #E8DFC9 !important;
    border-bottom-left-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}
.note-statusbar .note-resizebar {
    padding-top: 2px !important;
    height: 10px !important;
}
.note-dropdown-menu {
    border-radius: 8px !important;
    border: 1px solid #E8DFC9 !important;
    box-shadow: 0 4px 12px rgba(81, 69, 84, 0.1) !important;
    font-size: 12.5px !important;
}
.note-modal .modal-content {
    border-radius: 12px !important;
    border: 1px solid #E8DFC9 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================
   Tab Segment Navigation (.tab-btn, .resource-tab-btn, .allot-tab-btn)
   ========================================== */
.tab-btn,
.resource-tab-btn,
.allot-tab-btn {
    background-color: #FFFFFF !important;
    color: #514554 !important;
    border: 1px solid #E8DFC9 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none;
}
.tab-btn {
    background-color: transparent !important;
    color: #756F68 !important;
    border-color: transparent !important;
}
.tab-btn .material-symbols-outlined,
.resource-tab-btn .material-symbols-outlined,
.allot-tab-btn .material-symbols-outlined {
    color: #756F68 !important;
    transition: color 0.2s ease !important;
}
.tab-btn .tab-badge,
.resource-tab-btn .tab-badge,
.allot-tab-btn .tab-badge {
    background-color: #FAFAFA !important;
    color: #514554 !important;
    border: 1px solid #E8DFC9 !important;
    transition: all 0.2s ease !important;
}
.tab-btn:hover:not(.active),
.resource-tab-btn:hover:not(.active),
.allot-tab-btn:hover:not(.active),
.results-view-tab-btn:hover:not(.active) {
    background-color: #FAFAFA !important;
    border-color: #AE9A64 !important;
    color: #AE9A64 !important;
    box-shadow: 0 2px 8px rgba(174, 154, 100, 0.15) !important;
}
.tab-btn:hover:not(.active) .material-symbols-outlined,
.resource-tab-btn:hover:not(.active) .material-symbols-outlined,
.allot-tab-btn:hover:not(.active) .material-symbols-outlined,
.results-view-tab-btn:hover:not(.active) .material-symbols-outlined {
    color: #AE9A64 !important;
}
.tab-btn:hover:not(.active) .tab-badge,
.resource-tab-btn:hover:not(.active) .tab-badge,
.allot-tab-btn:hover:not(.active) .tab-badge,
.results-view-tab-btn:hover:not(.active) .tab-badge {
    background-color: rgba(174, 154, 100, 0.15) !important;
    color: #AE9A64 !important;
    border-color: rgba(174, 154, 100, 0.3) !important;
}
.tab-btn.active,
.resource-tab-btn.active,
.allot-tab-btn.active,
.results-view-tab-btn.active {
    background-color: #514554 !important;
    color: #FFFFFF !important;
    border-color: #514554 !important;
    box-shadow: 0 2px 8px rgba(81, 69, 84, 0.2) !important;
}
.tab-btn.active:hover,
.resource-tab-btn.active:hover,
.allot-tab-btn.active:hover,
.results-view-tab-btn.active:hover {
    background-color: #3e3441 !important;
    color: #FFFFFF !important;
    border-color: #3e3441 !important;
}
.tab-btn.active .material-symbols-outlined,
.resource-tab-btn.active .material-symbols-outlined,
.allot-tab-btn.active .material-symbols-outlined,
.results-view-tab-btn.active .material-symbols-outlined {
    color: #AE9A64 !important;
}
.tab-btn.active .tab-badge,
.resource-tab-btn.active .tab-badge,
.allot-tab-btn.active .tab-badge,
.results-view-tab-btn.active .tab-badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

/* Question Sequence Sidebar & Reorder Styles */
.sidebar-q-item {
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}
.sidebar-q-item.is-dragging {
    opacity: 0.45 !important;
    border-style: dashed !important;
    border-color: #AE9A64 !important;
    background-color: #FAFAFA !important;
    transform: scale(0.98);
}
.sidebar-q-item.drag-over {
    border-color: #AE9A64 !important;
    background-color: #FAFAFA !important;
    box-shadow: 0 0 0 2px rgba(174, 154, 100, 0.35) !important;
}
.question-block.question-highlight-pulse {
    box-shadow: 0 0 0 3px rgba(174, 154, 100, 0.4), 0 8px 20px -4px rgba(81, 69, 84, 0.12) !important;
    border-color: #AE9A64 !important;
}

/* ==========================================================
   Mobile & Cross-Device Responsiveness Utilities
   ========================================================== */
.flatpickr-day.today {
    border-color: #AE9A64 !important;
}

/* ==========================================
   Brand Luxury Summernote Lite Theme
   ========================================== */
.note-editor.note-frame {
    border: 1px solid #E8DFC9 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: none !important;
    font-family: 'Gotham', sans-serif !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
}
.note-editor.note-frame.focus,
.note-editor.note-frame:focus-within {
    border-color: #AE9A64 !important;
    box-shadow: 0 0 0 1px rgba(174, 154, 100, 0.35) !important;
}
.note-toolbar {
    background-color: #FAFAFA !important;
    border-bottom: 1px solid #E8DFC9 !important;
    padding: 8px 10px !important;
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
}
.note-btn-group .note-btn {
    border: 1px solid #E8DFC9 !important;
    background-color: #FFFFFF !important;
    color: #514554 !important;
    border-radius: 6px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    margin-right: 2px !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
}
.note-btn-group .note-btn:hover,
.note-btn-group .note-btn.active {
    background-color: #F7F4EB !important;
    color: #AE9A64 !important;
    border-color: #AE9A64 !important;
}
.note-editable {
    font-size: 13px !important;
    color: #1C1C18 !important;
    background-color: #FFFFFF !important;
    min-height: 140px !important;
    padding: 14px 16px !important;
    line-height: 1.6 !important;
    font-family: 'Gotham', sans-serif !important;
}
.note-placeholder {
    padding: 14px 16px !important;
    font-size: 13px !important;
    color: #756F68 !important;
    opacity: 0.6 !important;
}
.note-statusbar {
    background-color: #FAFAFA !important;
    border-top: 1px solid #E8DFC9 !important;
    border-bottom-left-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}
.note-statusbar .note-resizebar {
    padding-top: 2px !important;
    height: 10px !important;
}
.note-dropdown-menu {
    border-radius: 8px !important;
    border: 1px solid #E8DFC9 !important;
    box-shadow: 0 4px 12px rgba(81, 69, 84, 0.1) !important;
    font-size: 12.5px !important;
}
.note-modal .modal-content {
    border-radius: 12px !important;
    border: 1px solid #E8DFC9 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================
   Tab Segment Navigation (.tab-btn, .resource-tab-btn, .allot-tab-btn)
   ========================================== */
/* ==========================================
   Tab Segment Navigation (.tab-btn, .resource-tab-btn, .allot-tab-btn, .results-view-tab-btn)
   ========================================== */
.tab-btn,
.resource-tab-btn,
.allot-tab-btn,
.results-view-tab-btn {
    background-color: #FFFFFF !important;
    color: #514554 !important;
    border: 1.5px solid #D5CEBF !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none;
    box-shadow: 0 1px 3px rgba(81, 69, 84, 0.05) !important;
}
.tab-btn {
    background-color: transparent !important;
    color: #756F68 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.tab-btn .material-symbols-outlined,
.resource-tab-btn .material-symbols-outlined,
.allot-tab-btn .material-symbols-outlined,
.results-view-tab-btn .material-symbols-outlined {
    color: #7A687D !important;
    transition: color 0.2s ease !important;
}
.tab-btn .tab-badge,
.resource-tab-btn .tab-badge,
.allot-tab-btn .tab-badge,
.results-view-tab-btn .tab-badge {
    background-color: #F7F4EC !important;
    color: #514554 !important;
    border: 1px solid #D5CEBF !important;
    transition: all 0.2s ease !important;
}
.tab-btn:hover:not(.active),
.resource-tab-btn:hover:not(.active),
.allot-tab-btn:hover:not(.active),
.results-view-tab-btn:hover:not(.active) {
    background-color: #FAFAFA !important;
    border-color: #AE9A64 !important;
    color: #AE9A64 !important;
    box-shadow: 0 2px 8px rgba(174, 154, 100, 0.15) !important;
}
.tab-btn:hover:not(.active) .material-symbols-outlined,
.resource-tab-btn:hover:not(.active) .material-symbols-outlined,
.allot-tab-btn:hover:not(.active) .material-symbols-outlined,
.results-view-tab-btn:hover:not(.active) .material-symbols-outlined {
    color: #AE9A64 !important;
}
.tab-btn:hover:not(.active) .tab-badge,
.resource-tab-btn:hover:not(.active) .tab-badge,
.allot-tab-btn:hover:not(.active) .tab-badge,
.results-view-tab-btn:hover:not(.active) .tab-badge {
    background-color: rgba(174, 154, 100, 0.15) !important;
    color: #AE9A64 !important;
    border-color: rgba(174, 154, 100, 0.3) !important;
}
.tab-btn.active,
.resource-tab-btn.active,
.allot-tab-btn.active,
.results-view-tab-btn.active {
    background-color: #514554 !important;
    color: #FFFFFF !important;
    border-color: #3E3441 !important;
    box-shadow: 0 2px 8px rgba(81, 69, 84, 0.22) !important;
}
.tab-btn.active:hover,
.resource-tab-btn.active:hover,
.allot-tab-btn.active:hover,
.results-view-tab-btn.active:hover {
    background-color: #3e3441 !important;
    color: #FFFFFF !important;
    border-color: #3e3441 !important;
}
.results-view-tab-btn.active .material-symbols-outlined {
    color: #E2D4A8 !important;
}
.tab-btn.active .tab-badge,
.resource-tab-btn.active .tab-badge,
.allot-tab-btn.active .tab-badge,
.results-view-tab-btn.active .tab-badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

/* Question Sequence Sidebar & Reorder Styles */
.sidebar-q-item {
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}
.sidebar-q-item.is-dragging {
    opacity: 0.45 !important;
    border-style: dashed !important;
    border-color: #AE9A64 !important;
    background-color: #FAFAFA !important;
    transform: scale(0.98);
}
.sidebar-q-item.drag-over {
    border-color: #AE9A64 !important;
    background-color: #FAFAFA !important;
    box-shadow: 0 0 0 2px rgba(174, 154, 100, 0.35) !important;
}
.question-block.question-highlight-pulse {
    box-shadow: 0 0 0 3px rgba(174, 154, 100, 0.4), 0 8px 20px -4px rgba(81, 69, 84, 0.12) !important;
    border-color: #AE9A64 !important;
}

/* ==========================================================
   Mobile & Cross-Device Responsiveness Utilities
   ========================================================== */
.kanban-scroller,
.table-responsive,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023.98px) {
    /* Mobile Roster & List Cards */
    .mobile-card-row {
        padding: 1rem !important;
        border-radius: 0.75rem !important;
    }
    
    /* Smooth horizontal stepper for wizards */
    .wizard-stepper-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wizard-stepper-scroll/* Page Level Vertical Scrollbar (Far Right Edge of Screen) */
html {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #AE9A64 #E8DFC9;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #E8DFC9;
}

::-webkit-scrollbar-thumb {
    background: #AE9A64;
    border-radius: 9999px;
    min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background: #988452;
}

/* Hide scrollbars on internal elements where unwanted (e.g. Live Notifications) */
#live-notifications-list,
.no-scrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#live-notifications-list::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

    /* 1. Tradelist Mobile Card Grid */
    .tradelist-table-header {
        display: none !important;
    }
    .trade-row {
        padding: 0.85rem 0.95rem !important;
        border-radius: 0.85rem !important;
    }
    .trade-row .tradelist-grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto auto !important;
        row-gap: 0.45rem !important;
        column-gap: 0.65rem !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Row 1 Left (Col 1, Row 1): Property Title & MLS # */
    .trade-row .tradelist-grid > div:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        align-self: start !important;
    }
    .trade-row .tradelist-grid > div:nth-child(1) .font-serif {
        font-size: 14.5px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .trade-row .tradelist-grid > div:nth-child(1) span:last-child {
        font-size: 10.5px !important;
        margin-top: 0.15rem !important;
    }

    /* Row 1 Right (Col 2, Row 1): 3-Dots Actions Menu */
    .trade-row .tradelist-grid > div:nth-child(7) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: start !important;
        margin-top: -0.15rem !important;
    }
    .trade-row .tradelist-grid > div:nth-child(7) button {
        width: 1.85rem !important;
        height: 1.85rem !important;
    }

    /* Row 2 Left (Col 1, Row 2): Trade Type & Trade No. */
    .trade-row .tradelist-grid > div:nth-child(2) {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        min-width: 0 !important;
        margin-top: 0.1rem !important;
        font-size: 11.5px !important;
    }
    .trade-row .tradelist-grid > div:nth-child(2) span:first-child {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #514554 !important;
    }

    /* Row 2 Right (Col 2, Row 2): Status Badge */
    .trade-row .tradelist-grid > div:nth-child(6) {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        justify-self: end !important;
        align-self: center !important;
        text-align: right !important;
    }
    .trade-row .tradelist-grid > div:nth-child(6) span {
        font-size: 10.5px !important;
    }

    /* Row 3 Left (Col 1, Row 3 - with Dashed Top Divider): Brokerage */
    .trade-row .tradelist-grid > div:nth-child(3) {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
        min-width: 0 !important;
        padding-top: 0.45rem !important;
        margin-top: 0.2rem !important;
        border-top: 1px dashed #E8DFC9 !important;
        font-size: 11px !important;
        color: #7A687D !important;
    }
    .trade-row .tradelist-grid > div:nth-child(3) span:first-child {
        font-size: 11.5px !important;
        font-weight: 500 !important;
        color: #514554 !important;
    }

    /* Row 3 Right (Col 2, Row 3 - with Dashed Top Divider): Client Badge */
    .trade-row .tradelist-grid > div:nth-child(4) {
        grid-column: 2 / 3 !important;
        grid-row: 3 / 4 !important;
        justify-self: end !important;
        align-self: center !important;
        padding-top: 0.45rem !important;
        margin-top: 0.2rem !important;
        border-top: 1px dashed #E8DFC9 !important;
    }
    .trade-row .tradelist-grid > div:nth-child(4) span {
        font-size: 10px !important;
        padding: 0.15rem 0.5rem !important;
    }

    /* Row 4 (Col 1 / 3, Row 4): Contract Date */
    .trade-row .tradelist-grid > div:nth-child(5) {
        grid-column: 1 / 3 !important;
        grid-row: 4 / 5 !important;
        justify-self: start !important;
        align-self: center !important;
        font-size: 11px !important;
        color: #7A687D !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        padding-top: 0.25rem !important;
    }
    .trade-row .tradelist-grid > div:nth-child(5)::before {
        content: "calendar_today";
        font-family: 'Material Symbols Outlined';
        font-size: 13px;
        color: #AE9A64;
    }

    /* 2. Agent Management (Index.cshtml) Mobile Card Grid */
    .agent-table-header {
        display: none !important;
    }

    .agent-row-grid {
        display: grid !important;
        grid-template-columns: 1fr auto auto !important;
        gap: 0.35rem 0.5rem !important;
        align-items: center !important;
    }
    /* Row 1 Left: Avatar, Name, Phone (Fully visible, no truncation) */
    .agent-row-grid > div:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    .agent-row-grid > div:nth-child(1) img {
        width: 2.25rem !important; /* 36px */
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        flex-shrink: 0 !important;
    }
    .agent-row-grid > div:nth-child(1) .font-serif {
        font-size: 14px !important;
        line-height: 1.25 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .agent-row-grid > div:nth-child(1) div.font-sans {
        font-size: 11px !important;
        margin-top: 0.15rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .agent-row-grid > div:nth-child(1) div.font-sans span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    /* Row 1 Middle-Right: Status (Active / Renewal Due / Inactive) - Side-by-side with 3-dots, no crowding */
    .agent-row-grid > div:nth-child(5) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        padding-right: 0.15rem !important;
    }
    .agent-row-grid > div:nth-child(5) span {
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }
    /* Row 1 Far-Right: 3-dots actions menu - Clearly separated */
    .agent-row-grid > div:nth-child(6) {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Row 2: Email & Password on the SAME ROW (Full width spanning all columns) */
    .agent-row-grid > div:nth-child(2) {
        grid-column: 1 / 4 !important;
        grid-row: 2 / 3 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        padding-top: 0.35rem !important;
        padding-bottom: 0.45rem !important;
        border-bottom: 1px dashed #E8DFC9 !important;
    }
    .agent-row-grid > div:nth-child(2) > span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 11.5px !important;
    }
    .agent-row-grid > div:nth-child(2) > div {
        flex-shrink: 0 !important;
    }
    /* Row 3 Left: License No & Expiry */
    .agent-row-grid > div:nth-child(3) {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
        align-self: center !important;
        padding-top: 0.25rem !important;
        border-top: none !important;
    }
    .agent-row-grid > div:nth-child(3) span:first-child {
        font-size: 11.5px !important;
        font-weight: 600 !important;
    }
    .agent-row-grid > div:nth-child(3) span:last-child {
        font-size: 10px !important;
    }
    /* Row 3 Right: Group (Residential Team, etc.) on the SAME ROW */
    .agent-row-grid > div:nth-child(4) {
        grid-column: 2 / 4 !important;
        grid-row: 3 / 4 !important;
        justify-self: end !important;
        align-self: center !important;
        padding-top: 0.25rem !important;
        border-top: none !important;
    }
    .agent-row-grid > div:nth-child(4) span {
        font-size: 10px !important;
        padding: 0.15rem 0.45rem !important;
    }
    .agent-row-grid > div:nth-child(4) .material-symbols-outlined {
        font-size: 12px !important;
    }

    /* 3. Documents (Documents.cshtml) Mobile Card Grid */
    .doc-row-grid {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.5rem 0.75rem !important;
        align-items: center !important;
    }
    .doc-row-grid > div:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        background: #F7F4EC;
        border: 1px solid #E8DFC9;
        border-radius: 6px;
        padding: 2px 8px;
        font-weight: 600;
        font-size: 11.5px;
    }
    .doc-row-grid > div:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        min-width: 0;
    }
    .doc-row-grid > div:nth-child(4) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        justify-self: end;
    }
    .doc-row-grid > div:nth-child(3) {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        padding-top: 0.4rem;
        border-top: 1px dashed #E8DFC9;
    }

    /* 4. Login History (Loginhistory.cshtml) Mobile Card Grid */
    .login-row-grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 0.65rem 0.75rem !important;
        align-items: center !important;
    }
    .login-row-grid > div:nth-child(1) {
        grid-column: 1 / 2;
        min-width: 0;
    }
    .login-row-grid > div:nth-child(5) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        justify-self: end;
    }
    .login-row-grid > div:nth-child(3) {
        grid-column: 1 / 2;
    }
    .login-row-grid > div:nth-child(4) {
        grid-column: 2 / 3;
        justify-self: end;
        text-align: right;
    }
    .login-row-grid > div:nth-child(2) {
        grid-column: 1 / 3;
        padding-top: 0.4rem;
        border-top: 1px dashed #E8DFC9;
    }

    /* 5. Training List (Traininglist.cshtml) Mobile Card Grid */
    .training-table-header {
        display: none !important;
    }

    .training-card-row {
        padding: 0.85rem 0.95rem !important;
        border-radius: 0.85rem !important;
    }

    .training-row-grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        row-gap: 0.5rem !important;
        column-gap: 0.65rem !important;
        align-items: start !important;
        padding: 0 !important;
    }

    /* Row 1, Col 1: Icon + Full Training Title + Subtitle */
    .training-row-grid > div:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        align-self: start !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.65rem !important;
    }
    .training-row-grid > div:nth-child(1) > div:first-child {
        width: 2.35rem !important;
        height: 2.35rem !important;
        min-width: 2.35rem !important;
        border-radius: 8px !important;
    }
    .training-row-grid > div:nth-child(1) > div:first-child .material-symbols-outlined {
        font-size: 18px !important;
    }
    .training-row-grid > div:nth-child(1) span.training-title,
    .training-row-grid > div:nth-child(1) span.font-serif {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        display: block !important;
    }
    .training-row-grid > div:nth-child(1) span.text-brand-muted {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        margin-top: 0.15rem !important;
        display: block !important;
    }

    /* Row 1, Col 2: 3-dots Menu Button (Top Right) */
    .training-row-grid > div:nth-child(6) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: start !important;
        margin-top: -0.15rem !important;
        margin-right: -0.25rem !important;
    }

    /* Row 1, Col 2: Status (Published / Draft) placed directly below 3-dots button */
    .training-row-grid > div:nth-child(5) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: start !important;
        margin-top: 1.85rem !important;
        padding: 0 !important;
    }
    .training-row-grid > div:nth-child(5) > span {
        font-size: 10.5px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }

    /* Row 2: Continuous Dashed Divider with Start & End Dates (Left) and Passing Marks (Right) */
    /* Row 2 Left: Start & End Date */
    .training-row-grid > div:nth-child(2) {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        justify-self: start !important;
        padding-top: 0.45rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px dashed #E8DFC9 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.15rem !important;
    }
    .training-row-grid > div:nth-child(2) span:first-child {
        font-size: 11.5px !important;
        font-weight: 500 !important;
        color: #514554 !important;
        line-height: 1.25 !important;
    }
    .training-row-grid > div:nth-child(2) span:first-child::before {
        content: "Start: ";
        color: #7A687D;
        font-size: 10.5px;
        font-weight: 400;
    }
    .training-row-grid > div:nth-child(2) span:last-child {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #7A687D !important;
        line-height: 1.25 !important;
    }
    .training-row-grid > div:nth-child(2) span:last-child::before {
        content: "End: ";
        color: #7A687D;
        font-size: 10.5px;
        font-weight: 400;
    }

    /* Row 2 Right: Passing Marks */
    .training-row-grid > div:nth-child(3) {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        justify-self: end !important;
        text-align: right !important;
        padding-top: 0.45rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px dashed #E8DFC9 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 0.1rem !important;
    }
    .training-row-grid > div:nth-child(3) .font-serif {
        font-size: 13.5px !important;
    }
    .training-row-grid > div:nth-child(3) span {
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }

    /* Row 3: Continuous Dashed Divider with Completion (Left) and Target Allotment (Right) */
    .training-row-grid > div:nth-child(4) {
        grid-column: 1 / 3 !important;
        grid-row: 3 / 4 !important;
        padding-top: 0.45rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px dashed #E8DFC9 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-align: left !important;
    }
    .training-row-grid > div:nth-child(4) > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }
    .training-row-grid > div:nth-child(4) > div:first-child span {
        font-size: 11.5px !important;
    }
    .training-row-grid > div:nth-child(4) > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        text-align: right !important;
        justify-content: flex-end !important;
    }
    .training-row-grid > div:nth-child(4) > div:last-child span {
        font-size: 11px !important;
    }
    .training-row-grid > div:nth-child(4) > div:last-child .material-symbols-outlined {
        font-size: 14px !important;
    }

    /* 6. Training Details Learners (Trainingdetails.cshtml) Mobile Card Grid */
    .trainee-row-grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 0.65rem 0.75rem !important;
        align-items: center !important;
    }
    .trainee-row-grid > div:nth-child(1) {
        grid-column: 1 / 2;
        min-width: 0;
    }
    .trainee-row-grid > div:nth-child(5) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        justify-self: end;
    }
    .trainee-row-grid > div:nth-child(4) {
        grid-column: 1 / 2;
    }
    .trainee-row-grid > div:nth-child(2) {
        grid-column: 2 / 3;
        justify-self: end;
        text-align: right;
    }
    .trainee-row-grid > div:nth-child(3) {
        grid-column: 1 / 3;
        font-size: 11px;
        color: #756F68;
    }

    /* 7. Quiz & Exam Results (Results.cshtml) - defined in dedicated Results section below */

    /* 8. Notification Center (Notification.cshtml) Mobile Card Grid */
    .notif-row-grid {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.5rem 0.75rem !important;
        align-items: center !important;
    }
    .notif-row-grid > div:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .notif-row-grid > div:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        min-width: 0;
    }
    .notif-row-grid > div:nth-child(6) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        justify-self: end;
    }
    .notif-row-grid > div:nth-child(3) {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
    .notif-row-grid > div:nth-child(4) {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }
    /* 9. Resource List (Resourcelist.cshtml) Mobile Card Grid */
    .resource-row-card {
        padding: 0.75rem 0.85rem !important;
    }
    .resource-row-card > .grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 0.5rem 0.75rem !important;
        align-items: start !important;
    }
    /* Part 1: Title & icon */
    .resource-row-card > .grid > div:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        min-width: 0;
    }
    /* Part 3: Action button moved to top-right corner */
    .resource-row-card > .grid > div:nth-child(3) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        justify-self: end;
        align-self: start;
    }
    /* Part 2: 4 column meta info moved below as a neat 2-col grid */
    .resource-row-card > .grid > div:nth-child(2) {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.4rem 0.6rem !important;
        padding-top: 0.45rem !important;
        border-top: 1px dashed #E8DFC9 !important;
    }
}

@media (max-width: 639px) {
    /* Compact Stat Banner on Small Screens */
    .stat-display-numeral {
        font-size: 1.75rem !important;
        line-height: 1.1 !important;
    }

    /* Fixed header clearance on mobile */
    main {
        padding-top: 4.75rem !important;
    }

    /* Universal Mobile Card Row Padding & Sizing */
    .resource-row-card,
    .trade-row,
    .agent-row-grid,
    .doc-row-grid,
    .login-row-grid,
    .training-card-row,
    .trainee-row-grid,
    .result-row-grid,
    .notif-row-grid,
    .mobile-card-row {
        padding: 0.75rem 0.8rem !important;
        border-radius: 0.75rem !important;
    }

    /* Compact Top Header Action Buttons Across All Admin Pages */
    main a[href*="Add"],
    main button[id*="btn-open-add"],
    main a.bg-brand-gold,
    main button.bg-brand-gold,
    .btn-mobile-compact {
        height: 1.85rem !important; /* ~29px */
        min-height: 1.85rem !important;
        padding: 0.2rem 0.65rem !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.05em !important;
        width: auto !important;
        display: inline-flex !important;
        align-self: center !important;
        border-radius: 6px !important;
    }
    main a[href*="Add"] .material-symbols-outlined,
    main button[id*="btn-open-add"] .material-symbols-outlined,
    main a.bg-brand-gold .material-symbols-outlined,
    main button.bg-brand-gold .material-symbols-outlined {
        font-size: 14px !important;
    }

    /* Compact Filter Container */
    .bg-white:has(.mobile-filter-grid),
    div.bg-white.rounded-lg.px-4.py-3 {
        padding: 0.5rem 0.65rem !important;
        margin-bottom: 0.75rem !important;
        gap: 0.4rem !important;
    }

    /* Mobile 2-Column Filter Grid (Clean side-by-side compact selects) */
    .mobile-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.35rem 0.5rem !important;
        width: 100% !important;
    }
    .mobile-filter-grid > * {
        width: 100% !important;
    }
    .mobile-filter-grid select,
    .mobile-filter-grid input {
        width: 100% !important;
        height: 2rem !important; /* 32px */
        min-height: 2rem !important;
        font-size: 11px !important;
        padding: 0.2rem 0.5rem !important;
        padding-right: 1.35rem !important;
        border-radius: 6px !important;
        line-height: 1.2 !important;
    }
    .mobile-filter-grid button {
        width: 100% !important;
        height: 2rem !important; /* 32px */
        min-height: 2rem !important;
        font-size: 11px !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 6px !important;
        line-height: 1.2 !important;
        justify-content: center !important;
    }
    .mobile-filter-grid .material-symbols-outlined {
        font-size: 14px !important;
        right: 0.3rem !important;
    }

    /* Filter Search Input */
    div.relative > input[placeholder*="Search"] {
        height: 2rem !important; /* 32px */
        font-size: 11.5px !important;
        padding-left: 1.85rem !important;
        padding-right: 0.5rem !important;
        border-radius: 6px !important;
    }
    div.relative > span.material-symbols-outlined:first-child {
        font-size: 20px !important;
        left: 0.5rem !important;
    }

    /* Compact Action Menus and Action Buttons */
    .action-menu-btn {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    .action-menu-btn .material-symbols-outlined {
        font-size: 16px !important;
    }

    /* Compact header bar on small screens */
    #main-header input[placeholder*="Search"] {
        height: 2rem !important;
        font-size: 11px !important;
        padding-left: 1.85rem !important;
        padding-right: 0.5rem !important;
    }
}

@media (max-width: 767.98px) {
    /* Wizard Stepper: Mobile view only shows rounded circles and connector lines, hiding all labels/headings */
    .wizard-stepper-scroll {
        overflow-x: visible !important;
        padding: 0.75rem 0.85rem !important;
    }
    .wizard-stepper-scroll > div {
        min-width: 0 !important;
        width: 100% !important;
    }
    .step-indicator > *:not(.step-circle) {
        display: none !important;
    }
    .step-indicator {
        gap: 0 !important;
    }
    .step-line {
        margin-left: 0.35rem !important;
        margin-right: 0.35rem !important;
    }

    /* Agent Management (Index.cshtml) Mobile-Only Fixes */
    /* 1. Header Action Button: Display only compact 'Add Agent' text on mobile, preventing horizontal overflow */
    main a[href*="Addagent"] span.sm\:inline,
    main a[href*="Add"] span.sm\:inline {
        display: none !important;
    }
    main a[href*="Addagent"] span.sm\:hidden,
    main a[href*="Add"] span.sm\:hidden {
        display: inline !important;
    }

    /* 2. Agent Cards: Guarantee adequate width and prevent name & phone truncation on mobile */
    .agent-row-grid {
        grid-template-columns: minmax(150px, 1fr) auto auto !important;
    }
    .agent-row-grid > div:nth-child(1) {
        min-width: 0 !important;
    }
    .agent-row-grid > div:nth-child(1) .font-serif {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.25 !important;
        font-size: 14px !important;
    }
    .agent-row-grid > div:nth-child(1) div.font-sans,
    .agent-row-grid > div:nth-child(1) div.font-sans span {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    /* Learning Resources (Resourcelist.cshtml) Mobile-Only Fixes */
    /* 1. Hide Table Header Row on Mobile */
    .resource-table-header {
        display: none !important;
    }

    /* 2. Top Header Action Button */
    main a[href*="Addresouce"] span.sm\:inline {
        display: none !important;
    }
    main a[href*="Addresouce"] span.sm\:hidden {
        display: inline !important;
    }

    /* 3. Resource Cards Mobile Layout */
    .resource-row-card {
        padding: 0.75rem 0.85rem !important;
    }
    .resource-row-card > .grid {
        display: grid !important;
        grid-template-columns: 2.5rem 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 0.65rem !important;
        row-gap: 0.35rem !important;
        align-items: start !important;
    }

    /* Un-nest containers to allow free placement across grid rows */
    .resource-row-card > .grid > div:nth-child(1),
    .resource-row-card > .grid > div:nth-child(1) > div:nth-of-type(2),
    .resource-row-card > .grid > div:nth-child(2) {
        display: contents !important;
    }

    /* Row 1, Col 1: Checkbox (Top Left) */
    .resource-row-card > .grid > div:nth-child(1) > input.resource-row-checkbox {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        margin: 0 !important;
        margin-top: 0.15rem !important;
        justify-self: center !important;
        align-self: start !important;
    }

    /* Square Box Icon (Aa, Video, PDF) directly below Checkbox with small gap */
    .resource-row-card > .grid > div:nth-child(1) > div:nth-of-type(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        justify-self: center !important;
        align-self: start !important;
        margin: 0 !important;
        margin-top: 1.4rem !important; /* ~22px, placing it ~4px below the 16px checkbox */
    }

    /* Row 1, Col 2: Heading (Top, beside Checkbox with equal alignment) */
    .resource-row-card > .grid > div:nth-child(1) > div:nth-of-type(2) > span.font-serif {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        font-size: 13.5px !important;
        line-height: 1.25 !important;
        display: block !important;
        font-weight: 600 !important;
        margin: 0 !important;
        padding-right: 0.2rem !important;
        align-self: start !important;
    }

    /* Row 1, Col 3: Actions 3-dots button (Top Right) */
    .resource-row-card > .grid > div:nth-child(3) {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: start !important;
        margin-top: -0.15rem !important;
    }

    /* STATUS ("Published" / "Draft") placed directly below 3-dots button */
    .resource-row-card > .grid > div:nth-child(2) > div:nth-child(3) {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: start !important;
        margin: 0 !important;
        margin-top: 1.75rem !important; /* placed neatly directly below 3-dots button */
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .resource-row-card > .grid > div:nth-child(2) > div:nth-child(3) > span {
        font-size: 10.5px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* Row 2: Dashed Divider Line + Meta Info (Type & Category) */
    /* Col 1-2: Type (Article / Text, Video, PDF) */
    .resource-row-card > .grid > div:nth-child(2) > div:nth-child(1) {
        grid-column: 1 / 3 !important;
        grid-row: 2 / 3 !important;
        justify-self: start !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        padding-top: 0.4rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px dashed #E8DFC9 !important;
        width: 100% !important;
        font-size: 11.5px !important;
    }
    /* Col 3: Category (Compliance, Video Library, etc.) */
    .resource-row-card > .grid > div:nth-child(2) > div:nth-child(2) {
        grid-column: 3 / 4 !important;
        grid-row: 2 / 3 !important;
        justify-self: end !important;
        text-align: right !important;
        padding-top: 0.4rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px dashed #E8DFC9 !important;
    }
    .resource-row-card > .grid > div:nth-child(2) > div:nth-child(2) span {
        display: inline-block !important;
        background-color: #F7F4EC !important;
        border: 1px solid #E8DFC9 !important;
        border-radius: 4px !important;
        padding: 0.15rem 0.5rem !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        color: #514554 !important;
    }

    /* Row 3: "Essential to Read" / Subtitle box (Bottom Left) */
    .resource-row-card > .grid > div:nth-child(1) > div:nth-of-type(2) > div.mt-1,
    .resource-row-card > .grid > div:nth-child(1) > div:nth-of-type(2) > span.text-\[11px\],
    .resource-row-card > .grid > div:nth-child(1) > div:nth-of-type(2) > *:not(.font-serif) {
        grid-column: 1 / 3 !important;
        grid-row: 3 / 4 !important;
        justify-self: start !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Col 3: Updated Date (Oct 24, 2026 by Admin) */
    .resource-row-card > .grid > div:nth-child(2) > div:nth-child(4) {
        grid-column: 3 / 4 !important;
        grid-row: 3 / 4 !important;
        justify-self: end !important;
        text-align: right !important;
        margin: 0 !important;
    }

    /* Resource Details (Resourcedetails.cshtml) Top Action Buttons Equal Alignment & Sizing */
    #resourcedetails-page-container .flex.items-center.gap-2.w-full.sm\:w-auto > * {
        height: 2.15rem !important; /* ~34px */
        min-height: 2.15rem !important;
        max-height: 2.15rem !important;
        padding: 0 0.55rem !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }
    #resourcedetails-page-container .flex.items-center.gap-2.w-full.sm\:w-auto .material-symbols-outlined {
        font-size: 14px !important;
    }

    /* Resource Details Segmented Control Tabs (No overflow or cut-off) */
    .res-segmented-tabs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.25rem !important;
    }
    .res-segmented-tabs .res-tab-btn {
        width: 100% !important;
        padding: 0.5rem 0.35rem !important;
        font-size: 10.5px !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    .res-segmented-tabs .res-tab-btn .material-symbols-outlined {
        font-size: 20px !important;
    }

    /* Allotted Agent Cards (Resourcedetails.cshtml) Mobile Card Grid */
    .allotted-agent-card {
        padding: 0.75rem 0.85rem !important;
        border-radius: 0.75rem !important;
    }
    .allotted-agent-card > .grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 0.45rem 0.65rem !important;
        align-items: center !important;
    }
    
    /* Row 1 Left: Agent Avatar, Name, Email */
    .allotted-agent-card > .grid > div:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.65rem !important;
    }
    .allotted-agent-card > .grid > div:nth-child(1) .w-10.h-10 {
        width: 2.25rem !important;
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        font-size: 12.5px !important;
        flex-shrink: 0 !important;
    }
    .allotted-agent-card > .grid > div:nth-child(1) .font-serif {
        font-size: 13.5px !important;
        line-height: 1.25 !important;
    }
    .allotted-agent-card > .grid > div:nth-child(1) span:last-child {
        font-size: 11px !important;
    }

    /* Row 1 Right: Actions (Remind / Revoke buttons) */
    .allotted-agent-card > .grid > div:nth-child(4) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }
    .allotted-agent-card > .grid > div:nth-child(4) button {
        padding: 0.2rem 0.55rem !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        height: 1.85rem !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Row 2: Dashed Divider Line with Assigned Group (Left) and View Status (Right) */
    /* Row 2 Left: Assigned Group (Residential Team, Commercial Team, etc.) */
    .allotted-agent-card > .grid > div:nth-child(2) {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        padding-top: 0.4rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px dashed #E8DFC9 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }
    .allotted-agent-card > .grid > div:nth-child(2) .material-symbols-outlined {
        font-size: 20px !important;
    }
    .allotted-agent-card > .grid > div:nth-child(2) span:last-child {
        font-size: 11.5px !important;
        font-weight: 500 !important;
    }

    /* Row 2 Right: View Status & Allotted Date */
    .allotted-agent-card > .grid > div:nth-child(3) {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        justify-self: end !important;
        text-align: right !important;
        padding-top: 0.4rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px dashed #E8DFC9 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }
    .allotted-agent-card > .grid > div:nth-child(3) span:first-child {
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }
    .allotted-agent-card > .grid > div:nth-child(3) span:last-child {
        font-size: 9.5px !important;
        white-space: nowrap !important;
    }

    /* Resource Details Header Badges/Pills Single Row on Mobile */
    .resource-meta-pills {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 0.35rem !important;
        width: 100% !important;
        margin-top: 0.35rem !important;
        margin-bottom: 0.15rem !important;
        padding-bottom: 0.1rem !important;
    }
    .resource-meta-pills::-webkit-scrollbar {
        display: none !important;
    }
    .resource-meta-pills > span {
        padding: 0.18rem 0.5rem !important;
        font-size: 10.5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: 1.25 !important;
    }
    .resource-meta-pills .material-symbols-outlined {
        font-size: 12.5px !important;
    }
    .resource-meta-pills .animate-pulse {
        width: 5px !important;
        height: 5px !important;
    }

    /* ======================================================== */
    /* Addtraining.cshtml Mobile Optimizations                  */
    /* ======================================================== */

    /* 1. Cover Thumbnail / Icon Card */
    .cover-thumbnail-card {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 0.75rem 0.85rem !important;
        align-items: start !important;
        padding: 0.85rem !important;
    }
    .cover-thumbnail-card > div:first-child {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        width: 3.25rem !important;
        height: 3.25rem !important;
        min-width: 3.25rem !important;
    }
    .cover-thumbnail-card > div:first-child .material-symbols-outlined {
        font-size: 26px !important;
    }
    .cover-thumbnail-card > div:nth-child(2) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
    }
    .cover-thumbnail-card > div:nth-child(2) span:first-child {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }
    .cover-thumbnail-card > div:nth-child(2) span:last-child {
        font-size: 11px !important;
        line-height: 1.35 !important;
        margin-top: 0.2rem !important;
        display: block !important;
    }
    .cover-thumbnail-card > button {
        grid-column: 1 / 3 !important;
        grid-row: 2 / 3 !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 0.5rem 1rem !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        background: #ffffff !important;
        border-radius: 6px !important;
    }

    /* 2. Learning Resources Type Filter Tabs (Step 2) */
    .learning-resource-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
        width: 100% !important;
        padding-bottom: 0.25rem !important;
    }
    .learning-resource-tabs .resource-tab-btn {
        width: 100% !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 0.45rem 0.5rem !important;
        font-size: 11.5px !important;
        gap: 0.35rem !important;
    }
    .learning-resource-tabs .resource-tab-btn .material-symbols-outlined {
        font-size: 20px !important;
    }
    .learning-resource-tabs .resource-tab-btn .tab-badge {
        font-size: 9.5px !important;
        padding: 0.1rem 0.35rem !important;
    }

    /* "2 Items" Badge Pill Single Line (Step 2) */
    #resource-tab-count-badge {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.2rem 0.55rem !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    /* 3. Questions & Options Overflow Fix (Step 3) */
    .question-block {
        padding: 0.85rem 0.75rem !important;
        border-radius: 0.75rem !important;
    }
    .option-row {
        gap: 0.45rem !important;
        padding: 0.45rem 0.55rem !important;
    }
    .option-row .inp-option-text {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 12px !important;
    }
    .badge-correct {
        padding: 0.15rem 0.4rem !important;
        font-size: 9.5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .btn-remove-option {
        padding: 0.15rem !important;
        flex-shrink: 0 !important;
    }
    .q-type-label {
        padding: 0.35rem 0.55rem !important;
        font-size: 11px !important;
        gap: 0.35rem !important;
    }

    /* 4. Training Preview Header Banner Alignment (Step 4: Edit button below icon) */
    .training-preview-card-header {
        padding: 0.85rem !important;
        display: grid !important;
        grid-template-columns: 3.5rem 1fr !important;
        column-gap: 0.75rem !important;
        row-gap: 0.45rem !important;
        align-items: start !important;
    }
    .training-preview-card-header > div:first-child {
        display: contents !important;
    }
    /* Course Thumbnail (Top Left) */
    .training-preview-card-header > div:first-child > div:first-child {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
        min-width: 3.5rem !important;
        border-radius: 8px !important;
        justify-self: center !important;
    }
    .training-preview-card-header > div:first-child > div:first-child .material-symbols-outlined {
        font-size: 26px !important;
    }
    /* Edit button placed directly below Course Thumbnail (Col 1, Row 2) */
    .training-preview-card-header > button.btn-step-jump {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        justify-self: center !important;
        align-self: start !important;
        margin-top: 0.15rem !important;
        padding: 0.25rem 0.45rem !important;
        font-size: 10px !important;
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }
    .training-preview-card-header > button.btn-step-jump .material-symbols-outlined {
        font-size: 12.5px !important;
    }
    /* Course Text Info (Col 2, spanning Rows 1 & 2) */
    .training-preview-card-header > div:first-child > div:last-child {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 3 !important;
        min-width: 0 !important;
    }
    .training-preview-card-header > div:first-child > div:last-child > span {
        font-size: 9.5px !important;
        margin-bottom: 0.15rem !important;
        display: block !important;
    }
    .training-preview-card-header > div:first-child > div:last-child > h3 {
        font-size: 20px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }
    .training-preview-card-header > div:first-child > div:last-child > p {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        margin-top: 0.35rem !important;
        color: #7A687D !important;
    }

    /* 5. Allot Training Tabs Bar (Step 5) */
    .allot-tabs-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
        width: 100% !important;
    }
    .allot-tab-btn {
        width: 100% !important;
        padding: 0.45rem 0.35rem !important;
        font-size: 11px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        gap: 0.3rem !important;
    }
    .allot-tab-btn .material-symbols-outlined {
        font-size: 20px !important;
    }
    .allot-tab-btn .tab-badge {
        font-size: 9.5px !important;
        padding: 0.1rem 0.35rem !important;
    }

    /* 6. Individual Users Card Mobile Layout (Step 5: Avatar below Checkbox) */
    #allot-users-panel .allot-card {
        display: grid !important;
        grid-template-columns: 2.25rem 1fr auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 0.65rem !important;
        row-gap: 0.25rem !important;
        align-items: center !important;
        padding: 0.75rem 0.85rem !important;
    }
    #allot-users-panel .allot-card > div:first-child {
        display: contents !important;
    }
    /* Checkbox (Col 1, Row 1) */
    #allot-users-panel .allot-card > div:first-child > input.allot-user-cb {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        justify-self: center !important;
        align-self: center !important;
        margin: 0 !important;
    }
    /* Avatar Initials Circle ("MV", "SJ", "DL") directly below Checkbox (Col 1, Row 2) */
    #allot-users-panel .allot-card > div:first-child > div.rounded-full {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        justify-self: center !important;
        align-self: center !important;
        width: 1.85rem !important;
        height: 1.85rem !important;
        font-size: 10px !important;
        margin: 0 !important;
        margin-top: 0.15rem !important;
    }
    /* User Name & Details (Col 2, spanning Rows 1 & 2) */
    #allot-users-panel .allot-card > div:first-child > div:last-child {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 3 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    #allot-users-panel .allot-card > div:first-child > div:last-child > span:first-child {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }
    #allot-users-panel .allot-card > div:first-child > div:last-child > span:last-child {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
        margin-top: 0.1rem !important;
    }
    /* Active Agent Badge (Col 3, spanning Rows 1 & 2) */
    #allot-users-panel .allot-card > span:last-child {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 3 !important;
        justify-self: end !important;
        align-self: center !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        padding: 0.15rem 0.45rem !important;
    }

    /* 7. Universal Single-Row Badge & Pill Normalization (Addtraining.cshtml) */
    .wizard-step span.rounded-full,
    .wizard-step span[class*="rounded-full"],
    .wizard-step span[class*="rounded-md"],
    .wizard-step .tab-badge,
    .wizard-step .badge-correct,
    #resource-tab-count-badge,
    .allot-card span.rounded-full,
    #allot-groups-panel .allot-card span.rounded-full,
    #allot-users-panel .allot-card span.rounded-full,
    #resource-items-container .resource-item span.rounded-full {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.25 !important;
    }

    /* Step header pills ("Step 1 of 5", "Step 2 of 5", etc.) */
    .wizard-step > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
    }
    .wizard-step > div:first-child > div:first-child {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    .wizard-step > div:first-child > span.rounded-full {
        font-size: 10px !important;
        padding: 0.2rem 0.55rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        letter-spacing: 0.08em !important;
    }

    /* Step 2 Auto-Verified Single-Line Rule */
    .auto-verified-pill,
    #step-panel-2 .auto-verified-pill,
    #step-panel-2 .text-emerald-700.font-semibold.flex.items-center {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.25rem !important;
        font-size: 11px !important;
    }
    #step-panel-2 .border-t.flex.items-center.justify-between {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
    }
    #step-panel-2 .border-t.flex.items-center.justify-between > span:first-child {
        min-width: 0 !important;
        font-size: 10.5px !important;
    }

    /* Dropzone Box & Formats Pill Mobile Adjustment (Step 2) */
    #dropzone-upload {
        padding: 1.5rem 0.5rem !important;
        min-height: 230px !important;
        overflow: hidden !important;
    }
    #dropzone-formats {
        white-space: normal !important;
        text-align: center !important;
        max-width: 95% !important;
        font-size: 9.5px !important;
        line-height: 1.35 !important;
        padding: 0.25rem 0.65rem !important;
        display: inline-block !important;
        box-sizing: border-box !important;
        border-radius: 9999px !important;
        word-break: break-word !important;
    }

    /* ======================================================== */
    /* Results.cshtml Mobile Optimizations                      */
    /* ======================================================== */

    /* 1. Top Header Action Buttons Equal Sizing & Alignment */
    #results-page-container .results-header-actions,
    #results-page-container .flex.flex-wrap.sm\:flex-nowrap.items-center.gap-3.w-full.sm\:w-auto {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    #results-page-container #btn-export-results,
    #results-page-container a[href*="Traininglist"],
    #results-page-container .btn-result-action {
        flex: 1 1 0% !important;
        width: 50% !important;
        height: 2.2rem !important; /* ~35px */
        min-height: 2.2rem !important;
        max-height: 2.2rem !important;
        padding: 0 0.5rem !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }
    #results-page-container #btn-export-results .material-symbols-outlined,
    #results-page-container a[href*="Traininglist"] .material-symbols-outlined,
    #results-page-container .btn-result-action .material-symbols-outlined {
        font-size: 20px !important;
    }

    /* 2. Hide Table Header Rows on Mobile */
    .results-table-header,
    #individual-results-container > div:first-child:not(.result-row),
    #group-results-container > div:first-child:not(.group-result-row) {
        display: none !important;
    }

    /* 3. Segmented View Switcher Tabs on Mobile */
    .results-view-tab-btn {
        padding: 0.5rem 0.4rem !important;
        font-size: 11.5px !important;
        white-space: nowrap !important;
        gap: 0.35rem !important;
    }
    .results-view-tab-btn .material-symbols-outlined {
        font-size: 16px !important;
    }
    .results-view-tab-btn .tab-badge {
        font-size: 9.5px !important;
        padding: 0.1rem 0.35rem !important;
    }

    /* 4. Individual Result Card Mobile Layout (.result-row) */
    .result-row {
        padding: 0.85rem !important;
        border-radius: 0.75rem !important;
    }
    .result-row-grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 0.35rem 0.65rem !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Row 1 Left: Agent Avatar & Name & Lic */
    .result-row-grid > div:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.65rem !important;
    }
    .result-row-grid > div:nth-child(1) img,
    .result-row-grid > div:nth-child(1) .w-10.h-10 {
        width: 2.35rem !important;
        height: 2.35rem !important;
        min-width: 2.35rem !important;
        font-size: 11.5px !important;
    }
    .result-row-grid > div:nth-child(1) .agent-name {
        font-size: 13.5px !important;
        line-height: 1.25 !important;
    }
    .result-row-grid > div:nth-child(1) span:last-child {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    /* Row 1 Right: Status Badge (PASS / FAIL) */
    .result-row-grid > div:nth-child(5) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: start !important;
        margin-top: 0.15rem !important;
    }
    .result-row-grid > div:nth-child(5) > span {
        font-size: 10.5px !important;
        padding: 0.2rem 0.55rem !important;
        white-space: nowrap !important;
    }
    .result-row-grid > div:nth-child(5) .material-symbols-outlined {
        font-size: 13px !important;
    }

    /* Row 2: Training Title - Left Aligned with School Icon */
    .result-row-grid > div:nth-child(2) {
        grid-column: 1 / 3 !important;
        grid-row: 2 / 3 !important;
        justify-self: start !important;
        align-self: center !important;
        text-align: left !important;
        width: 100% !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #514554 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        margin: 0 !important;
        margin-top: 0.25rem !important;
        padding: 0 !important;
        border: none !important;
    }
    .result-row-grid > div:nth-child(2)::before {
        content: "school";
        font-family: 'Material Symbols Outlined';
        font-size: 15px;
        color: #AE9A64;
        font-weight: normal;
        width: 16px;
        text-align: center;
        flex-shrink: 0;
        display: inline-block;
    }

    /* Row 3: Group Name - Left Aligned with Apartment Icon (Equal alignment with Training) */
    .result-row-grid > div:nth-child(3) {
        grid-column: 1 / 3 !important;
        grid-row: 3 / 4 !important;
        justify-self: start !important;
        align-self: center !important;
        text-align: left !important;
        width: 100% !important;
        font-size: 11.5px !important;
        color: #7A687D !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        margin: 0 !important;
        margin-top: 0.2rem !important;
        padding: 0 !important;
        padding-bottom: 0.5rem !important;
        border: none !important;
        border-bottom: 1px dashed #E8DFC9 !important;
    }
    .result-row-grid > div:nth-child(3) .material-symbols-outlined {
        font-size: 20px !important;
        color: #AE9A64 !important;
        width: 16px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        display: inline-block !important;
    }

    /* Row 4 Left: Score with label */
    .result-row-grid > div:nth-child(4) {
        grid-column: 1 / 2 !important;
        grid-row: 4 / 5 !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 0.35rem !important;
    }
    .result-row-grid > div:nth-child(4)::before {
        content: "Score:";
        font-size: 10.5px;
        font-weight: 600;
        color: #7A687D;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .result-row-grid > div:nth-child(4) .font-serif {
        font-size: 20px !important;
        font-weight: 700 !important;
    }

    /* Row 4 Right: Attempts with label */
    .result-row-grid > div:nth-child(7) {
        grid-column: 2 / 3 !important;
        grid-row: 4 / 5 !important;
        justify-self: end !important;
        text-align: right !important;
    }
    .result-row-grid > div:nth-child(7) > span {
        font-size: 10.5px !important;
        padding: 0.15rem 0.5rem !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    .result-row-grid > div:nth-child(7) > span::before {
        content: "Attempts: ";
        font-weight: 500;
        color: #7A687D;
    }

    /* Row 5 Left: Completion Date */
    .result-row-grid > div:nth-child(6) {
        grid-column: 1 / 2 !important;
        grid-row: 5 / 6 !important;
        font-size: 11px !important;
        color: #7A687D !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
    }
    .result-row-grid > div:nth-child(6)::before {
        content: "calendar_today";
        font-family: 'Material Symbols Outlined';
        font-size: 13px;
        color: #AE9A64;
        font-weight: normal;
    }

    /* Row 5 Right: Action View Button */
    .result-row-grid > div:nth-child(8) {
        grid-column: 2 / 3 !important;
        grid-row: 5 / 6 !important;
        justify-self: end !important;
        align-self: center !important;
    }
    .result-row-grid > div:nth-child(8) button {
        height: 1.85rem !important; /* ~29px */
        padding: 0 0.65rem !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    .result-row-grid > div:nth-child(8) button .material-symbols-outlined {
        font-size: 14px !important;
    }

    /* 5. Group Result Card Mobile Layout (.group-result-row) */
    .group-result-row {
        padding: 0.85rem !important;
        border-radius: 0.75rem !important;
    }
    .group-result-row > .grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr auto !important;
        gap: 0.4rem 0.5rem !important;
        align-items: center !important;
    }

    /* Row 1 Left: Group Icon & Name */
    .group-result-row > .grid > div:nth-child(1) {
        grid-column: 1 / 3 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.65rem !important;
    }
    .group-result-row > .grid > div:nth-child(1) .w-10.h-10 {
        width: 2.35rem !important;
        height: 2.35rem !important;
        min-width: 2.35rem !important;
    }
    .group-result-row > .grid > div:nth-child(1) .group-name {
        font-size: 13.5px !important;
        line-height: 1.25 !important;
    }
    .group-result-row > .grid > div:nth-child(1) span:last-child {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    /* Row 1 Right: Status Badge */
    .group-result-row > .grid > div:nth-child(7) {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important;
        align-self: start !important;
        margin-top: 0.15rem !important;
    }
    .group-result-row > .grid > div:nth-child(7) > span {
        font-size: 10.5px !important;
        padding: 0.2rem 0.55rem !important;
        white-space: nowrap !important;
    }
    .group-result-row > .grid > div:nth-child(7) .material-symbols-outlined {
        font-size: 13px !important;
    }

    /* Row 2: Agents Count Mini Metric Cards */
    .group-result-row > .grid > div:nth-child(2) {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        text-align: center !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        color: #514554 !important;
        background: #FAFAFA !important;
        border: 1px solid #E8DFC9 !important;
        border-radius: 6px !important;
        padding: 0.25rem 0.35rem !important;
        white-space: nowrap !important;
    }
    .group-result-row > .grid > div:nth-child(2)::before {
        content: "Agents: ";
        font-weight: 500;
        color: #7A687D;
    }

    .group-result-row > .grid > div:nth-child(3) {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        text-align: center !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        color: #047857 !important;
        background: #F0FDF4 !important;
        border: 1px solid #DCFCE7 !important;
        border-radius: 6px !important;
        padding: 0.25rem 0.35rem !important;
        white-space: nowrap !important;
    }
    .group-result-row > .grid > div:nth-child(3)::before {
        content: "Done: ";
        font-weight: 500;
        color: #047857;
    }

    .group-result-row > .grid > div:nth-child(4) {
        grid-column: 3 / 4 !important;
        grid-row: 2 / 3 !important;
        text-align: center !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        color: #B45309 !important;
        background: #FFFBEB !important;
        border: 1px solid #FEF3C7 !important;
        border-radius: 6px !important;
        padding: 0.25rem 0.35rem !important;
        white-space: nowrap !important;
    }
    .group-result-row > .grid > div:nth-child(4)::before {
        content: "Pending: ";
        font-weight: 500;
        color: #B45309;
    }

    /* Row 3: Avg Score, Pass Rate, Action View Button (with top dashed divider) */
    .group-result-row > .grid > div:nth-child(5) {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
        border-top: 1px dashed #E8DFC9 !important;
        padding-top: 0.45rem !important;
        margin-top: 0.15rem !important;
        font-size: 11.5px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }
    .group-result-row > .grid > div:nth-child(5)::before {
        content: "Avg:";
        font-size: 10.5px;
        color: #7A687D;
        font-weight: 600;
    }
    .group-result-row > .grid > div:nth-child(5) .w-12 {
        display: none !important;
    }

    .group-result-row > .grid > div:nth-child(6) {
        grid-column: 2 / 3 !important;
        grid-row: 3 / 4 !important;
        border-top: 1px dashed #E8DFC9 !important;
        padding-top: 0.45rem !important;
        margin-top: 0.15rem !important;
        font-size: 11.5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }
    .group-result-row > .grid > div:nth-child(6)::before {
        content: "Pass:";
        font-size: 10.5px;
        color: #7A687D;
        font-weight: 600;
    }

    .group-result-row > .grid > div:nth-child(8) {
        grid-column: 3 / 4 !important;
        grid-row: 3 / 4 !important;
        border-top: 1px dashed #E8DFC9 !important;
        padding-top: 0.45rem !important;
        margin-top: 0.15rem !important;
        justify-self: end !important;
        align-self: center !important;
    }
    .group-result-row > .grid > div:nth-child(8) button {
        height: 1.85rem !important;
        padding: 0 0.65rem !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    .group-result-row > .grid > div:nth-child(8) button .material-symbols-outlined {
        font-size: 14px !important;
    }

    /* 6. Universal Pills single line in Results */
    .result-row span.rounded-full,
    .group-result-row span.rounded-full {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   Agent Dashboard Mobile View Custom Responsive Overrides
   ========================================================================== */

/* Mobile Screens (< 640px) */
@media (max-width: 639px) {
    /* 1. My Trades Section - Top Header */
    .mobile-trades-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    .mobile-trades-title {
        font-size: 20px !important;
        white-space: nowrap !important;
    }
    .mobile-trades-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .mobile-view-all {
        font-size: 10px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }
    .mobile-new-trade-btn {
        font-size: 10px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
        border-radius: 4px !important;
    }

    /* 2. My Trades Filter Toggle Buttons (Active, Pending, Completed) */
    .mobile-trades-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        padding: 3px !important;
        background-color: #F5F2EC !important;
        border-radius: 8px !important;
        border: 1px solid #E8DFC9 !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }
    .mobile-trades-tab-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        line-height: 1 !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        text-align: center !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        white-space: nowrap !important;
        border: 1px solid transparent !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .mobile-trades-tab-btn.active,
    .mobile-trades-tab-btn.bg-white {
        background-color: #FFFFFF !important;
        color: #514554 !important;
        font-weight: 700 !important;
        border-color: #E8DFC9 !important;
        box-shadow: 0 1px 3px rgba(81, 69, 84, 0.1) !important;
    }

    /* 3. My Trades Table (Touch Horizontal Scroll & Zero Clipping) */
    .mobile-trades-table-wrapper {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: calc(100% + 32px) !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
    .mobile-trades-table {
        min-width: 780px !important;
        width: 780px !important;
        font-size: 11px !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
    }
    .mobile-trades-table th,
    .mobile-trades-table td {
        padding: 9px 8px !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        overflow: visible !important;
    }
    .mobile-col-num { width: 50px !important; }
    .mobile-col-address { width: 190px !important; }
    .mobile-col-type { width: 110px !important; }
    .mobile-col-client { width: 75px !important; }
    .mobile-col-status { width: 95px !important; }
    .mobile-col-progress { width: 100px !important; }
    .mobile-col-nextstep { width: 130px !important; }
    .mobile-col-updated { width: 80px !important; text-align: right !important; }

    /* 4. Training & Resources Header (Icon at Top, Heading Below Icon) */
    .mobile-training-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    .mobile-training-header-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .mobile-training-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 2px !important;
    }
    .mobile-training-text-heading {
        font-size: 17px !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }
    .mobile-training-text-sub {
        font-size: 11px !important;
        margin-top: 2px !important;
    }
    .mobile-training-view-all {
        font-size: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        margin-top: 4px !important;
    }
    .training-tab-btn {
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* 5. Training Cards Action Button ("Start Now" Right Next to Video 18m) */
    .mobile-card-meta-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
    .mobile-card-inline-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 10px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    @media (max-width: 767.98px) {

        .quick-action-card {
            width: 100% !important;
            min-width: 0 !important;
            padding: 0.75rem !important;
            gap: 0.5rem !important;
            box-sizing: border-box !important;
        }

            .quick-action-card > div:first-child {
                min-width: 0 !important;
                flex: 1 1 auto !important;
                gap: 0.65rem !important;
            }

                .quick-action-card > div:first-child > div:last-child {
                    min-width: 0 !important;
                    flex: 1 1 auto !important;
                    overflow: hidden !important;
                }

                .quick-action-card > div:first-child span {
                    max-width: 100% !important;
                }

            .quick-action-card > span.material-symbols-outlined {
                flex: 0 0 auto !important;
                margin-left: 0 !important;
            }
    }
    @media (max-width: 639px) {
        .quick-link-trade {
            height: auto !important;
            min-height: 0 !important;
            padding: 0.75rem !important;
        }
    }
    /* My Trades - Mobile Header Fix */
    @media (max-width: 639px) {

        #my-trades-container .mobile-trades-header > div:first-child {
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

        #my-trades-container .mobile-trades-actions {
            flex: 0 0 auto !important;
            gap: 6px !important;
        }

            #my-trades-container .mobile-trades-actions .quick-action-card {
                width: auto !important;
                min-width: 0 !important;
                padding: 8px 10px !important;
                gap: 4px !important;
                justify-content: center !important;
            }

                #my-trades-container .mobile-trades-actions .quick-action-card span {
                    white-space: nowrap !important;
                }
        /* My Trades Table - Mobile Responsive */
        @media (max-width: 639px) {

            #my-trades-container .mobile-trades-table {
                width: 100% !important;
                min-width: 0 !important;
                table-layout: fixed !important;
            }

                /* Hide less important columns on mobile */
                #my-trades-container .mobile-trades-table th:nth-child(4),
                #my-trades-container .mobile-trades-table td:nth-child(4),
                #my-trades-container .mobile-trades-table th:nth-child(5),
                #my-trades-container .mobile-trades-table td:nth-child(5),
                #my-trades-container .mobile-trades-table th:nth-child(6),
                #my-trades-container .mobile-trades-table td:nth-child(6),
                #my-trades-container .mobile-trades-table th:nth-child(7),
                #my-trades-container .mobile-trades-table td:nth-child(7),
                #my-trades-container .mobile-trades-table th:nth-child(8),
                #my-trades-container .mobile-trades-table td:nth-child(8) {
                    display: none !important;
                }

                /* Mobile column widths */
                #my-trades-container .mobile-trades-table th:nth-child(1),
                #my-trades-container .mobile-trades-table td:nth-child(1) {
                    width: 48px !important;
                }

                #my-trades-container .mobile-trades-table th:nth-child(2),
                #my-trades-container .mobile-trades-table td:nth-child(2) {
                    width: auto !important;
                }

                #my-trades-container .mobile-trades-table th:nth-child(3),
                #my-trades-container .mobile-trades-table td:nth-child(3) {
                    width: 75px !important;
                }

                /* Keep address inside the screen */
                #my-trades-container .mobile-trades-table td:nth-child(2) {
                    white-space: normal !important;
                    overflow-wrap: break-word !important;
                }
        }
    }
}



/* --------------------------------------------------------------
   Agent Profile Page � Mobile-only fixes (max-width: 639px)
   Desktop is completely untouched by all rules below.
   -------------------------------------------------------------- */
@media (max-width: 639px) {

    /* Fix 1: Title row � heading & Edit button on same line */
    #agent-profile-title-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #agent-profile-title-row h1 { font-size: 24px !important; }
    #agent-profile-title-row .edit-btn-wrap { flex-shrink: 0 !important; }

    /* Fix 2: Right meta strip � vertical stack left-aligned */
    #agent-meta-strip {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    #agent-meta-strip > div {
        padding-left: 0 !important;
        padding-top: 0 !important;
        border: none !important;
    }

    /* Fix 3: Basic Information fields � 2 columns per row */
    #basic-info-fields > div {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Fix 4: Quick Insights � 2 cards per row */
    #quick-insights-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Fix 5: Onboarding card header � heading & Step 4 badge on one line */
    #onboarding-card-header h3 {
        font-size: 13px !important;
    }
    #onboarding-card-header > span {
        font-size: 9px !important;
        padding: 2px 6px !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
    }
}

/* --------------------------------------------------------------
   My Trade List Page � Mobile-only fixes (max-width: 639px)
   Desktop is completely untouched by all rules below.
   -------------------------------------------------------------- */
@media (max-width: 639px) {

    /* -- 1. Filter bar: remove horizontal scroll, show selects in 2-col grid -- */
    /* Override the outer filter bar to wrap properly */
    #tradelist-filter-selects {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }
    /* Each select wrapper fills its grid cell */
    #tradelist-filter-selects > div {
        width: 100% !important;
    }
    /* Each select fills the wrapper */
    #tradelist-filter-selects > div > select {
        width: 100% !important;
    }

    /* -- 2. Hide table header row on mobile -- */
    #tradelist-header-row {
        display: none !important;
    }

    /* -- 3. Trade rows: convert from grid to card layout -- */
    /* Remove horizontal scroll wrapper constraints */
    #trades-container {
        min-width: 0 !important;
    }

    /* Each trade row becomes a card */
    .trade-row {
        padding: 14px 16px !important;
    }

    /* Override the inner grid to become a stacked card layout */
    .trade-row .mytradelist-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    /* Col 1 (Property & MLS): full width, allow wrapping */
    .trade-row .mytradelist-grid > div:nth-child(1) span.truncate {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* Col 2 (Trade Type), Col 3 (Brokerage), Col 4 (Dates): shown inline in a 2-col mini grid */
    .trade-row .mytradelist-grid > div:nth-child(2),
    .trade-row .mytradelist-grid > div:nth-child(3),
    .trade-row .mytradelist-grid > div:nth-child(4) {
        font-size: 11.5px !important;
    }

    /* Pair Type+Client and Brokerage+Dates side by side using a row layout */
    .trade-row .mytradelist-grid > div:nth-child(2),
    .trade-row .mytradelist-grid > div:nth-child(4) {
        flex: 1 !important;
    }

    /* Group cols 2-5 into a 2x2 mini grid */
    .trade-row .mytradelist-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 8px 12px !important;
    }

    /* Col 1 Property: span full width (top) */
    .trade-row .mytradelist-grid > div:nth-child(1) {
        grid-column: 1 / -1 !important;
    }

    /* Col 6 Work Status: span full width */
    .trade-row .mytradelist-grid > div:nth-child(6) {
        grid-column: 1 / -1 !important;
    }

    /* Col 7 Status + upload btn: span full width */
    .trade-row .mytradelist-grid > div:nth-child(7) {
        grid-column: 1 / -1 !important;
        padding-left: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Col 8 Actions: span full width, align right */
    .trade-row .mytradelist-grid > div:nth-child(8) {
        grid-column: 1 / -1 !important;
        justify-content: flex-end !important;
        border-top: 1px solid #E8DFC9;
        padding-top: 8px !important;
        margin-top: 2px !important;
    }
}

/* My Trade List � additional mobile overrides */
@media (max-width: 639px) {

    /* Search box: remove min-width so it fills available space */
    #tradelist-filter-bar > div:first-child {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Remove outer horizontal scroll; cards stack vertically */
    #trades-container {
        overflow-x: visible !important;
    }
}

/* -- 3. Trade rows: New Structured Layout as Requested (Overrides previous) -- */
@media (max-width: 639px) {
    /* Override the inner grid to become a custom structured card layout */
    .trade-row .mytradelist-grid {
        display: grid !important;
        grid-template-columns: 1fr max-content !important;
        grid-auto-rows: min-content !important;
        gap: 10px 12px !important;
        min-width: 0 !important;
    }

    /* LEFT SIDE */
    /* Col 1 (Property & MLS): Left, Row 1 */
    .trade-row .mytradelist-grid > div:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }
    
    /* Col 2 (Trade Type): Left, Row 2 */
    .trade-row .mytradelist-grid > div:nth-child(2) {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    /* Col 3 (Brokerage): Left, Row 3 */
    .trade-row .mytradelist-grid > div:nth-child(3) {
        grid-column: 1 / 2 !important;
        grid-row: 3 !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    /* RIGHT SIDE */
    /* Col 8 (Actions): Right, Row 1 (Top) */
    .trade-row .mytradelist-grid > div:nth-child(8) {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: -6px !important;
        margin-right: -8px !important;
    }
    .trade-row .mytradelist-grid > div:nth-child(8) .action-dropdown {
        right: 0 !important;
    }

    /* Col 4 (Dates): Right, Row 2 */
    .trade-row .mytradelist-grid > div:nth-child(4) {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
        align-items: flex-end !important;
        text-align: right !important;
        justify-content: center !important;
    }

    /* Col 5 (Client): Right, Row 3 */
    .trade-row .mytradelist-grid > div:nth-child(5) {
        grid-column: 2 / 3 !important;
        grid-row: 3 !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
    }

    /* Col 7 (Status): Right, Row 4 */
    .trade-row .mytradelist-grid > div:nth-child(7) {
        grid-column: 2 / 3 !important;
        grid-row: 4 !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        padding-left: 0 !important;
        flex-direction: column !important; /* Stack pills neatly on the right */
        gap: 6px !important;
    }

    /* BOTTOM */
    /* Col 6 (Work Status): Spans Both Columns, Bottom Row (Row 5) */
    .trade-row .mytradelist-grid > div:nth-child(6) {
        grid-column: 1 / 3 !important;
        grid-row: 5 !important;
        margin-top: 6px !important;
        padding-right: 0 !important;
        border-top: 1px solid #E8DFC9 !important;
        padding-top: 12px !important;
    }
}

/* -- Trade row property name fix: single line with smaller font -- */
@media (max-width: 639px) {
    .trade-row .mytradelist-grid > div:nth-child(1) span.truncate {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* -- Shift Client name to the left side -- */
@media (max-width: 639px) {
    /* Move Client to Left column (col 1), Row 4 */
    .trade-row .mytradelist-grid > div:nth-child(5) {
        grid-column: 1 / 2 !important;
        grid-row: 4 !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
}

/* -- Move Status up to fill the gap left by Client -- */
@media (max-width: 639px) {
    .trade-row .mytradelist-grid > div:nth-child(7) {
        grid-row: 3 !important;
        /* Pull it up slightly if there's still extra margin */
        margin-top: 0 !important;
    }
}

/* -- Move Status next to Three Dots (Row 1, Top Right) -- */
@media (max-width: 639px) {
    /* Update grid to 3 columns */
    .trade-row .mytradelist-grid {
        grid-template-columns: 1fr max-content max-content !important;
        gap: 10px 8px !important; 
    }

    /* Status: Row 1, Column 2 (Left of Three dots) */
    .trade-row .mytradelist-grid > div:nth-child(7) {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        margin-top: -2px !important; 
    }

    /* Actions (Three dots): Row 1, Column 3 */
    .trade-row .mytradelist-grid > div:nth-child(8) {
        grid-column: 3 / 4 !important;
        grid-row: 1 !important;
    }

    /* Dates: Spans Col 2 & 3 to stay right-aligned properly */
    .trade-row .mytradelist-grid > div:nth-child(4) {
        grid-column: 2 / 4 !important;
    }

    /* Work Status: Spans all 3 columns at the bottom */
    .trade-row .mytradelist-grid > div:nth-child(6) {
        grid-column: 1 / 4 !important;
    }
}

/* -- Shift Client name next to the Three Dots (Top Right) -- */
@media (max-width: 639px) {
    /* Change to 3 columns to hold Client and Three Dots side-by-side */
    .trade-row .mytradelist-grid {
        grid-template-columns: 1fr max-content max-content !important;
    }
    
    /* Client: Move to Row 1, Column 2 */
    .trade-row .mytradelist-grid > div:nth-child(5) {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        justify-content: center !important;
        align-items: flex-start !important;
        margin-top: -3px !important;
    }

    /* Actions (Three Dots): Move to Row 1, Column 3 */
    .trade-row .mytradelist-grid > div:nth-child(8) {
        grid-column: 3 / 4 !important;
    }

    /* Dates & Status: Span Column 2 and 3 on the right side */
    .trade-row .mytradelist-grid > div:nth-child(4),
    .trade-row .mytradelist-grid > div:nth-child(7) {
        grid-column: 2 / 4 !important;
    }

    /* Work Status: Span all 3 columns at the bottom */
    .trade-row .mytradelist-grid > div:nth-child(6) {
        grid-column: 1 / 4 !important;
    }
}

/* -- Shift Status directly under Dates & Collapse Grid Rows -- */
@media (max-width: 639px) {
    /* Status: Move to Row 3 (Right side, under Dates) */
    .trade-row .mytradelist-grid > div:nth-child(7) {
        grid-row: 3 !important;
    }

    /* Work Status: Move up to Row 4 to close the empty gap */
    .trade-row .mytradelist-grid > div:nth-child(6) {
        grid-row: 4 !important;
    }
}

/* -- Createtrade: Step section h2 heading smaller on mobile -- */
@media (max-width: 639px) {
    #add-trade-form .wizard-step h2.font-serif {
        font-size: 18px !important;
    }
}


@media (max-width: 639px) {
    /* h1 heading smaller to fit on one line */
    #resources-header h1 {
        font-size: 20px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}



/* -- Agent Resources Page Mobile Fix (Isolated to Agent only) -- */
@media (max-width: 639px) {
    

    /* Move Date under Category in the existing complex grid for Agent only */
    #agent-resource-cards-list .resource-row-card > .grid > div:nth-child(2) > div:nth-child(3) {
        grid-column: 3 / 4 !important;
        grid-row: 3 / 4 !important;
        margin-top: 4px !important; /* spacing from category above */
        align-self: start !important;
    }
}

@media (max-width: 639px) {
    /* Make Resource Name font smaller, single line, and perfectly aligned with icon */
    #agent-resource-cards-list .resource-row-card > .grid > div:nth-child(1) span.font-serif {
        font-size: 12.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-top: 4px !important; /* minor tweak to vertically align with icon */
    }
}

@media (max-width: 639px) {
    /* Align icon and text equally in Agent Resource Card */
    #agent-resource-cards-list .resource-row-card > .grid > div:nth-child(1) > div:nth-of-type(1) {
        margin-top: 0 !important; /* Remove the 1.4rem margin causing it to be pushed down */
        align-self: center !important;
    }
    
    #agent-resource-cards-list .resource-row-card > .grid > div:nth-child(1) > div:nth-of-type(2) > span.font-serif {
        align-self: center !important;
        margin-top: 0 !important;
    }

    /* Move the Three Dots to align center with them */
    #agent-resource-cards-list .resource-row-card > .grid > div:nth-child(3) {
        align-self: center !important;
        margin-top: 0 !important;
    }
}



/* -- Agent My Training Mobile Card Layout Fix -- */
@media (max-width: 639px) {
    #trainings-container .training-card-row .mytraining-grid {
        display: grid !important;
        grid-template-columns: 1fr max-content !important;
        grid-template-rows: auto auto auto !important;
        gap: 14px 12px !important;
        align-items: center !important;
    }

    /* Col 1: Training Name -> Row 1, Left */
    #trainings-container .training-card-row .mytraining-grid > div:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
    }
    
    /* Col 6: Action Button -> Row 1, Right */
    #trainings-container .training-card-row .mytraining-grid > div:nth-child(6) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-content: flex-end !important;
    }

    /* Col 2: Due Date -> Row 2, Left */
    #trainings-container .training-card-row .mytraining-grid > div:nth-child(2) {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
    }

    /* Col 3: Passing Marks -> Row 2, Right */
    #trainings-container .training-card-row .mytraining-grid > div:nth-child(3) {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        text-align: right !important;
        align-items: flex-end !important;
    }

    /* Col 5: Status -> Row 3, Left */
    #trainings-container .training-card-row .mytraining-grid > div:nth-child(5) {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
    }

    /* Col 4: My Score -> Row 3, Right */
    #trainings-container .training-card-row .mytraining-grid > div:nth-child(4) {
        grid-column: 2 / 3 !important;
        grid-row: 3 / 4 !important;
        text-align: right !important;
        align-items: flex-end !important;
    }
}

/* -- Individual Training Mobile Footer Fix -- */
@media (max-width: 639px) {
    #step-3-footer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 8px !important;
    }
    #step-3-footer > a {
        grid-column: 1 / 2 !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 8px 4px !important;
        height: auto !important;
    }
    #step-3-footer > a > span {
        white-space: normal !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
    #step-3-footer > div {
        display: contents !important;
    }
    #step-3-footer > div > button#btn-add-to-vault {
        grid-column: 2 / 3 !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 8px 4px !important;
        height: auto !important;
        margin: 0 !important;
    }
    #step-3-footer > div > button#btn-add-to-vault > span {
        white-space: normal !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
    #step-3-footer > div > button#btn-download-cert {
        grid-column: 1 / 3 !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}

/* -- Agent My Results Mobile Card Layout Fix -- */
@media (max-width: 639px) {
    #results-table-body .result-row > .grid {
        display: grid !important;
        grid-template-columns: 1fr max-content !important;
        grid-template-rows: auto auto auto !important;
        gap: 14px 12px !important;
        align-items: center !important;
    }

    /* Col 1: Training Name -> Row 1, Left */
    #results-table-body .result-row > .grid > div:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
    }
    
    /* Col 6: Action Button -> Row 1, Right */
    #results-table-body .result-row > .grid > div:nth-child(6) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-content: flex-end !important;
    }

    /* Col 2: Category & Attempt -> Row 2, Left */
    #results-table-body .result-row > .grid > div:nth-child(2) {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
    }

    /* Col 4: Score -> Row 2, Right */
    #results-table-body .result-row > .grid > div:nth-child(4) {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        align-items: flex-end !important;
        text-align: right !important;
    }

    /* Col 3: Completion Date -> Row 3, Left */
    #results-table-body .result-row > .grid > div:nth-child(3) {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
    }

    /* Col 5: Status -> Row 3, Right */
    #results-table-body .result-row > .grid > div:nth-child(5) {
        grid-column: 2 / 3 !important;
        grid-row: 3 / 4 !important;
        justify-content: flex-end !important;
    }
}

/* -- Agent Upload Documents Mobile Dropdown & Card Fix -- */
@media (max-width: 639px) {
    /* Prevent dropdown from expanding out of screen bounds */
    #trade-select {
        max-width: 100% !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    /* Proper Grid Layout for the Cards */
    #agent-docs-list .grid {
        display: grid !important;
        grid-template-columns: 1fr max-content !important;
        grid-template-rows: auto auto auto !important;
        gap: 12px 8px !important;
        align-items: center !important;
    }

    /* Row 1: Document Name (Full width) */
    #agent-docs-list .grid > div:nth-child(1) {
        grid-column: 1 / 3 !important;
        grid-row: 1 / 2 !important;
    }

    /* Row 2: Action Block (Browse & Update - Full width so it doesn't squish or break bounds) */
    #agent-docs-list .grid > div:nth-child(2) {
        grid-column: 1 / 3 !important;
        grid-row: 2 / 3 !important;
        justify-content: flex-start !important;
    }

    /* Row 3: Status (Left) */
    #agent-docs-list .grid > div:nth-child(3) {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
        justify-content: flex-start !important;
    }

    /* Row 3: Manage Eye (Right) */
    #agent-docs-list .grid > div:nth-child(4) {
        grid-column: 2 / 3 !important;
        grid-row: 3 / 4 !important;
        justify-content: flex-end !important;
    }
}

/* -- Agent MyNotification Mobile Layout Matching Admin (lg:hidden) -- */
@media (max-width: 1023px) {
    #notifications-list .notification-row .grid {
        display: grid !important;
        grid-template-columns: 1fr max-content !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 10px 8px !important;
        align-items: start !important;
    }

    /* Col 1 (Child 1): Checkbox & Icon -> Top Left */
    #notifications-list .notification-row .grid > div:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
    }

    /* Col 6 (Child 6): Three dots -> Top Right */
    #notifications-list .notification-row .grid > div:nth-child(6) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        align-self: center !important;
        justify-self: end !important;
    }

    /* Col 2 (Child 2): Title & Address -> Row 2 Left */
    #notifications-list .notification-row .grid > div:nth-child(2) {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
    }

    /* Col 5 (Child 5): Status Badge -> Row 2 Right */
    #notifications-list .notification-row .grid > div:nth-child(5) {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        justify-self: end !important;
        text-align: right !important;
    }

    /* Col 3 (Child 3): Message Text -> Row 3 Full width with Dashed border on top */
    #notifications-list .notification-row .grid > div:nth-child(3) {
        grid-column: 1 / 3 !important;
        grid-row: 3 / 4 !important;
        border-top: 1px dashed rgba(237, 232, 220, 0.8) !important;
        padding-top: 10px !important;
        margin-top: 4px !important;
    }

    /* Col 4 (Child 4): Date & Time -> Row 4 Full width (Right aligned) */
    #notifications-list .notification-row .grid > div:nth-child(4) {
        grid-column: 1 / 3 !important;
        grid-row: 4 / 5 !important;
        display: flex !important;
        justify-content: flex-end !important;
        text-align: right !important;
    }
    
    #notifications-list .notification-row .grid > div:nth-child(4) > div {
        align-items: flex-end !important;
    }
}

/* Fullscreen Processing Loader (matches Login page loader) */
#loading-div-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(81, 69, 84, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
}

#loading-div-background[style*="display: block"],
#loading-div-background[style*="display:block"],
#loading-div-background[style*="display: flex"],
#loading-div-background[style*="display:flex"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#loading-div {
    background: #FFFFFF;
    border: 1px solid #E8DFC9;
    padding: 24px 36px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(81, 69, 84, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: auto;
    max-width: 90vw;
    min-width: 200px;
    box-sizing: border-box;
    text-align: center;
}

.process-loader {
    width: 36px;
    height: 36px;
    border: 3px solid #E8DFC9;
    border-top: 3px solid #AE9A64;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    -webkit-animation: spin 0.8s linear infinite;
    box-sizing: border-box;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

.textspan {
    font-size: 13px;
    font-weight: 500;
    color: #514554;
    font-family: 'Gotham', sans-serif;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
}

/* ============================================================== */
/* SweetAlert Modal - Anti-Aliasing & Text Weight Consistency Fix */
/* ============================================================== */
.swal-overlay {
    z-index: 999999 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.swal-modal {
    z-index: 1000000 !important;
}

.swal-overlay--show-modal .swal-modal {
    -webkit-animation: smoothShowSweetAlert 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    animation: smoothShowSweetAlert 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    will-change: transform, opacity !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

@-webkit-keyframes smoothShowSweetAlert {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes smoothShowSweetAlert {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.swal-title {
    font-family: 'Gotham', sans-serif !important;
    font-weight: 600 !important;
    color: #514554 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

.swal-text {
    font-family: 'Gotham', sans-serif !important;
    font-weight: 400 !important;
    color: #514554 !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    display: block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

.swal-button {
    font-family: 'Gotham', sans-serif !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}



/* Hide native browser datepicker indicators to prevent overlap with custom brand icons */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input::-webkit-calendar-picker-indicator,
input::-webkit-inner-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
}