.input-group .form-control {
    z-index: 1;
}

.input-group .btn {
    z-index: 2;
}

/* Search form and results positioning */
.search-form-container {
    position: relative;
    z-index: 1060; /* Higher than Bootstrap's modal (1050) */
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 15px; /* Align with input considering the column margin */
    right: 15px;
    z-index: 1050;
    background: white;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    max-height: 300px;
    overflow-y: auto;
    margin-top: 2px;
}

.search-results-dropdown .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.search-results-dropdown .list-group-item {
    padding: 0.75rem 1.25rem;
    border-radius: 0;
    cursor: pointer;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.search-results-dropdown .list-group-item:last-child {
    border-bottom: none;
}

.search-results-dropdown .list-group-item:hover {
    background-color: #f8f9fa;
}

/* Mobile/Tablet Header Responsive Styles */
@media (max-width: 991.98px) {
    .extra-nav .extra-cell {
        gap: 15px;
    }
    
    .extra-nav .extra-cell .menu-btn {
        order: -1; /* Move hamburger menu to the beginning */
        margin-left: 0 !important;
    }
    
    .extra-nav .extra-cell .navbar-nav.header-right {
        margin-left: 0 !important;
    }
    
    /* Hide the "Hi Name" text on mobile/tablet */
    .header-profile .header-info span {
        display: none !important;
    }
    
    /* Make user icon visible and properly sized */
    .header-profile .header-info i {
        display: inline-block !important;
        color: var(--primary);
    }
}

/* =========================================
   HEADER USER GREETING - MOBILE VISIBILITY FIX
   ========================================= */

/* FORCE user greeting to be visible on ALL screen sizes */
.header-profile,
.header-profile .nav-item,
.header-profile .nav-link,
.header-profile .dropdown-toggle-custom,
.header-profile .header-info,
.header-profile .header-info span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.header-profile .nav-link,
.header-profile .dropdown-toggle-custom {
    display: flex !important;
    align-items: center !important;
}

.header-profile .header-info {
    display: inline-block !important;
}

.header-profile .header-info span {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    color: #000 !important;
    font-weight: normal !important;
}

.header-profile .header-info strong {
    font-weight: 600 !important;
}

/* Ensure the entire header-right area is visible */
.navbar-nav.header-right {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
}

.navbar-nav.header-right .nav-item {
    display: block !important;
}

/* Ensure extra-nav container is visible */
.extra-nav,
.extra-cell {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
}

/* Mobile specific adjustments */
@media (max-width: 991px) {
    .header-profile .nav-link,
    .header-profile .dropdown-toggle-custom {
        padding: 8px 12px !important;
        display: flex !important;
    }
    
    .header-profile .header-info span {
        font-size: 13px !important;
        max-width: 200px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Make sure extra-nav is visible on tablet */
    .extra-nav {
        display: flex !important;
        order: 3 !important;
    }
    
    .extra-cell {
        display: flex !important;
        gap: 10px !important;
    }
}

@media (max-width: 767px) {
    .header-profile .header-info span {
        font-size: 12px !important;
        max-width: 150px !important;
    }
}

@media (max-width: 575px) {
    .header-profile .nav-link,
    .header-profile .dropdown-toggle-custom {
        padding: 6px 10px !important;
    }
    
    .header-profile .header-info span {
        font-size: 11px !important;
        max-width: 110px !important;
    }
}

@media (max-width: 420px) {
    .header-profile .header-info span {
        font-size: 10px !important;
        max-width: 90px !important;
    }
}

/* Ensure dropdown menu is properly sized */
.header-profile .dropdown-menu {
    min-width: 220px !important;
}



.search-results-dropdown:empty {
    display: none;
}

/* Ensure proper stacking context */

/* =========================================
   REDUCE NAVIGATION MENU SPACING
   ========================================= */

/* Reduce horizontal padding between menu items to fit all in one row */
.header-nav .nav > li > a {
    padding: 30px 15px !important;
}

/* For screens between 992px and 1199px, further reduce padding */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-nav .nav { margin-left:8px;}
    .header-nav .nav > li > a {
        padding: 45px 6px !important;
        font-size: 15px !important;
    }
}

/* For screens between 1200px and 1366px */
@media (min-width: 1200px) and (max-width: 1366px) {
    .header-nav .nav > li > a {
        padding: 30px 10px !important;
        font-size: 16px !important;
    }
}
.card {
    position: relative;
    overflow: visible !important;
}

.card-body {
    position: relative;
    z-index: 1;
}

/* Ensure dropdown is above other elements */
.table-responsive {
    overflow: visible;
}

.position-relative {
    position: relative !important;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


/* DROPDOWN MENU TEXT FIX */
.header-profile .dropdown-menu { background: #fff !important; border: 1px solid rgba(0,0,0,.15) !important; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.header-profile .dropdown-menu .dropdown-item { display: flex !important; align-items: center !important; padding: 10px 20px !important; color: #333 !important; visibility: visible !important; opacity: 1 !important; }
.header-profile .dropdown-menu .dropdown-item span { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #333 !important; font-size: 14px !important; font-weight: normal !important; }
.header-profile .dropdown-menu .dropdown-item:hover { background-color: #f8f9fa !important; }
.header-profile .dropdown-menu .dropdown-item svg, .header-profile .dropdown-menu .dropdown-item i { display: inline-block !important; visibility: visible !important; opacity: 1 !important; }
.header-profile .dropdown-menu .dropdown-item .ms-2 { margin-left: 0.5rem !important; display: inline-block !important; visibility: visible !important; }


/* FIX SPACING BETWEEN USER GREETING AND MENU BUTTON */
.extra-cell { gap: 10px !important; justify-content: flex-end !important; }
.extra-cell .navbar-nav.header-right { margin-right: 10px !important; }
.extra-cell .menu-btn { margin-left: 10px !important; }
@media (max-width: 991px) { .extra-cell { gap: 8px !important; } }
@media (max-width: 575px) { .extra-cell { gap: 5px !important; } .extra-cell .navbar-nav.header-right { margin-right: 5px !important; } .extra-cell .menu-btn { margin-left: 5px !important; } }

/* =========================================
   SIGNATURE PAD RESPONSIVE STYLES
   ========================================= */

/* Signature pad container */
.signature-section {
    margin-top: 1.5rem;
}

.signature-pad-wrapper {
    background: #fff;
    border-radius: 0.375rem;
    padding: 1rem;
}

/* Signature canvas */
.signature-canvas {
    width: 100% !important;
    max-width: 600px;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    cursor: crosshair;
    touch-action: none;
    display: block;
    margin: 0 auto;
}

/* Signature controls */
.signature-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.signature-controls .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Error message */
#signatureError {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    .signature-canvas {
        max-width: 100%;
        height: 150px;
    }

    .signature-section h5 {
        font-size: 1.1rem;
    }

    .signature-controls {
        justify-content: center;
    }

    .signature-controls .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 575px) {
    .signature-canvas {
        height: 120px;
    }

    .signature-pad-wrapper {
        padding: 0.75rem;
    }

    .signature-controls .btn {
        font-size: 0.8125rem;
        padding: 0.3rem 0.6rem;
    }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .signature-canvas {
        max-width: 100%;
        height: 180px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .signature-canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ============================================================
   Mobile Sticky Bottom Navigation
   ============================================================ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.10);
    height: 62px;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Hide the top nav-header and header bar on mobile when the bottom nav is shown */
@media (max-width: 767.98px) {
    .nav-header,
    .header,
    .sticky-header,
    .site-header {
        display: none !important;
    }

    /* Remove the padding-top that was reserved for the fixed header (Account layout) */
    [data-header-position="fixed"] .content-body {
        padding-top: 0 !important;
    }

    /* Remove top padding reserved for fixed header in Frontend layout */
    .page-wraper,
    .page-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Also zero out any inline padding-top set by JS on the body or page-wraper */
    body {
        padding-top: 0 !important;
    }

    /* Remove top padding on first content section that was reserved for the transparent overlay header */
    .content-inner,
    .content-inner-1,
    .content-inner-2,
    .content-inner-3,
    .content-inner-4 {
        padding-top: 20px !important;
    }

    /* If the page-content div itself has an inline top margin/padding from JS, reset it */
    .page-content > *:first-child {
        margin-top: 0 !important;
    }
}

.mobile-bottom-nav__item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    text-decoration: none;
    color: #a0a0a0;
    transition: color 0.2s;
    padding: 4px 0;
}

.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item--active {
    color: #f7721e;
    text-decoration: none;
}

.mobile-bottom-nav__item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
}

.mobile-bottom-nav__item-content span {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

.mobile-bottom-nav__item-content--badge {
    position: relative;
}

.mobile-bottom-nav__badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #f7721e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
}

/* Center "Sell" button */
.mobile-bottom-nav__item--center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mobile-bottom-nav__center-btn {
    position: absolute;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f7721e 0%, #d45a10 100%);
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 14px rgba(247, 114, 30, 0.45);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    padding: 0;
}

.mobile-bottom-nav__center-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 18px rgba(247, 114, 30, 0.55);
    color: #fff;
}
/*
    .mobile-bottom-nav__menu-btn {
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    color: #a0a0a0;
    transition: color 0.2s;
}

.mobile-bottom-nav__menu-btn:hover {
    color: #f7721e;
}

/* Quick-add contextual button */
.mobile-bottom-nav__quickadd {
    color: #f7721e;
}

.mobile-bottom-nav__quickadd:hover,
.mobile-bottom-nav__quickadd:active {
    color: #d45a10;
    text-decoration: none;
}

/* =============================================
   Mobile Manage Drawer (bottom sheet)
   ============================================= */
.mobile-manage-drawer {
    width: 100%;
    height: 100% !important;
    max-height: 100vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.mobile-manage-drawer.showing,
.mobile-manage-drawer.hiding {
    transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* Custom backdrop rendered BELOW the offcanvas (z-index 1044) */
.mobile-manage-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1044;
    background: rgba(0, 0, 0, 0.45);
}

.mobile-manage-backdrop--visible {
    display: block;
}

/* Blue tab bar across the top */
.mobile-manage-drawer__tabs {
    display: flex;
    align-items: stretch;
    background: #1565c0;
    min-height: 48px;
    padding: 0;
    flex-shrink: 0;
    width: 100%;
}

.mobile-manage-drawer__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    cursor: pointer;
}

.mobile-manage-drawer__tab:hover {
    color: #fff;
    text-decoration: none;
}

.mobile-manage-drawer__tab--active {
    color: #fff;
    border-bottom-color: #fff;
}

.mobile-manage-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 0;
}

.mobile-manage-drawer__close:hover {
    color: #fff;
}

/* Section label */
.mobile-manage-drawer__section-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 14px 20px 8px;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-manage-drawer__body {
    overflow-y: auto;
    flex: 1;
}

.mobile-manage-drawer__nav {
    list-style: none;
    margin: 0;
    padding: 0 0 12px;
}

.mobile-manage-drawer__nav li {
    border-bottom: 1px solid #f4f4f4;
}

.mobile-manage-drawer__nav li:last-child {
    border-bottom: none;
}

.mobile-manage-drawer__nav li a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: background 0.12s, color 0.12s;
}

.mobile-manage-drawer__nav li a i {
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: #444;
    flex-shrink: 0;
}

.mobile-manage-drawer__nav li a:hover,
.mobile-manage-drawer__nav li a:active {
    background: #f0f4ff;
    color: #1565c0;
    text-decoration: none;
}

.mobile-manage-drawer__nav li a:hover i,
.mobile-manage-drawer__nav li a:active i {
    color: #1565c0;
}

.mobile-manage-drawer__fin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
}

/* Note rows */
.mobile-manage-drawer__note-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    gap: 8px;
}

.mobile-manage-drawer__note-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.mobile-manage-drawer__note-author {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-manage-drawer__note-date {
    font-size: 11px;
    color: #888;
}

.mobile-manage-drawer__note-text {
    font-size: 12px;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-manage-drawer__note-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 2px;
}

.mobile-manage-drawer__note-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    border: none;
}

.mobile-manage-drawer__note-btn--view {
    background: #e8f0fe;
    color: #1a73e8;
}

.mobile-manage-drawer__note-btn--delete {
    background: #fce8e6;
    color: #d93025;
}

/* =============================================
   Mobile Menu Offcanvas
   ============================================= */
.mobile-menu-offcanvas,
.frontend-mobile-menu-offcanvas {
    width: 100%;
    height: 100% !important;
    max-height: 100vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    z-index: 1055;
    transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.mobile-menu-offcanvas.showing,
.mobile-menu-offcanvas.hiding,
.frontend-mobile-menu-offcanvas.showing,
.frontend-mobile-menu-offcanvas.hiding {
    transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.frontend-mobile-menu-offcanvas .offcanvas-body {
    overflow-y: auto;
}

.mobile-menu-offcanvas__header {
    background: #f7721e;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu-offcanvas__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-menu-offcanvas__brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #fff;
    color: #f7721e;
    font-weight: 900;
    font-size: 20px;
}

.mobile-menu-offcanvas__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.mobile-menu-offcanvas__nav {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    flex: 1;
}

.mobile-menu-offcanvas__item a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    color: #444;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mobile-menu-offcanvas__item a i {
    width: 22px;
    text-align: center;
    font-size: 16px;
    color: #a0a0a0;
    flex-shrink: 0;
    transition: color 0.15s;
}

.mobile-menu-offcanvas__item a:hover,
.mobile-menu-offcanvas__item a:active {
    background: #fff5ef;
    color: #f7721e;
    border-left-color: #f7721e;
    text-decoration: none;
}

.mobile-menu-offcanvas__item a:hover i,
.mobile-menu-offcanvas__item a:active i {
    color: #f7721e;
}

.mobile-menu-offcanvas__footer {
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #888;
    line-height: 1.7;
}

.mobile-menu-offcanvas__footer a {
    color: #f7721e;
    text-decoration: none;
}

.mobile-menu-offcanvas__footer .heart {
    color: #e74c3c;
}
*/


.mobile-bottom-nav button {
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
}

.mobile-bottom-nav button:focus,
.mobile-bottom-nav button:focus-visible,
.mobile-bottom-nav button:active {
    border: none;
    outline: none;
    box-shadow: none;
}

.mobile-bottom-nav__back-btn {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 4px 0;
    cursor: pointer;
    color: #a0a0a0;
    transition: color 0.2s;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.mobile-bottom-nav__back-btn:focus,
.mobile-bottom-nav__back-btn:focus-visible,
.mobile-bottom-nav__back-btn:active {
    outline: none;
    box-shadow: none;
    border: none;
}

.mobile-bottom-nav__back-btn:hover {
    color: #f7721e;
}

/* Add bottom padding to body so content is not hidden behind the nav */
@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom));
    }

    /* When mobile bottom nav is active, fully collapse the site header */
    /*.site-header {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .page-wraper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }*/
}

/* Sidebar close button */
/*.btn-close-nav {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #555;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-nav:hover {
    color: #f7721e;
}*/

/* Sidebar header-nav: content starts from top, scrollable, not hidden behind bottom nav */
/*@media (max-width: 991.98px) {
    .header-nav.navbar-collapse {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 62px - env(safe-area-inset-bottom)) !important;
        padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    }*/

    /* Show header-bottom (logout button + social icons) inside our collapse sidebar */
    /*.header-nav.navbar-collapse .header-bottom {
        display: block !important;
        margin: 20px 20px 0;
    }

    .header-nav.navbar-collapse .header-bottom .btn-login {
        justify-content: center;
        display: block;
    }
}*/