/* =========================================================
   TEPL GROUP - CUSTOM TEAL SIDEBAR THEME
   ========================================================= */

/* Main Sidebar Container */
aside#menu.sidebar,
#menu.sidebar {
    background-color: #053b4c !important;
    background-image: 
        radial-gradient(circle at 50% 100%, rgba(0, 180, 216, 0.22) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%2300b4d8' fill-opacity='0.16' d='M0,160 C80,240 180,180 300,260 L300,300 L0,300 Z'%3E%3C/path%3E%3Cpath fill='%230077b6' fill-opacity='0.2' d='M0,210 C120,150 200,280 300,220 L300,300 L0,300 Z'%3E%3C/path%3E%3C/svg%3E"),
        linear-gradient(180deg, #053b4c 0%, #084e61 35%, #0a657c 65%, #054859 100%) !important;
    background-position: bottom center, bottom center, center center !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: cover, 100% 180px, cover !important;
    width: 235px !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1000 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Sidebar Brand / Top Branding Header */
aside#menu.sidebar .sidebar-brand {
    padding: 16px 14px 10px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

aside#menu.sidebar .sidebar-brand a {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
}

aside#menu.sidebar .sidebar-brand a.hide-menu {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

aside#menu.sidebar .sidebar-brand a.hide-menu:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* User Profile Glass Card Styling */
aside#menu.sidebar .sidebar-user-profile {
    margin-top: 12px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-bottom: 12px !important;
}

aside#menu.sidebar .sidebar-user-profile a.profile {
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

aside#menu.sidebar .sidebar-user-profile a.profile:hover,
aside#menu.sidebar .sidebar-user-profile a.profile:focus {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

aside#menu.sidebar .sidebar-user-profile .staff-profile-image-small {
    border: 2px solid rgba(6, 182, 212, 0.6) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    object-fit: cover !important;
    margin-right: 10px !important;
}

/* Text Truncation for User Name & Email */
aside#menu.sidebar .sidebar-user-profile a.profile span.tw-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 125px !important;
    display: block !important;
}

aside#menu.sidebar .sidebar-user-profile a.profile span.tw-font-semibold {
    color: #ffffff !important;
    font-size: 14px !important;
}

aside#menu.sidebar .sidebar-user-profile a.profile span.tw-font-normal {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 12px !important;
}

/* User Profile & Header Dropdowns */
/* User Profile & Header Dropdowns */
aside#menu.sidebar .sidebar-user-profile .dropdown-menu,
#header .nav > li .dropdown-menu:not(.notifications) {
    background-color: #053b4c !important;
    background-image: 
        radial-gradient(circle at 50% 100%, rgba(0, 180, 216, 0.22) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%2300b4d8' fill-opacity='0.16' d='M0,160 C80,240 180,180 300,260 L300,300 L0,300 Z'%3E%3C/path%3E%3Cpath fill='%230077b6' fill-opacity='0.2' d='M0,210 C120,150 200,280 300,220 L300,300 L0,300 Z'%3E%3C/path%3E%3C/svg%3E"),
        linear-gradient(180deg, #053b4c 0%, #084e61 35%, #0a657c 65%, #054859 100%) !important;
    background-position: bottom center, bottom center, center center !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: cover, 100% 180px, cover !important;
}

aside#menu.sidebar .sidebar-user-profile .dropdown-menu > li > a,
#header .nav > li .dropdown-menu:not(.notifications) > li > a,
#header .nav > li .dropdown-menu:not(.notifications) > li > a i,
#header .nav > li .dropdown-menu:not(.notifications) > li > a span,
#header .nav > li .dropdown-menu:not(.notifications) .dropdown-header {
    color: rgba(255, 255, 255, 0.85) !important;
}

aside#menu.sidebar .sidebar-user-profile .dropdown-menu > li > a:hover,
aside#menu.sidebar .sidebar-user-profile .dropdown-menu > li > a:focus,
aside#menu.sidebar .sidebar-user-profile .dropdown-menu > li.active > a,
#header .nav > li .dropdown-menu:not(.notifications) > li > a:hover,
#header .nav > li .dropdown-menu:not(.notifications) > li > a:focus,
#header .nav > li .dropdown-menu:not(.notifications) > li > a:hover i,
#header .nav > li .dropdown-menu:not(.notifications) > li > a:hover span,
#header .nav > li .dropdown-menu:not(.notifications) > li.active > a {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Main Navigation Menu */
aside#menu.sidebar #side-menu {
    padding: 0 8px 80px 8px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    list-style: none !important;
    height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

aside#menu.sidebar #side-menu .menu-spacer {
    display: none !important;
}

aside#menu.sidebar #side-menu > li {
    margin-bottom: 3px !important;
}

aside#menu.sidebar #side-menu > li > a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    line-height: 1.35 !important;
    cursor: pointer !important;
}

aside#menu.sidebar #side-menu > li > a .menu-icon {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 16px !important;
    margin-right: 12px !important;
    width: 20px !important;
    text-align: center !important;
}

aside#menu.sidebar #side-menu > li > a .menu-text {
    flex-grow: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Hover State */
aside#menu.sidebar #side-menu > li > a:hover,
aside#menu.sidebar #side-menu > li > a:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Active Item State (ONLY the currently active page) */
aside#menu.sidebar #side-menu > li.active > a,
aside#menu.sidebar #side-menu > li.active > a:hover,
aside#menu.sidebar #side-menu > li.active > a:focus {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 16px rgba(0, 180, 216, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

aside#menu.sidebar #side-menu > li.active > a .menu-icon {
    color: #ffffff !important;
}

/* Submenu Items (Expanded Tabs like Reports, Sales, Utilities) */
aside#menu.sidebar #side-menu ul.nav-second-level,
#setup-menu-wrapper #setup-menu ul.nav-second-level {
    background: rgba(0, 0, 0, 0.18) !important;
    border-radius: 12px !important;
    margin: 3px 0 5px 0 !important;
    padding: 6px 0 !important;
    list-style: none !important;
}

aside#menu.sidebar #side-menu ul.nav-second-level > li > a,
#setup-menu-wrapper #setup-menu ul.nav-second-level > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    padding: 7px 12px 7px 40px !important;
    border-radius: 8px !important;
    display: block !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

aside#menu.sidebar #side-menu ul.nav-second-level > li > a:hover,
#setup-menu-wrapper #setup-menu ul.nav-second-level > li > a:hover {
    color: #00b4d8 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

aside#menu.sidebar #side-menu ul.nav-second-level > li.active > a,
#setup-menu-wrapper #setup-menu ul.nav-second-level > li.active > a {
    color: #00b4d8 !important;
    font-weight: 600 !important;
    background: rgba(0, 180, 216, 0.15) !important;
}

/* Arrow Chevrons */
aside#menu.sidebar #side-menu .arrow,
#setup-menu-wrapper #setup-menu .arrow {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 11px !important;
}

/* Custom Scrollbar */
aside#menu.sidebar #side-menu::-webkit-scrollbar,
#setup-menu-wrapper::-webkit-scrollbar {
    width: 6px !important;
}
aside#menu.sidebar #side-menu::-webkit-scrollbar-track,
#setup-menu-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px !important;
}
aside#menu.sidebar #side-menu::-webkit-scrollbar-thumb,
#setup-menu-wrapper::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.35) !important;
    border-radius: 10px !important;
    transition: background 0.2s ease !important;
}
aside#menu.sidebar #side-menu::-webkit-scrollbar-thumb:hover,
#setup-menu-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.7) !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5) !important;
}

/* =========================================================
   SETUP MENU SIDEBAR STYLING (#setup-menu-wrapper)
   ========================================================= */

#setup-menu-wrapper {
    display: none !important;
}

#setup-menu-wrapper.display-block,
#setup-menu-wrapper.open {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 235px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1050 !important;
    background-color: #053b4c !important;
    background-image: linear-gradient(180deg, #053b4c 0%, #084e61 35%, #0a657c 65%, #054859 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.3) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

#setup-menu-wrapper .customizer-heading {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding-top: 10px !important;
}

#setup-menu-wrapper .close-customizer {
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

#setup-menu-wrapper .close-customizer:hover {
    color: #ffffff !important;
}

#setup-menu-wrapper #setup-menu {
    padding: 10px 8px 80px 8px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    list-style: none !important;
    height: calc(100vh - 50px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#setup-menu-wrapper #setup-menu .menu-spacer {
    display: none !important;
}

#setup-menu-wrapper #setup-menu > li > a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

#setup-menu-wrapper #setup-menu > li > a .menu-text {
    flex-grow: 1 !important;
}

#setup-menu-wrapper #setup-menu > li > a .menu-icon {
    display: none !important;
}

#setup-menu-wrapper #setup-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

#setup-menu-wrapper #setup-menu > li.active > a {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* =========================================================
   RIGHT SIDE CONTENT SCREEN BACKGROUND & DESIGN PATTERNS (#wrapper & BODY)
   (Soft Sky-Blue Mesh Gradient with Flowing Wave & Ambient Glow Design)
   ========================================================= */

body.admin,
#wrapper {
    background-color: #b2ebf2 !important;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2300b4d8' fill-opacity='0.09' d='M0,192L48,176C96,160,192,128,288,138.7C384,149,480,203,576,213.3C672,224,768,192,864,165.3C960,139,1056,117,1152,128C1248,139,1344,181,1392,202.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3Cpath fill='%230077b6' fill-opacity='0.06' d='M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,122.7C960,117,1056,171,1152,186.7C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"),
        radial-gradient(circle at 15% 15%, rgba(0, 180, 216, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(72, 202, 228, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 40%, #80deea 85%, #4dd0e1 100%) !important;
    background-position: bottom center, top left, bottom right, center center !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-attachment: fixed, fixed, fixed, fixed !important;
    background-size: 100% auto, 600px 600px, 700px 700px, cover !important;
}

#content {
    background: transparent !important;
}

/* =========================================================
   UNIVERSAL DASHBOARD CARDS, PANELS & POPUP MODALS (IMAGE 1 SPEC)
   ========================================================= */

/* 1. Reset Outer Widget Containers (Prevents Nested Double Cards) */
div.widget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin-bottom: 25px !important;
}

/* 2. Unified Ultra-Faint Pearl Glass Card Container */
.panel_s,
.stat-panel,
.content-wrapper > .panel,
#wrapper .panel:not(.widget) {
    background-color: #ffffff !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #fbfdff 65%, #f2f8ff 100%) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    border: 2.5px solid rgba(5, 59, 76, 0.38) !important;
    box-shadow: 0 18px 45px rgba(5, 59, 76, 0.18), 0 6px 16px rgba(0, 180, 216, 0.10), 0 2px 4px rgba(0, 0, 0, 0.04), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    margin-top: 6px !important;
}

/* Allow panels with active dropdowns to overflow visibly so options are never clipped */
.panel_s:has(.bootstrap-select.open),
.panel_s:has(.dropdown.open),
.panel_s:has(.open),
.panel_s:has(.show),
.panel_s.dropdown-is-open,
.panel_s.overflow-visible,
.panel_s.form-builder-panel {
    overflow: visible !important;
    z-index: 100 !important;
}

/* Global Dropup Menu Clean Floating Styling */
.bootstrap-select.dropup .dropdown-menu {
    top: auto !important;
    bottom: 100% !important;
    margin-bottom: 6px !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(6, 182, 212, 0.3) !important;
    box-shadow: 0 -12px 30px rgba(15, 70, 85, 0.16) !important;
    z-index: 1060 !important;
}

.bootstrap-select.dropup .dropdown-toggle {
    border-radius: var(--tepl-form-radius, 12px) !important;
}

/* Dedicated Modal Content Styling - Prevents Z-Index Isolation & Clipping */
.modal-content {
    background-color: #ffffff !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #fbfdff 65%, #f2f8ff 100%) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    border: 2.5px solid rgba(5, 59, 76, 0.38) !important;
    box-shadow: 0 20px 60px rgba(5, 59, 76, 0.22), 0 8px 24px rgba(0, 180, 216, 0.12) !important;
    position: relative !important;
    z-index: 1052 !important;
    overflow: visible !important;
}

/* Sleek Faint Top Accent Indicator Bar (::before) */
.panel_s::before,
.modal-content::before,
.stat-panel::before,
.content-wrapper > .panel::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, rgba(0, 180, 216, 0.5) 0%, rgba(2, 132, 199, 0.4) 100%) !important;
    z-index: 3 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

/* Hover Elevation & Soft Glow */
.panel_s:hover,
.modal-content:hover,
.stat-panel:hover {
    transform: translateY(-5px) scale(1.004) !important;
    box-shadow: 0 26px 60px rgba(5, 59, 76, 0.25), 0 8px 24px rgba(0, 180, 216, 0.18) !important;
    border-color: #0077b6 !important;
}

/* Prevent background panel from moving when hovering active open dropdowns */
.panel_s:has(.open):hover,
.panel_s:has(.bootstrap-select.open):hover,
.panel_s:has(.dropdown.open):hover {
    transform: none !important;
}

/* 3. Ultra-Faint Soft Bottom Wave Graphic (Faint, Soft & Elegant Translucent Wave) */
.panel_s::after,
.modal-content::after,
.stat-panel::after,
.content-wrapper > .panel::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 120px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230284c7' fill-opacity='0.08' d='M0,192L60,181.3C120,171,240,149,360,165.3C480,181,600,235,720,240C840,245,960,203,1080,192C1200,181,1320,203,1380,213.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3Cpath fill='%2300b4d8' fill-opacity='0.05' d='M0,128L60,149.3C120,171,240,213,360,208C480,203,600,149,720,165.3C840,181,960,267,1080,266.7C1200,267,1320,181,1380,138.7L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

/* 4. Ensure All Content inside Cards & Modals Sits ABOVE the Wave Background */
.panel_s > *,
.modal-content > *,
.stat-panel > * {
    position: relative !important;
    z-index: 2 !important;
}

/* 5. Force ALL Inner Containers & Sub-Divs to be Transparent (Eliminates Inner White Cut-off Boxes) */
.panel_s .panel-body,
.panel_s .panel-heading,
.panel_s .panel-footer,
.panel_s .user-data,
.panel_s .todo-panel,
.panel_s .finance-summary,
.panel_s .table-responsive,
.panel_s .dataTables_wrapper,
.panel_s .home-activity,
.panel_s .tab-content,
.panel_s .tab-pane,
.panel_s .activity-feed,
.panel_s .feed-item,
.panel_s ul.todo,
.panel_s li,
.widget .panel-body,
.widget .panel-heading,
.widget .panel-footer,
.widget .panel_s,
.widget .user-data,
.widget .todo-panel,
.widget .finance-summary,
.modal-body,
.modal-header,
.modal-footer {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Headings & Header Bars inside Cards & Modals */
.panel_s .panel-heading,
.widget .widget-dragger,
.modal-header {
    background: rgba(255, 255, 255, 0.45) !important;
    border-bottom: 1px solid rgba(0, 180, 216, 0.1) !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
}

.panel_s .panel-body,
.modal-body {
    color: #0f172a !important;
}

/* Dark High-Contrast Typography inside Cards & Modals */
.panel_s,
.panel_s .panel-body,
.panel_s .panel-heading,
.panel_s p,
.panel_s span,
.panel_s div,
.panel_s h1, .panel_s h2, .panel_s h3, .panel_s h4, .panel_s h5, .panel_s h6,
.panel_s table, .panel_s td, .panel_s th,
.panel_s li, .panel_s label,
.panel_s a:not(.btn):not(.label):not(.badge),
.modal-content,
.modal-content p, .modal-content span, .modal-content div, .modal-content label,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4, .modal-content h5, .modal-content h6,
.stat-panel {
    color: #0f172a !important;
}

/* Force Muted, Secondary & Tailwind Neutral Text to be Crisp & Dark */
.panel_s .text-muted,
.panel_s .tw-text-neutral-500,
.panel_s .tw-text-neutral-400,
.panel_s .tw-text-neutral-600,
.panel_s .tw-text-neutral-700,
.panel_s span.todo-date,
.panel_s .no-todos,
.modal-content .text-muted,
.modal-content .tw-text-neutral-500,
.modal-content .tw-text-neutral-400,
.modal-content .tw-text-neutral-700 {
    color: #1e293b !important;
    font-weight: 600 !important;
}

.modal-footer {
    border-top: 1px solid rgba(0, 180, 216, 0.1) !important;
}

/* Primary "View All" & Action Buttons inside Content Area & Cards */
#wrapper .btn-primary,
#wrapper .btn-info,
.panel_s .btn-info,
.panel_s .btn-primary,
.widget .btn-info,
.widget .btn-primary,
a[href*="view_all"],
.btn-view-all {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 7px 18px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0, 180, 216, 0.38) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
}

#wrapper .btn-primary:hover,
#wrapper .btn-info:hover,
.panel_s .btn-info:hover,
.panel_s .btn-primary:hover,
.widget .btn-info:hover,
.widget .btn-primary:hover,
a[href*="view_all"]:hover,
.btn-view-all:hover {
    background: linear-gradient(135deg, #0096c7 0%, #03045e 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 6px 20px rgba(0, 180, 216, 0.5) !important;
}

/* DataTables & Table Headers inside Dashboard Cards (Thick Dark Colored Border & Stylish Effects) */
.panel_s table,
.widget table,
.modal-content table,
.table.dataTable,
.table-responsive > table {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 2px solid rgba(5, 59, 76, 0.32) !important;
    border-radius: 12px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(5, 59, 76, 0.08) !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

/* Stylish Gradient Table Header Row & Dark Borders */
.panel_s table thead th,
.widget table thead th,
.modal-content table thead th,
.table.dataTable thead th {
    background: linear-gradient(135deg, rgba(5, 59, 76, 0.12) 0%, rgba(0, 180, 216, 0.15) 100%) !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    border-bottom: 2px solid rgba(5, 59, 76, 0.35) !important;
    border-right: 1px solid rgba(5, 59, 76, 0.15) !important;
    padding: 12px 14px !important;
}

.panel_s table thead th:last-child,
.widget table thead th:last-child,
.table.dataTable thead th:last-child {
    border-right: none !important;
}

/* Table Body Cells & Dark Subtle Divider Borders */
.panel_s table tbody td,
.widget table tbody td,
.modal-content table tbody td,
.table.dataTable tbody td {
    border-bottom: 1px solid rgba(5, 59, 76, 0.15) !important;
    border-right: 1px solid rgba(5, 59, 76, 0.08) !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
}

.panel_s table tbody tr:last-child td,
.widget table tbody tr:last-child td,
.table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* Interactive Table Row Hover Effects & Micro-Animations */
.panel_s table tbody tr,
.widget table tbody tr,
.modal-content table tbody tr,
.table.dataTable tbody tr {
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.panel_s table tbody tr:hover,
.widget table tbody tr:hover,
.modal-content table tbody tr:hover,
.table.dataTable tbody tr:hover {
    background: rgba(0, 180, 216, 0.10) !important;
    transform: scale(1.002) !important;
    box-shadow: 0 3px 10px rgba(5, 59, 76, 0.08) !important;
}

/* Form Controls, Search Input & Select Dropdowns inside Cards */
.panel_s .dataTables_filter input,
.widget input[type="text"],
.widget select,
.panel_s select,
.panel_s .dt-buttons button,
.panel_s .dataTables_length select {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 180, 216, 0.25) !important;
    border-radius: 9px !important;
    padding: 6px 12px !important;
    color: #1e293b !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

.panel_s .dataTables_filter input:focus,
.widget input[type="text"]:focus,
.widget select:focus,
.panel_s select:focus {
    background: #ffffff !important;
    border-color: #00b4d8 !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.18) !important;
    outline: none !important;
}

/* =========================================================
   UNIVERSAL KPI STAT CARDS & BUTTONS - SOFT GRADIENT GLASS
   (Applies across ALL pages, modules & widgets in the application)
   ========================================================= */

/* Outer Model Container for Quick Stats / Top Stats Widgets (Matches Dashboard Background) */
.widget[data-name*="stats"],
.widget[data-name*="Quick Statistics"],
.widget[data-name*="Hızlı İstatistik"],
#widget-top_stats,
#widget-quick_stats,
.widget:has(.top_stats_wrapper),
.widget:has(.quick-stats-invoices),
.widget:has(.quick-top-stats) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

.widget:has(.top_stats_wrapper) .row,
#widget-top_stats .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
}

.widget:has(.top_stats_wrapper) .row > div[class*="col-"],
#widget-top_stats .row > div[class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* =========================================================
   UNIVERSAL KPI STAT CARDS & BUTTONS - ULTRA-RICH GRADIENT GLASS
   (Applies across ALL pages, modules & widgets in the application)
   ========================================================= */

/* Universal Selector for All KPI Cards, Top Stats & Module Stat Buttons */
.top_stats_wrapper,
.quick-top-stats button,
.quick-top-stats > div > button,
.quick-top-stats > div > div,
div[class*="quick-stats"] .top_stats_wrapper,
div[class*="top-stats"],
.stat-panel,
.stat-box,
.info-box,
.survey_stat {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    padding: 16px 18px !important;
    margin-bottom: 12px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 30px rgba(5, 59, 76, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    text-align: left !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Top Color Accent Line Indicator (::before) */
.top_stats_wrapper::before,
.quick-top-stats button::before,
.stat-panel::before,
.stat-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 3 !important;
    transition: all 0.35s ease !important;
}

/* Subtle Wave Decoration in Bottom-Right Corner of ALL KPI Cards */
.top_stats_wrapper::after,
.quick-top-stats button::after,
.stat-panel::after,
.stat-box::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 140px !important;
    height: 80px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath fill='%23ffffff' fill-opacity='0.65' d='M0,40 C30,15 70,50 100,20 L100,60 L0,60 Z'%3E%3C/path%3E%3Cpath fill='%23ffffff' fill-opacity='0.35' d='M0,25 C40,45 75,10 100,35 L100,60 L0,60 Z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    border-bottom-right-radius: 18px !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
    transition: transform 0.38s ease, opacity 0.38s ease !important;
}

.top_stats_wrapper:hover::after,
.quick-top-stats button:hover::after,
.stat-panel:hover::after,
.stat-box:hover::after {
    transform: scale(1.12) translateY(-4px) !important;
    opacity: 1 !important;
}

/* Content Stacking Z-Index */
.top_stats_wrapper > *,
.quick-top-stats button > *,
.stat-panel > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Hover Elevation & Glow Effects */
.top_stats_wrapper:hover,
.quick-top-stats button:hover,
.stat-panel:hover,
.stat-box:hover {
    transform: translateY(-7px) scale(1.025) !important;
}

/* Universal Icon Badge Styling */
.top_stats_wrapper svg,
.quick-top-stats button svg,
.stat-panel svg,
.stat-box svg,
.top_stats_wrapper i.menu-icon,
.quick-top-stats button i {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    margin-right: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.38s ease !important;
}

.top_stats_wrapper:hover svg,
.quick-top-stats button:hover svg,
.stat-panel:hover svg {
    transform: scale(1.15) rotate(6deg) !important;
}

/* Improved Text Spacing & Typography */
.top_stats_wrapper span.tw-truncate,
.quick-top-stats button span,
.stat-panel span {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Stat Count Number Badge (Pill Badge) */
.top_stats_wrapper span.tw-shrink-0,
.quick-top-stats button .tw-font-semibold,
.stat-panel .tw-font-semibold {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.2px !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* =========================================================
   THEME COLOR MAP FOR MODULE KPI STAT CARDS & BUTTONS
   ========================================================= */

/* Theme 1: Vibrant Blue (Invoices / Unpaid / First items) */
.quick-stats-invoices .top_stats_wrapper,
div[class*="invoices"] .top_stats_wrapper,
.quick-top-stats button:nth-child(5n+1) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 242, 254, 0.92) 50%, rgba(186, 230, 253, 0.85) 100%) !important;
    border-color: rgba(186, 230, 253, 0.95) !important;
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.1) !important;
}
.quick-stats-invoices .top_stats_wrapper::before,
div[class*="invoices"] .top_stats_wrapper::before,
.quick-top-stats button:nth-child(5n+1)::before {
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%) !important;
}
.quick-stats-invoices .top_stats_wrapper:hover,
div[class*="invoices"] .top_stats_wrapper:hover,
.quick-top-stats button:nth-child(5n+1):hover {
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.24) !important;
    border-color: #60a5fa !important;
}
.quick-stats-invoices .top_stats_wrapper svg,
div[class*="invoices"] .top_stats_wrapper svg,
.quick-top-stats button:nth-child(5n+1) svg,
.quick-top-stats button:nth-child(5n+1) span[class*="text-"] {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
}

/* Theme 2: Emerald Green (Leads / Paid / Converted / Second items) */
.quick-stats-leads .top_stats_wrapper,
div[class*="leads"] .top_stats_wrapper,
.quick-top-stats button:nth-child(5n+2) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(209, 250, 229, 0.92) 50%, rgba(167, 243, 208, 0.85) 100%) !important;
    border-color: rgba(167, 243, 208, 0.95) !important;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.1) !important;
}
.quick-stats-leads .top_stats_wrapper::before,
div[class*="leads"] .top_stats_wrapper::before,
.quick-top-stats button:nth-child(5n+2)::before {
    background: linear-gradient(90deg, #059669 0%, #10b981 50%, #34d399 100%) !important;
}
.quick-stats-leads .top_stats_wrapper:hover,
div[class*="leads"] .top_stats_wrapper:hover,
.quick-top-stats button:nth-child(5n+2):hover {
    box-shadow: 0 18px 40px rgba(16, 185, 129, 0.24) !important;
    border-color: #34d399 !important;
}
.quick-stats-leads .top_stats_wrapper svg,
div[class*="leads"] .top_stats_wrapper svg,
.quick-top-stats button:nth-child(5n+2) svg,
.quick-top-stats button:nth-child(5n+2) span[class*="text-"] {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
}

/* Theme 3: Iris Purple (Projects / In Progress / Third items) */
.quick-stats-projects .top_stats_wrapper,
div[class*="projects"] .top_stats_wrapper,
.quick-top-stats button:nth-child(5n+3) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 232, 255, 0.92) 50%, rgba(233, 213, 255, 0.85) 100%) !important;
    border-color: rgba(233, 213, 255, 0.95) !important;
    box-shadow: 0 10px 28px rgba(139, 92, 246, 0.1) !important;
}
.quick-stats-projects .top_stats_wrapper::before,
div[class*="projects"] .top_stats_wrapper::before,
.quick-top-stats button:nth-child(5n+3)::before {
    background: linear-gradient(90deg, #7c3aed 0%, #8b5cf6 50%, #c084fc 100%) !important;
}
.quick-stats-projects .top_stats_wrapper:hover,
div[class*="projects"] .top_stats_wrapper:hover,
.quick-top-stats button:nth-child(5n+3):hover {
    box-shadow: 0 18px 40px rgba(139, 92, 246, 0.24) !important;
    border-color: #c084fc !important;
}
.quick-stats-projects .top_stats_wrapper svg,
div[class*="projects"] .top_stats_wrapper svg,
.quick-top-stats button:nth-child(5n+3) svg,
.quick-top-stats button:nth-child(5n+3) span[class*="text-"] {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
}

/* Theme 4: Warm Vivid Amber Orange (Tasks / Overdue / Fourth items) */
.quick-stats-tasks .top_stats_wrapper,
div[class*="tasks"] .top_stats_wrapper,
.quick-top-stats button:nth-child(5n+4) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 237, 213, 0.92) 50%, rgba(254, 215, 170, 0.85) 100%) !important;
    border-color: rgba(254, 215, 170, 0.95) !important;
    box-shadow: 0 10px 28px rgba(249, 115, 22, 0.1) !important;
}
.quick-stats-tasks .top_stats_wrapper::before,
div[class*="tasks"] .top_stats_wrapper::before,
.quick-top-stats button:nth-child(5n+4)::before {
    background: linear-gradient(90deg, #ea580c 0%, #f97316 50%, #fb923c 100%) !important;
}
.quick-stats-tasks .top_stats_wrapper:hover,
div[class*="tasks"] .top_stats_wrapper:hover,
.quick-top-stats button:nth-child(5n+4):hover {
    box-shadow: 0 18px 40px rgba(249, 115, 22, 0.24) !important;
    border-color: #fb923c !important;
}
.quick-stats-tasks .top_stats_wrapper svg,
div[class*="tasks"] .top_stats_wrapper svg,
.quick-top-stats button:nth-child(5n+4) svg,
.quick-top-stats button:nth-child(5n+4) span[class*="text-"] {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.4) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
}

/* Theme 5: Soft Rose Pink (Cancelled / Fifth items) */
.quick-top-stats button:nth-child(5n+5) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 228, 230, 0.92) 50%, rgba(254, 205, 211, 0.85) 100%) !important;
    border-color: rgba(254, 205, 211, 0.95) !important;
    box-shadow: 0 10px 28px rgba(225, 29, 72, 0.1) !important;
}
.quick-top-stats button:nth-child(5n+5)::before {
    background: linear-gradient(90deg, #e11d48 0%, #f43f5e 50%, #fb7185 100%) !important;
}
.quick-top-stats button:nth-child(5n+5):hover {
    box-shadow: 0 18px 40px rgba(225, 29, 72, 0.24) !important;
    border-color: #fb7185 !important;
}
.quick-top-stats button:nth-child(5n+5) svg,
.quick-top-stats button:nth-child(5n+5) span[class*="text-"] {
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%) !important;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.4) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
}

/* =========================================================
   PROGRESS BARS STYLING & ANIMATIONS
   ========================================================= */
.top_stats_wrapper .progress,
.quick-top-stats .progress {
    height: 8px !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.07) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}

.top_stats_wrapper .progress-bar,
.quick-top-stats .progress-bar {
    height: 100% !important;
    border-radius: 12px !important;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.quick-stats-invoices .progress-bar {
    background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa) !important;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.6) !important;
}

.quick-stats-leads .progress-bar {
    background: linear-gradient(90deg, #059669, #10b981, #34d399) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
}

.quick-stats-projects .progress-bar {
    background: linear-gradient(90deg, #7c3aed, #8b5cf6, #c084fc) !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.6) !important;
}

.quick-stats-tasks .progress-bar {
    background: linear-gradient(90deg, #ea580c, #f97316, #fb923c) !important;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.6) !important;
}

/* =========================================================
   DASHBOARD OPTIONS BUTTON (.screen-options-btn)
   ========================================================= */

.screen-options-btn {
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(15, 118, 110, 0.18) !important;
    border-radius: 12px !important;
    color: #053b4c !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 8px 16px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: absolute !important;
    top: 15px !important;
    right: 25px !important;
    z-index: 99 !important;
}

.screen-options-btn:hover {
    background: #ffffff !important;
    color: #0077b6 !important;
    border-color: rgba(0, 180, 216, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 180, 216, 0.18) !important;
}

.screen-options-btn svg {
    color: #00b4d8 !important;
    transition: transform 0.4s ease !important;
}

.screen-options-btn:hover svg {
    transform: rotate(60deg) !important;
}

/* =========================================================
   RIGHT-SIDE SLIDE-OVER WIDGET PANEL (.screen-options-area)
   ========================================================= */

/* Dark Backdrop Overlay */
.screen-options-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(8, 47, 73, 0.38) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 1025 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

.screen-options-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Slide-Over Panel Container */
.screen-options-area {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 440px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    background: rgba(255, 255, 255, 0.97) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: -10px 0 40px rgba(15, 23, 42, 0.18) !important;
    border-radius: 20px 0 0 20px !important;
    z-index: 9999 !important;
    transform: translateX(100%) !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
}

.screen-options-area.open {
    transform: translateX(0) !important;
}

/* Panel Header */
.widget-panel-header {
    padding: 24px 24px 18px 24px !important;
    border-bottom: 1px solid rgba(15, 118, 110, 0.1) !important;
    background: rgba(248, 250, 252, 0.8) !important;
    flex-shrink: 0 !important;
}

.widget-panel-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(6, 182, 212, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.widget-panel-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #053b4c !important;
    margin: 0 !important;
}

.widget-panel-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.4 !important;
}

.close-widget-panel-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    color: #64748b !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.close-widget-panel-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    transform: rotate(90deg) !important;
}

/* Panel Actions (Reset & View Widgetable Area) */
.widget-panel-actions .btn-reset-dashboard {
    background: #ffffff !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    color: #084e61 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 7px 12px !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.widget-panel-actions .btn-reset-dashboard:hover {
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: #00b4d8 !important;
    color: #0077b6 !important;
}

.widget-panel-actions .btn-widgetable-area {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 7px 12px !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 3px 10px rgba(0, 180, 216, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.widget-panel-actions .btn-widgetable-area:hover {
    background: linear-gradient(135deg, #0096c7 0%, #03045e 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(0, 180, 216, 0.45) !important;
}

/* Panel Search Input */
.widget-search-input-wrapper {
    position: relative !important;
}

.widget-search-input-wrapper .search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.widget-search-input-wrapper input {
    width: 100% !important;
    padding: 9px 12px 9px 36px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.widget-search-input-wrapper input:focus {
    background: #ffffff !important;
    border-color: #00b4d8 !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15) !important;
}

/* Panel Scrollable Body */
.widget-panel-body {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 20px 24px 40px 24px !important;
    scroll-behavior: smooth !important;
}

/* Widget Cards List & Individual Cards */
.widget-cards-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.widget-option-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 118, 110, 0.12) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 200ms ease !important;
    cursor: pointer !important;
}

.widget-option-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.09) !important;
    border-color: rgba(0, 180, 216, 0.3) !important;
    background: #ffffff !important;
}

.widget-card-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-grow: 1 !important;
    padding-right: 12px !important;
}

.widget-card-bullet {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    transition: color 0.25s ease !important;
}

.widget-card-bullet.active {
    color: #00b4d8 !important;
}

.widget-card-text {
    display: flex !important;
    flex-direction: column !important;
}

.widget-card-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.widget-card-desc {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

/* Modern iOS Style Toggle Switch UI */
.widget-toggle-wrapper {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}

.widget-toggle-wrapper input.hidden-checkbox {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

.widget-toggle-wrapper .toggle-slider-ui {
    position: absolute !important;
    cursor: pointer !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1 !important;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 24px !important;
}

.widget-toggle-wrapper .toggle-slider-ui:before {
    position: absolute !important;
    content: "" !important;
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: white !important;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.widget-toggle-wrapper input.hidden-checkbox:checked + .toggle-slider-ui {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
}

.widget-toggle-wrapper input.hidden-checkbox:checked + .toggle-slider-ui:before {
    transform: translateX(20px) !important;
}

/* =========================================================
   TEPL GROUP - GLOBAL FORM DESIGN SYSTEM
   ========================================================= */

:root {
    --tepl-form-primary: #06b6d4;
    --tepl-form-primary-dark: #0284c7;
    --tepl-form-teal: #053b4c;
    --tepl-form-bg: rgba(255, 255, 255, 0.88);
    --tepl-form-border: rgba(5, 59, 76, 0.16);
    --tepl-form-text: #0f172a;
    --tepl-form-muted: #64748b;
    --tepl-form-radius: 11px;
    --tepl-form-card-radius: 20px;
    --tepl-form-shadow: 0 12px 35px rgba(15, 70, 85, 0.10), 0 4px 12px rgba(6, 182, 212, 0.06);
}

/* 1. Page Background Upgrade */
body.admin #wrapper {
    background: linear-gradient(135deg, #e8fbff 0%, #d5f7fa 50%, #c7f1f5 100%) !important;
    min-height: 100vh !important;
}

/* 2. Global Form Card & Panel Container */
.panel_s,
.content-wrapper > .panel,
.tepl-form-card,
form.form-horizontal .panel_s {
    background-color: rgba(255, 255, 255, 0.85) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(232, 251, 255, 0.80) 65%, rgba(213, 247, 250, 0.70) 100%) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: var(--tepl-form-card-radius) !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 14px 40px rgba(15, 70, 85, 0.12), 0 4px 14px rgba(6, 182, 212, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    animation: formFadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 24px !important;
}

@keyframes formFadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sleek Faint Cyan Top Accent Bar */
.panel_s::before,
.tepl-form-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #06b6d4 0%, #0284c7 50%, #053b4c 100%) !important;
    border-top-left-radius: var(--tepl-form-card-radius) !important;
    border-top-right-radius: var(--tepl-form-card-radius) !important;
    z-index: 3 !important;
}

/* Decorative Translucent Bottom Wave Graphic */
.panel_s::after,
.tepl-form-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%2306b6d4' fill-opacity='0.05' d='M0,192L60,181.3C120,171,240,149,360,165.3C480,181,600,235,720,240C840,245,960,203,1080,192C1200,181,1320,203,1380,213.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Form Panel Body & Headings */
.panel_s > .panel-body,
.panel_s > .panel-heading {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

.panel_s > .panel-heading {
    padding: 18px 24px 14px 24px !important;
    border-bottom: 1.5px solid rgba(226, 232, 240, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.panel_s > .panel-heading h4,
.panel_s > .panel-heading .panel-title,
.panel-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #053b4c !important;
    margin: 0 !important;
    letter-spacing: -0.015em !important;
}

/* 3. Form Group Labels & Required Markers */
.form-group {
    margin-bottom: 20px !important;
}

.form-group label,
.control-label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    letter-spacing: -0.005em !important;
    margin-bottom: 7px !important;
    display: inline-block !important;
}

.form-group label .text-danger,
.form-group label span.tw-text-danger-500,
label .text-danger {
    color: #ef4444 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-left: 2px !important;
}

/* Modern Badge Styling for + Add Field / + Option Links & Buttons */
a[onclick*="onExpenseAddFieldClick"],
a.tw-block[onclick],
a:has(i.fa-plus),
.input-group-btn a.btn,
.input-group-btn a.btn-default {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    margin: 6px 6px 14px 0 !important;
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%) !important;
    border: 1.5px dashed rgba(6, 182, 212, 0.5) !important;
    border-radius: 20px !important;
    color: #0284c7 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(6, 182, 212, 0.08) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

a[onclick*="onExpenseAddFieldClick"]:hover,
a.tw-block[onclick]:hover,
a:has(i.fa-plus):hover,
.input-group-btn a.btn:hover,
.input-group-btn a.btn-default:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    border-color: #0284c7 !important;
    color: #0369a1 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.18) !important;
    text-decoration: none !important;
}

/* 4. Modern Input Fields, Textareas, & Selects */
.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="number"].form-control,
input[type="password"].form-control,
input[type="search"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
select.form-control,
textarea.form-control {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: var(--tepl-form-radius) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px !important;
    color: #0f172a !important;
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.02) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    height: 44px !important;
}

/* Ensure inputs with icons keep their extra padding */
.has-feedback .form-control,
.has-feedback input[type="text"].form-control,
.has-feedback input[type="email"].form-control,
.has-feedback input[type="password"].form-control,
.has-feedback input[type="number"].form-control {
    padding-right: 42.5px !important;
}

textarea.form-control {
    height: auto !important;
    min-height: 90px !important;
    padding: 12px 14px !important;
}

/* Input Focus Ring & Hover States */
.form-control:hover,
input.form-control:hover,
select.form-control:hover,
textarea.form-control:hover {
    border-color: #94a3b8 !important;
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15) !important;
    background-color: #ffffff !important;
    outline: none !important;
}

/* 5. Bootstrap Select Pickers */
.bootstrap-select > .btn.dropdown-toggle {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: var(--tepl-form-radius) !important;
    padding: 9px 14px !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.bootstrap-select > .btn.dropdown-toggle:hover {
    border-color: #94a3b8 !important;
}

.bootstrap-select > .btn.dropdown-toggle:focus,
.bootstrap-select.open > .btn.dropdown-toggle {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15) !important;
    background-color: #ffffff !important;
    outline: none !important;
}

/* 6. Date Pickers & Input Group Addons */
.input-group .form-control:first-child,
.input-group-addon:first-child {
    border-top-left-radius: var(--tepl-form-radius) !important;
    border-bottom-left-radius: var(--tepl-form-radius) !important;
}

.input-group .form-control:last-child,
.input-group-addon:last-child {
    border-top-right-radius: var(--tepl-form-radius) !important;
    border-bottom-right-radius: var(--tepl-form-radius) !important;
}

.input-group-addon {
    background-color: #f0fdfa !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #06b6d4 !important;
    font-size: 14px !important;
    padding: 9px 14px !important;
    transition: all 0.2s ease !important;
}

/* 7. File Upload Dropzone Areas (Targeting dropzone upload container, NOT the whole form) */
.dropzone .dz-message,
.form-upload-area,
.dropzone-file-upload {
    background-color: #f0fdfa !important;
    border: 2px dashed #06b6d4 !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    text-align: center !important;
    transition: all 0.25s ease !important;
}

.dropzone .dz-message:hover,
.form-upload-area:hover {
    background-color: #e0f2fe !important;
    border-color: #0284c7 !important;
}

.dropzone .dz-message {
    color: #0284c7 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin: 10px 0 !important;
}

/* Explicit Left Alignment Preservation for All Form Labels, Fields, & Contents */
form,
form .form-group,
form label,
form .control-label,
form a,
form p,
form span,
form h1, form h2, form h3, form h4, form h5, form h6,
.panel-body,
.panel_s {
    text-align: left !important;
}

/* 8. Checkboxes, Radio Buttons, & Toggles */
.checkbox label,
.radio label {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    padding-left: 24px !important;
    cursor: pointer !important;
}

.checkbox input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #06b6d4 !important;
    border-color: #06b6d4 !important;
}

.radio input[type="radio"]:checked + label::before,
.radio-primary input[type="radio"]:checked + label::before {
    border-color: #06b6d4 !important;
}

.radio input[type="radio"]:checked + label::after,
.radio-primary input[type="radio"]:checked + label::after {
    background-color: #06b6d4 !important;
}

/* 9. Modern Button System */
.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Primary Submit / Save Button */
.btn-primary,
.btn-info,
button[type="submit"].btn,
input[type="submit"].btn {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.28) !important;
}

.btn-primary:hover:not(:disabled),
.btn-info:hover:not(:disabled),
button[type="submit"].btn:hover:not(:disabled),
input[type="submit"].btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(6, 182, 212, 0.38) !important;
}

/* Secondary Button */
.btn-default,
.btn-secondary {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background-color: #f8fafc !important;
    border-color: #06b6d4 !important;
    color: #0284c7 !important;
    transform: translateY(-1.5px) !important;
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35) !important;
}

/* 10. Form Action Bar / Bottom Submit Container */
.btn-bottom-toolbar {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border-top: 1.5px solid rgba(0, 180, 216, 0.3) !important;
    border-left: 1.5px solid rgba(0, 180, 216, 0.3) !important;
    border-top-left-radius: 18px !important;
    padding: 12px 28px !important;
    box-shadow: 0 -6px 25px rgba(5, 59, 76, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

.btn-bottom-pusher {
    height: 75px !important;
    clear: both !important;
}

.panel_s:has(.btn-bottom-toolbar) {
    overflow: visible !important;
}

/* 11. Responsive Adjustments */
@media (max-width: 768px) {
    .panel_s {
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }
    
    .form-control,
    .bootstrap-select > .btn.dropdown-toggle {
        height: 42px !important;
        font-size: 13.5px !important;
    }

    .btn-bottom-toolbar {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        padding: 10px 16px !important;
        justify-content: center !important;
    }
}

/* =========================================================
   TEPL GROUP - DYNAMIC FILTER VISUAL REDESIGN SYSTEM
   (Strictly UI/Presentation-Layer Styling - Preserves 100% Functionality)
   ========================================================= */

/* 1. FILTER BUTTON */
.btn-group > button.dropdown-toggle:has(.fa-filter),
.btn-group > button.dropdown-toggle:has(.fa-funnel-dollar),
app-filters .btn-group > button.dropdown-toggle,
#filters-wrapper .btn-group > button.dropdown-toggle,
.dynamic-filter-button {
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    color: #063f4d !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 7px 15px !important;
    box-shadow: 0 4px 14px rgba(15, 70, 85, 0.08) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.btn-group > button.dropdown-toggle:has(.fa-filter):hover,
app-filters .btn-group > button.dropdown-toggle:hover,
#filters-wrapper .btn-group > button.dropdown-toggle:hover,
.dynamic-filter-button:hover {
    background: #ffffff !important;
    border-color: #06b6d4 !important;
    color: #0284c7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.22) !important;
}

/* 2. FILTER BUTTON ACTIVE STATE */
.btn-group.open > button.dropdown-toggle:has(.fa-filter),
app-filters .btn-group.open > button.dropdown-toggle,
#filters-wrapper .btn-group.open > button.dropdown-toggle,
.dynamic-filter-button.active {
    background: rgba(240, 253, 250, 0.95) !important;
    border-color: #06b6d4 !important;
    color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18) !important;
}

/* 3. SAVED FILTER DROPDOWN */
.btn-group > .dropdown-menu.width300,
app-filters .dropdown-menu,
#filters-wrapper .dropdown-menu,
.dynamic-filter-dropdown {
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 35px rgba(15, 70, 85, 0.15) !important;
    padding: 14px 16px !important;
    animation: filterDropdownFadeIn 220ms ease-out !important;
}

@keyframes filterDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. SAVED FILTER HEADER TABS & LINKS */
.dropdown-menu.width300 a,
app-filters .dropdown-menu a,
#filters-wrapper .dropdown-menu a {
    color: #0284c7 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    position: relative !important;
}

.dropdown-menu.width300 a:hover,
app-filters .dropdown-menu a:hover {
    color: #06b6d4 !important;
}

.dropdown-menu.width300 a.active::after,
app-filters .dropdown-menu a.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #06b6d4, #0284c7) !important;
    border-radius: 2px !important;
}

/* 5. EMPTY STATE TYPOGRAPHY */
.dropdown-menu.width300 p.text-muted,
app-filters .dropdown-menu .empty-state,
#filters-wrapper .dropdown-menu p {
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 8px 0 !important;
}

/* 6. CREATE FILTER MODAL */
.filters-modal .modal-content,
.modal:has(#add_filter) .modal-content,
.modal:has(.filters-modal) .modal-content {
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.20) !important;
    overflow: visible !important;
    animation: filterModalScale 240ms ease-out !important;
}

@keyframes filterModalScale {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 7. GLOBAL MODAL & BACKDROP Z-INDEX HIERARCHY */
.modal-backdrop,
.modal-backdrop.in,
.backdrop,
body.noscroll .backdrop,
#mce-modal-block,
.ui-widget-overlay,
.blockOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(6, 45, 55, 0.35) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 1040 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal,
[role="dialog"],
div[id$="-modal"],
div[id$="_modal"],
#_task_modal,
#task-modal,
.task-modal-single,
#lead-modal,
#task-tracking-stats-modal,
.proposal-convert-modal,
.proposal-pipeline-modal,
.estimate-pipeline,
.invoice-project,
#newsfeed_images_modal {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1051 !important;
}

/* Ensure inner panels within modals don't isolate stacking context or blur content */
.modal .panel_s,
.modal-content .panel_s,
.modal-body .panel_s,
.modal .panel,
.modal-content .panel,
.modal-body .panel,
.modal-dialog .panel_s,
.modal-dialog .panel {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: static !important;
    z-index: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.modal.panel_s,
.modal.panel {
    position: fixed !important;
    z-index: 1050 !important;
    overflow: visible !important;
}

/* 8. MODAL HEADER & CLOSE BUTTON */
.filters-modal .modal-header,
.modal:has(#add_filter) .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.12) !important;
    padding: 18px 24px !important;
    position: relative !important;
}

.filters-modal .modal-title,
.modal:has(#add_filter) .modal-title {
    color: #063f4d !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.filters-modal .modal-header .close,
.modal:has(#add_filter) .modal-header .close {
    position: absolute !important;
    right: 20px !important;
    top: 18px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(241, 245, 249, 0.8) !important;
    color: #64748b !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.22s ease !important;
    border: none !important;
    outline: none !important;
}

.filters-modal .modal-header .close:hover,
.modal:has(#add_filter) .modal-header .close:hover {
    background: rgba(6, 182, 212, 0.12) !important;
    color: #06b6d4 !important;
    transform: rotate(90deg) scale(1.08) !important;
}

/* 9. ADD RULE DROPDOWN */
.filters-modal .bootstrap-select > .btn.dropdown-toggle,
.modal:has(#add_filter) .bootstrap-select > .btn.dropdown-toggle {
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    height: 42px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
}

.filters-modal .bootstrap-select > .btn.dropdown-toggle:focus,
.filters-modal .bootstrap-select.open > .btn.dropdown-toggle,
.modal:has(#add_filter) .bootstrap-select.open > .btn.dropdown-toggle {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12) !important;
    background: #ffffff !important;
}

/* 10. RULE SELECTION DROPDOWN MENU */
.filters-modal .bootstrap-select .dropdown-menu.inner,
.modal:has(#add_filter) .bootstrap-select .dropdown-menu.inner {
    background: #ffffff !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 10px 25px rgba(15, 70, 85, 0.12) !important;
    max-height: 160px !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
}

.filters-modal .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar {
    width: 5px !important;
}
.filters-modal .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.4) !important;
    border-radius: 10px !important;
}

.filters-modal .bootstrap-select .dropdown-menu.inner > li > a {
    padding: 9px 14px !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    transition: background 0.18s ease !important;
}

.filters-modal .bootstrap-select .dropdown-menu.inner > li > a:hover {
    background: rgba(6, 182, 212, 0.08) !important;
    color: #063f4d !important;
}

.filters-modal .bootstrap-select .dropdown-menu.inner > li.selected > a,
.filters-modal .bootstrap-select .dropdown-menu.inner > li.active > a {
    background: rgba(6, 182, 212, 0.12) !important;
    color: #075985 !important;
    font-weight: 600 !important;
}

/* 11. SEARCH INSIDE RULE DROPDOWN */
.filters-modal .bs-searchbox input,
.modal:has(#add_filter) .bs-searchbox input {
    border-radius: 9px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
    height: 38px !important;
    transition: all 0.2s ease !important;
}

.filters-modal .bs-searchbox input:focus,
.modal:has(#add_filter) .bs-searchbox input:focus {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
    background: #ffffff !important;
    outline: none !important;
}

/* 12. SAVE FILTER TOGGLE SWITCH */
.filters-modal .onoffswitch,
.modal:has(#add_filter) .onoffswitch {
    position: relative !important;
    width: 48px !important;
    height: 24px !important;
}

.filters-modal .onoffswitch-label,
.modal:has(#add_filter) .onoffswitch-label {
    display: block !important;
    overflow: hidden !important;
    cursor: pointer !important;
    height: 24px !important;
    padding: 0 !important;
    line-height: 24px !important;
    border-radius: 20px !important;
    background-color: #cbd5e1 !important;
    transition: background-color 220ms ease, border-color 220ms ease !important;
}

.filters-modal .onoffswitch-checkbox:checked + .onoffswitch-label,
.modal:has(#add_filter) .onoffswitch-checkbox:checked + .onoffswitch-label {
    background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
}

/* 13. APPLY BUTTON */
.filters-modal .modal-footer .btn-primary,
.modal:has(#add_filter) .modal-footer .btn-primary,
.filters-modal .modal-footer button[type="submit"] {
    background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 8px 22px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(6, 182, 212, 0.20) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.filters-modal .modal-footer .btn-primary:hover,
.modal:has(#add_filter) .modal-footer .btn-primary:hover,
.filters-modal .modal-footer button[type="submit"]:hover {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 18px rgba(6, 182, 212, 0.28) !important;
}

.filters-modal .modal-footer .btn-primary:active,
.modal:has(#add_filter) .modal-footer .btn-primary:active,
.filters-modal .modal-footer button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 10px rgba(6, 182, 212, 0.20) !important;
}

/* FIX DROPDOWN OVERLAP / Z-INDEX STACKING OVER MODAL FOOTER & BUTTONS */
.filters-modal .modal-body,
.modal:has(#add_filter) .modal-body {
    position: relative !important;
    z-index: 1053 !important;
    overflow: visible !important;
}

.filters-modal .bootstrap-select,
.modal:has(#add_filter) .bootstrap-select {
    position: relative !important;
    z-index: 1054 !important;
}

.filters-modal .bootstrap-select.open,
.modal:has(#add_filter) .bootstrap-select.open {
    z-index: 1060 !important;
}

.filters-modal .bootstrap-select .dropdown-menu,
.modal:has(#add_filter) .bootstrap-select .dropdown-menu,
.filters-modal .bootstrap-select.open .dropdown-menu,
.modal:has(#add_filter) .bootstrap-select.open .dropdown-menu {
    z-index: 1065 !important;
}

.filters-modal .modal-footer,
.modal:has(#add_filter) .modal-footer {
    position: relative !important;
    z-index: 1052 !important;
}

.filters-modal .onoffswitch,
.modal:has(#add_filter) .onoffswitch,
.filters-modal .modal-footer .btn-primary,
.modal:has(#add_filter) .modal-footer .btn-primary {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================================
   TEPL GROUP - SMOOTH TABLE & PANEL RESIZE TOGGLE ANIMATION
   (Smooth 350ms transition when toggling between full & small table views)
   ========================================================= */

/* 1. Column Width & Flex Smooth Transition */
#wrapper div[class*="col-md-"],
#wrapper div[class*="col-lg-"],
.panel_s,
.panel_s > .panel-body,
#small-table,
.small-table-right-col,
.table-responsive,
.dataTables_wrapper {
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                flex-basis 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                flex 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                transform 0.35s ease,
                box-shadow 0.35s ease !important;
}

/* 2. Right Side Preview Column Entrance Animation */
.small-table-right-col,
div[id*="-preview"],
div[class*="-preview"] {
    animation: sidePanelSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes sidePanelSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* 3. Small View Toggle Button Styling & Micro-Interactions */
a.toggle-small-view,
button.toggle-small-view,
a[onclick*="toggle_small_view"],
.btn:has(.fa-angle-double-left),
.btn:has(.fa-angle-double-right),
.btn:has(.fa-angles-left),
.btn:has(.fa-angles-right) {
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    color: #063f4d !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    box-shadow: 0 4px 14px rgba(15, 70, 85, 0.08) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

a.toggle-small-view:hover,
button.toggle-small-view:hover,
a[onclick*="toggle_small_view"]:hover {
    background: #ffffff !important;
    border-color: #06b6d4 !important;
    color: #0284c7 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.20) !important;
}

a.toggle-small-view i,
button.toggle-small-view i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

a.toggle-small-view:hover i,
button.toggle-small-view:hover i {
    transform: scale(1.18) !important;
}


/* =========================================================
   TEPL GROUP - CUSTOM TEAL HEADER THEME
   ========================================================= */

#header {
    background-color: #053b4c !important;
    background-image: 
        radial-gradient(circle at 100% 50%, rgba(0, 180, 216, 0.25) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%2300b4d8' fill-opacity='0.16' d='M0,160 C80,240 180,180 300,260 L300,300 L0,300 Z'%3E%3C/path%3E%3Cpath fill='%230077b6' fill-opacity='0.2' d='M0,210 C120,150 200,280 300,220 L300,300 L0,300 Z'%3E%3C/path%3E%3C/svg%3E"),
        linear-gradient(90deg, #053b4c 0%, #084e61 45%, #0a657c 75%, #084e61 100%) !important;
    background-position: right center, bottom center, center left !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: cover, 100% 180px, cover !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Header Navbar Links and Icons text color (make white) */
#header .nav > li > a,
#header .nav > li > a i,
#header .nav > li > a svg,
#header .hide-menu,
#header .hide-menu svg,
#header .mobile-menu-toggle,
#header .mobile-menu-toggle i {
    color: rgba(255, 255, 255, 0.85) !important;
}

#header .nav > li > a:hover,
#header .nav > li > a:hover i,
#header .nav > li > a:hover svg,
#header .nav > li > a:focus,
#header .hide-menu:hover,
#header .hide-menu:hover svg,
#header .hide-menu:focus,
#header .mobile-menu-toggle:hover {
    color: #ffffff !important;
}

/* Ensure specific utility classes don't override our white color */
#header .header-timers a i,
#header .header-todo a i,
#header .header-newsfeed a svg,
#header .dropdown-toggle i,
#header .dropdown-toggle svg,
#header .header-notifications a i,
#header .header-notifications a svg {
    color: rgba(255, 255, 255, 0.85) !important;
}

#header .header-timers a:hover i,
#header .header-todo a:hover i,
#header .header-newsfeed a:hover svg,
#header .dropdown-toggle:hover i,
#header .dropdown-toggle:hover svg,
#header .header-notifications a:hover i,
#header .header-notifications a:hover svg {
    color: #ffffff !important;
}

/* Fix right links hover background to light glass instead of dark */
#header .nav > li > a:hover,
#header .nav > li > a:focus,
#header .hide-menu:hover,
#header .hide-menu:focus,
#header .mobile-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Remove unwanted white background from the plus icon (quick create) and other nav icons */
#header .nav > li.icon,
#header .nav > li.icon > a,
#header .nav > li.icon > a:focus,
#header .nav > li.icon > a:active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

/* =========================================================
   TEPL GROUP - ADMIN NOTIFICATIONS DROPDOWN TEXT COLOR FIX
   Ensures ALL notification titles, text, names & dates are dark slate/black
   so they are 100% visible and readable against white/light backgrounds.
   ========================================================= */

/* Elevate header stacking context ONLY when a notification/header dropdown is actively OPEN (leaves header 100% untouched when closed) */
#header:has(.open),
#header:has(.notifications-wrapper.open),
li.notifications-wrapper.open,
.notifications-wrapper.open,
.header-notifications.open {
    position: relative !important;
    z-index: 9999 !important;
}

#header .notifications-wrapper .dropdown-menu.notifications,
#header ul.dropdown-menu.notifications,
ul.dropdown-menu.notifications,
.notifications-wrapper .dropdown-menu.notifications {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.25) !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 400px !important;
    max-width: 92vw !important;
    z-index: 10000 !important;
}

/* ULTRA-HIGH SPECIFICITY DARK TEXT ENFORCEMENT */
#header .notifications-wrapper *,
#header .notifications-wrapper a,
#header .notifications-wrapper a *,
#header .notifications-wrapper span,
#header .notifications-wrapper div,
#header .notifications *,
#header .notifications a,
#header .notifications a *,
#header .notifications span,
#header .notifications div,
ul.notifications *,
ul.notifications a,
ul.notifications a *,
ul.notifications span,
ul.notifications div {
    color: #0f172a !important;
}

/* Notification Items Styling */
#header ul.dropdown-menu.notifications li.notification-wrapper a.notification-handler {
    background-color: #ffffff !important;
    display: block !important;
    padding: 12px 16px !important;
    transition: background 0.2s ease !important;
    text-decoration: none !important;
}

#header ul.dropdown-menu.notifications li.notification-wrapper a.notification-handler:hover {
    background-color: #f1f5f9 !important;
}

/* Unread Notification Items (Soft Blue Tint) */
#header ul.dropdown-menu.notifications li.notification-wrapper a.unread-notification {
    background-color: #f0f9ff !important;
    border-left: 4px solid #0284c7 !important;
}

#header ul.dropdown-menu.notifications li.notification-wrapper a.unread-notification:hover {
    background-color: #e0f2fe !important;
}

#header ul.dropdown-menu.notifications li.notification-wrapper a.unread-notification *,
#header ul.dropdown-menu.notifications li.notification-wrapper a.unread-notification .notification-title {
    color: #0369a1 !important;
}

/* Notification Title Text */
#header ul.dropdown-menu.notifications .notification-title,
ul.dropdown-menu.notifications .notification-title {
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
}

/* Notification Date / Time Subtitle */
#header ul.dropdown-menu.notifications .notification-date,
ul.dropdown-menu.notifications .notification-date {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    display: inline-block !important;
}

/* Top Action Link ("Mark all as read") */
#header ul.dropdown-menu.notifications div.tw-mb-1\.5 a,
#header ul.dropdown-menu.notifications div.tw-mb-1\.5 a *,
ul.dropdown-menu.notifications a.text-muted {
    color: #0284c7 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* Badges / Customer Indicator Tag */
#header ul.dropdown-menu.notifications .label-info {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    border: 1px solid #bae6fd !important;
    display: inline-block !important;
    margin-top: 4px !important;
}

/* Mark as Read Icon Button */
#header ul.dropdown-menu.notifications a.not-mark-as-read-inline,
#header ul.dropdown-menu.notifications a.not-mark-as-read-inline i,
#header ul.dropdown-menu.notifications a.not-mark-as-read-inline svg {
    color: #0284c7 !important;
}

#header ul.dropdown-menu.notifications a.not-mark-as-read-inline:hover i,
#header ul.dropdown-menu.notifications a.not-mark-as-read-inline:hover svg {
    color: #0369a1 !important;
}

/* Bottom Footer Bar ("View all notifications") */
#header ul.dropdown-menu.notifications div.tw-bg-neutral-50 {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 12px !important;
    text-align: center !important;
}

#header ul.dropdown-menu.notifications div.tw-bg-neutral-50 a.btn,
#header ul.dropdown-menu.notifications div.tw-bg-neutral-50 a.btn * {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    border: none !important;
    padding: 8px 18px !important;
}

/* =========================================================
   TEPL GROUP - GLOBAL TOOLTIP FIX
   Ensures tooltip text is white and clearly visible
   ========================================================= */
.tooltip,
.tooltip *,
.tooltip .tooltip-inner,
.tooltip-inner,
#header .tooltip,
#header .tooltip *,
#header .notifications-wrapper .tooltip,
#header .notifications-wrapper .tooltip *,
ul.notifications .tooltip,
ul.notifications .tooltip * {
    color: #ffffff !important;
    background-color: #1e293b !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Fix tooltip arrow colors to match the new background */
.tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow { border-top-color: #1e293b !important; }
.tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow { border-bottom-color: #1e293b !important; }
.tooltip.right .tooltip-arrow { border-right-color: #1e293b !important; }
.tooltip.left .tooltip-arrow { border-left-color: #1e293b !important; }

/* =========================================================
   TEPL GROUP - ROW OPTION ICON BUTTONS
   ========================================================= */
.btn-icon-primary {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}
.btn-icon-primary:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

.btn-icon-orange {
    background-color: #fff7ed !important;
    color: #ea580c !important;
}
.btn-icon-orange:hover {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

.btn-icon-danger {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}
.btn-icon-danger:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

.btn-icon-success {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
}
.btn-icon-success:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

.tepl-report-filter-panel {
    background-color: rgba(255, 255, 255, 0.88) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(232, 251, 255, 0.82) 65%, rgba(213, 247, 250, 0.7) 100%) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 14px 40px rgba(15, 70, 85, 0.12), 0 4px 14px rgba(6, 182, 212, 0.08) !important;
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
    margin-bottom: 28px !important;
    animation: reportFilterFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tepl-report-filter-panel:has(.bootstrap-select.open),
.tepl-report-filter-panel:focus-within {
    z-index: 500 !important;
}

.tepl-report-filter-panel .panel-body {
    overflow: visible !important;
    position: relative !important;
    z-index: 501 !important;
}

.tepl-report-filter-panel .bootstrap-select.open {
    z-index: 502 !important;
}

@keyframes reportFilterFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Top Cyan Accent Line */
.tepl-report-filter-panel::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #06b6d4 0%, #0284c7 50%, #053b4c 100%) !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    z-index: 3 !important;
}

/* 2. Select Pickers in Report Selector Header */
.tepl-report-filter-panel .bootstrap-select > .btn.dropdown-toggle {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 9px 14px !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tepl-report-filter-panel .bootstrap-select > .btn.dropdown-toggle:hover {
    border-color: #06b6d4 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15) !important;
}

.tepl-report-filter-panel .bootstrap-select > .btn.dropdown-toggle:focus,
.tepl-report-filter-panel .bootstrap-select.open > .btn.dropdown-toggle {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.18) !important;
    background-color: #ffffff !important;
}

/* 3. Dropdown Menu Options Styling, Overlay & Scroll Fix */
.tepl-report-filter-panel .bootstrap-select > .dropdown-menu {
    border-radius: 14px !important;
    border: 1.5px solid rgba(6, 182, 212, 0.3) !important;
    box-shadow: 0 16px 40px rgba(15, 70, 85, 0.2) !important;
    padding: 6px !important;
    margin-top: 4px !important;
    z-index: 999999 !important;
    position: absolute !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    animation: reportDropdownSlideDown 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: #ffffff !important;
}

/* Reset inner list containers so they don't render duplicate white boxes */
.tepl-report-filter-panel .bootstrap-select .dropdown-menu ul,
.tepl-report-filter-panel .bootstrap-select .dropdown-menu .inner,
.tepl-report-filter-panel .bootstrap-select .dropdown-menu.inner {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.tepl-report-filter-panel .bootstrap-select .bs-searchbox:empty,
.tepl-report-filter-panel .bootstrap-select .bs-searchbox.hide {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tepl-report-filter-panel .bootstrap-select > .dropdown-menu::-webkit-scrollbar,
.tepl-report-filter-panel .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar {
    width: 6px !important;
}

.tepl-report-filter-panel .bootstrap-select > .dropdown-menu::-webkit-scrollbar-thumb,
.tepl-report-filter-panel .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.45) !important;
    border-radius: 10px !important;
}

.tepl-report-filter-panel .bootstrap-select .dropdown-menu li a {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-bottom: 2px !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    color: #0f172a !important;
    transition: all 0.18s ease !important;
}

.tepl-report-filter-panel .bootstrap-select .dropdown-menu li a:hover,
.tepl-report-filter-panel .bootstrap-select .dropdown-menu li.selected a {
    background-color: rgba(6, 182, 212, 0.12) !important;
    color: #0284c7 !important;
    font-weight: 600 !important;
}

/* 4. Generated Report Container Entrance & Lower Stacking Level */
#report,
#report .panel_s {
    position: relative !important;
    z-index: 1 !important;
}

#report:not(.hide) {
    animation: reportContainerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes reportContainerFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Chart Canvas Responsive Smooth Transitions */
.chart-income,
.chart-payment-modes,
.customers-group-gen {
    transition: all 0.3s ease !important;
}

/* =========================================================
   TEPL GROUP - PREMIUM FORM HEADERS & TABS DESIGN SYSTEM
   (Vibrant Cyan-Blue Gradient Tabs, Zero Top Gap, Icon Badges & Glassmorphism)
   ========================================================= */

/* 1. Universal Form & Module Header Container (Zero Unnecessary White Space Above Tabs) */
.panel_s .panel-heading,
.horizontal-scroll-in-child:has(.nav-tabs) .panel-heading,
.customer-profile-group-heading {
    background: transparent !important;
    border-bottom: 1.5px solid rgba(6, 182, 212, 0.15) !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

/* Eliminate Top Padding Inside Panel Body Above Tabs */
.panel_s > .panel-body:has(.nav-tabs),
.panel_s > .panel-body:has(.horizontal-tabs),
.panel_s > .panel-body:has(.horizontal-scrollable-tabs),
.panel-body:has(> .horizontal-scrollable-tabs),
.panel-body:has(> .horizontal-tabs),
.panel-body:has(> ul.nav-tabs) {
    padding-top: 12px !important;
}

/* Eliminate Unnecessary Top Space & Outer Box Borders Above Tabs */
.horizontal-scrollable-tabs,
.panel-full-width-tabs,
.horizontal-scroll-in-child,
.horizontal-tabs,
.horizontal-tabs > ul.nav-tabs,
.nav-tabs-segmented,
div:has(> ul.nav-tabs) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

h4.customer-profile-group-heading {
    color: #053b4c !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1.5px solid rgba(6, 182, 212, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* 2. Tab Navigation Container (ul.nav-tabs, ul.horizontal-tabs, nav-tabs-segmented, etc.) */
ul.nav-tabs,
ul.horizontal-tabs,
.nav-tabs-horizontal,
.nav-tabs-segmented,
.customer-profile-tabs,
.horizontal-tabs > ul.nav-tabs,
div:has(> ul.nav-tabs) > ul.nav-tabs {
    border-bottom: 1.5px solid rgba(6, 182, 212, 0.16) !important;
    background: transparent !important;
    margin-top: 0 !important;
    margin-bottom: 26px !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    list-style: none !important;
    position: relative !important;
    z-index: 5 !important;
}

ul.nav-tabs > li,
ul.horizontal-tabs > li,
.nav-tabs-horizontal > li,
.nav-tabs-segmented > li {
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Base Floating Pill Tab (Inactive State - Pure White Pill with Soft Cyan Border & Shadow) */
ul.nav-tabs > li > a,
ul.horizontal-tabs > li > a,
.nav-tabs-horizontal > li > a,
.nav-tabs-segmented > li > a {
    padding: 10px 24px 10px 14px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #053b4c !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(6, 182, 212, 0.22) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 14px rgba(15, 70, 85, 0.06) !important;
    cursor: pointer !important;
    position: relative !important;
    line-height: 1.2 !important;
}

/* Inactive Tab Hover & Focus State */
ul.nav-tabs > li > a:hover,
ul.horizontal-tabs > li > a:hover,
.nav-tabs-horizontal > li > a:hover,
.nav-tabs-segmented > li > a:hover,
ul.nav-tabs > li > a:focus,
ul.horizontal-tabs > li > a:focus {
    background: #ffffff !important;
    color: #0284c7 !important;
    border-color: #06b6d4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.18) !important;
}

/* 3. ACTIVE FLOATING PILL TAB (Vibrant Cyan-Blue Gradient Capsule with Glow Shadow & Shift Animation) */
ul.nav-tabs > li.active > a,
ul.horizontal-tabs > li.active > a,
.nav-tabs-horizontal > li.active > a,
.nav-tabs-segmented > li.active > a,
ul.nav-tabs > li.active > a:hover,
ul.horizontal-tabs > li.active > a:hover,
.nav-tabs-horizontal > li.active > a:hover,
.nav-tabs-segmented > li.active > a:hover,
ul.nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 8px 24px -2px rgba(0, 180, 216, 0.48), 0 4px 12px rgba(0, 119, 182, 0.3) !important;
    transform: translateY(-2px) scale(1.02) !important;
    z-index: 10 !important;
    animation: pillActiveShift 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes pillActiveShift {
    0% {
        transform: scale(0.92) translateX(-6px);
    }
    50% {
        transform: scale(1.04) translateY(-3px);
    }
    100% {
        transform: scale(1.02) translateY(-2px);
    }
}

/* Remove old top glowing line since it's a full rounded pill capsule */
ul.nav-tabs > li.active > a::after,
ul.horizontal-tabs > li.active > a::after,
.nav-tabs-horizontal > li.active > a::after {
    display: none !important;
}

/* 4. CIRCULAR ICON BADGES INSIDE PILL TABS */
ul.nav-tabs > li > a i,
ul.horizontal-tabs > li > a i,
.nav-tabs-horizontal > li > a i,
.nav-tabs-segmented > li > a i,
ul.nav-tabs > li > a svg,
ul.horizontal-tabs > li > a svg {
    font-size: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(6, 182, 212, 0.14) !important;
    color: #0284c7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.22s ease !important;
    flex-shrink: 0 !important;
}

ul.nav-tabs > li.active > a i,
ul.horizontal-tabs > li.active > a i,
.nav-tabs-horizontal > li.active > a i,
.nav-tabs-segmented > li.active > a i,
ul.nav-tabs > li.active > a svg,
ul.horizontal-tabs > li.active > a svg {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    animation: iconBadgeShift 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Base style for pseudo-element circular icon badge when HTML <i> tag is missing */
ul.nav-tabs > li > a::before,
ul.horizontal-tabs > li > a::before,
.nav-tabs-horizontal > li > a::before,
.nav-tabs-segmented > li > a::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(6, 182, 212, 0.14) !important;
    color: #0284c7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    transition: all 0.22s ease !important;
    flex-shrink: 0 !important;
}

/* Active tab pseudo icon badge */
ul.nav-tabs > li.active > a::before,
ul.horizontal-tabs > li.active > a::before,
.nav-tabs-horizontal > li.active > a::before,
.nav-tabs-segmented > li.active > a::before {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    animation: iconBadgeShift 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes iconBadgeShift {
    0% {
        transform: scale(0.75) rotate(-15deg);
    }
    60% {
        transform: scale(1.15) rotate(6deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Hide pseudo icon if tab link ALREADY contains an explicit <i> or <svg> tag */
ul.nav-tabs > li > a:has(i)::before,
ul.nav-tabs > li > a:has(svg)::before,
ul.horizontal-tabs > li > a:has(i)::before,
.nav-tabs-horizontal > li > a:has(i)::before {
    display: none !important;
}

/* Automatic FontAwesome Icons mapped by tab href / slug */
/* Contact Info / Profile / Details */
ul.nav-tabs > li > a[href*="contact_info"]::before,
ul.nav-tabs > li > a[href*="profile"]::before,
ul.nav-tabs > li > a[href*="details"]::before,
ul.nav-tabs > li > a[href*="general"]::before { content: "\f007" !important; }

/* Billing & Shipping */
ul.nav-tabs > li > a[href*="billing"]::before,
ul.nav-tabs > li > a[href*="shipping"]::before { content: "\f0d1" !important; }

/* Custom Fields */
ul.nav-tabs > li > a[href*="custom_fields"]::before { content: "\f0cb" !important; }

/* Admins / Users */
ul.nav-tabs > li > a[href*="admins"]::before,
ul.nav-tabs > li > a[href*="members"]::before { content: "\f500" !important; }

/* Notes / Reminders */
ul.nav-tabs > li > a[href*="notes"]::before { content: "\f24a" !important; }
ul.nav-tabs > li > a[href*="reminders"]::before { content: "\f0f3" !important; }

/* Tasks / Projects / Files */
ul.nav-tabs > li > a[href*="tasks"]::before { content: "\f0ae" !important; }
ul.nav-tabs > li > a[href*="projects"]::before { content: "\f07b" !important; }
ul.nav-tabs > li > a[href*="attachments"]::before,
ul.nav-tabs > li > a[href*="files"]::before { content: "\f0c6" !important; }

/* Financial Tabs (Invoices, Estimates, Proposals, Expenses, Payments) */
ul.nav-tabs > li > a[href*="proposals"]::before { content: "\f15c" !important; }
ul.nav-tabs > li > a[href*="estimates"]::before { content: "\f1ec" !important; }
ul.nav-tabs > li > a[href*="invoices"]::before { content: "\f571" !important; }
ul.nav-tabs > li > a[href*="payments"]::before { content: "\f0d6" !important; }
ul.nav-tabs > li > a[href*="expenses"]::before { content: "\f53a" !important; }
ul.nav-tabs > li > a[href*="contracts"]::before { content: "\f56c" !important; }

/* Default fallback icon for tabs without specific match or HTML icon */
ul.nav-tabs > li > a:not([href*="contact_info"]):not([href*="profile"]):not([href*="details"]):not([href*="general"]):not([href*="billing"]):not([href*="shipping"]):not([href*="custom_fields"]):not([href*="admins"]):not([href*="members"]):not([href*="notes"]):not([href*="reminders"]):not([href*="tasks"]):not([href*="projects"]):not([href*="attachments"]):not([href*="files"]):not([href*="proposals"]):not([href*="estimates"]):not([href*="invoices"]):not([href*="payments"]):not([href*="expenses"]):not([href*="contracts"])::before {
    content: "\f007" !important;
}

/* 5. Smooth Tab Content Pane Shifting Entrance Animation */
.tab-content > .tab-pane.active {
    animation: tabPaneShiftIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes tabPaneShiftIn {
    0% {
        opacity: 0;
        transform: translateX(20px) scale(0.98);
    }
    60% {
        opacity: 0.9;
        transform: translateX(-2px) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* 6. Form Labels — Bold + ALL CAPS + Structured Spacing */
.form-group label,
.form-group > label,
label.control-label,
.control-label {
    color: #053b4c !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1.4 !important;
}

/* Red Asterisk for Required Fields */
.form-group label span.text-danger,
.form-group label .text-danger,
label.control-label .text-danger,
label span.req,
label .text-danger {
    color: #ef4444 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Keep checkbox / radio labels readable (not all caps) */
.checkbox label,
.radio label,
.checkbox-info label,
.checkbox-primary label,
.checkbox-success label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* =========================================================
   ON/OFF TOGGLE SWITCH STYLING (PROPOSALS ALLOW COMMENTS)
   ========================================================= */
.onoffswitch {
    position: relative !important;
    width: 46px !important;
    height: 24px !important;
    display: inline-block !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.onoffswitch-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

.onoffswitch-label {
    display: block !important;
    overflow: hidden !important;
    cursor: pointer !important;
    height: 24px !important;
    width: 46px !important;
    padding: 0 !important;
    line-height: 24px !important;
    border-radius: 20px !important;
    background-color: #cbd5e1 !important;
    transition: background-color 0.22s ease !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
    background: linear-gradient(135deg, #00b4d8, #0077b6) !important;
}

.onoffswitch-label .onoffswitch-switch {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 3px !important;
    background: #ffffff !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.22s ease !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    transform: translateX(22px) !important;
}

/* =========================================================
   HEADER TIMESHEET / STARTED TIMERS DROPDOWN TEXT VISIBILITY
   ========================================================= */
#started-timers-top,
ul.started-timers-top {
    padding: 16px 14px !important;
}

#started-timers-top svg {
    color: rgba(255, 255, 255, 0.75) !important;
    stroke: rgba(255, 255, 255, 0.75) !important;
}

#started-timers-top p,
#started-timers-top .tw-text-gray-900,
#started-timers-top li div p {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-top: 6px !important;
}

#started-timers-top .view-all-timesheets a,
#started-timers-top a.tw-text-sm {
    color: #38bdf8 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#started-timers-top .view-all-timesheets a:hover,
#started-timers-top a.tw-text-sm:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Active timers inside dropdown */
#started-timers-top li.timer ._timer {
    color: #ffffff !important;
    font-weight: 600 !important;
}

#started-timers-top li.timer span.tw-text-neutral-600 {
    color: rgba(255, 255, 255, 0.8) !important;
}

#started-timers-top li.timer .unfinished-timesheet-delete {
    color: #f87171 !important;
}

#started-timers-top li.timer .text-success {
    color: #4ade80 !important;
    font-weight: 600 !important;
}

#started-timers-top hr {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Primary dropdown caret color */
.btn-primary.dropdown-toggle .caret {
    border-top-color: #ffffff !important;
    margin-left: 6px !important;
}

/* =========================================================
   PROJECT "MORE" DROPDOWN MENU - LIGHT BLUE THEME
   ========================================================= */
ul.dropdown-menu.project-actions {
    background-color: #e0f7fa !important;
    background-image: linear-gradient(180deg, #f0fdfa 0%, #e0f7fa 100%) !important;
    border: 1.5px solid rgba(0, 180, 216, 0.35) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(5, 59, 76, 0.15), 0 4px 12px rgba(0, 180, 216, 0.1) !important;
    padding: 8px 6px !important;
    margin-top: 6px !important;
    overflow: hidden !important;
}

ul.dropdown-menu.project-actions > li > a {
    color: #053b4c !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}

ul.dropdown-menu.project-actions > li > a:hover,
ul.dropdown-menu.project-actions > li > a:focus {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
    box-shadow: 0 3px 10px rgba(0, 180, 216, 0.3) !important;
}

ul.dropdown-menu.project-actions > li.divider,
ul.dropdown-menu.project-actions hr {
    border-color: rgba(0, 180, 216, 0.2) !important;
    margin: 6px 4px !important;
}

/* =========================================================
   ADD EXPENSE - CUSTOMER DROPDOWN CLIPPING & DISPLAY FIX
   ========================================================= */
.panel_s:has(.bootstrap-select.open),
.panel_s:has(.open),
.panel-body:has(.bootstrap-select.open),
.panel-body:has(.open),
#expense-form .panel_s,
#expense-form .panel_s .panel-body,
.panel_s:has(#clientid),
.panel-body:has(#clientid) {
    overflow: visible !important;
}

#expense-form .bootstrap-select.open,
.bootstrap-select:has(#clientid).open,
.bootstrap-select.ajax-search.open {
    position: relative !important;
    z-index: 1060 !important;
}

#expense-form .bootstrap-select.open > .dropdown-menu,
.bootstrap-select:has(#clientid).open > .dropdown-menu,
.bootstrap-select.ajax-search.open > .dropdown-menu {
    position: absolute !important;
    z-index: 1065 !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(0, 180, 216, 0.35) !important;
    box-shadow: 0 16px 40px rgba(5, 59, 76, 0.22) !important;
    min-width: 100% !important;
}

#expense-form .bootstrap-select .bs-searchbox,
.bootstrap-select:has(#clientid) .bs-searchbox,
.bootstrap-select.ajax-search .bs-searchbox {
    padding: 8px 10px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15, 118, 110, 0.1) !important;
}

#expense-form .bootstrap-select .bs-searchbox input.form-control,
.bootstrap-select:has(#clientid) .bs-searchbox input.form-control,
.bootstrap-select.ajax-search .bs-searchbox input.form-control {
    height: 38px !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

#expense-form .bootstrap-select .dropdown-menu.inner,
.bootstrap-select:has(#clientid) .dropdown-menu.inner,
.bootstrap-select.ajax-search .dropdown-menu.inner {
    max-height: 240px !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
}

#expense-form .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar,
.bootstrap-select:has(#clientid) .dropdown-menu.inner::-webkit-scrollbar,
.bootstrap-select.ajax-search .dropdown-menu.inner::-webkit-scrollbar {
    width: 6px !important;
}

#expense-form .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb,
.bootstrap-select:has(#clientid) .dropdown-menu.inner::-webkit-scrollbar-thumb,
.bootstrap-select.ajax-search .dropdown-menu.inner::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 216, 0.45) !important;
    border-radius: 10px !important;
}

#expense-form .bootstrap-select .dropdown-menu.inner > li > a,
.bootstrap-select:has(#clientid) .dropdown-menu.inner > li > a,
.bootstrap-select.ajax-search .dropdown-menu.inner > li > a {
    padding: 10px 14px !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: all 0.18s ease !important;
    display: block !important;
}

#expense-form .bootstrap-select .dropdown-menu.inner > li > a:hover,
#expense-form .bootstrap-select .dropdown-menu.inner > li.active > a,
#expense-form .bootstrap-select .dropdown-menu.inner > li.selected > a,
.bootstrap-select:has(#clientid) .dropdown-menu.inner > li > a:hover,
.bootstrap-select:has(#clientid) .dropdown-menu.inner > li.active > a,
.bootstrap-select:has(#clientid) .dropdown-menu.inner > li.selected > a,
.bootstrap-select.ajax-search .dropdown-menu.inner > li > a:hover,
.bootstrap-select.ajax-search .dropdown-menu.inner > li.active > a,
.bootstrap-select.ajax-search .dropdown-menu.inner > li.selected > a {
    background-color: rgba(0, 180, 216, 0.12) !important;
    color: #0077b6 !important;
}

#expense-form .bootstrap-select .dropdown-menu.inner > li.status,
#expense-form .bootstrap-select .dropdown-menu.inner > li.no-results,
.bootstrap-select:has(#clientid) .dropdown-menu.inner > li.status,
.bootstrap-select:has(#clientid) .dropdown-menu.inner > li.no-results,
.bootstrap-select.ajax-search .dropdown-menu.inner > li.status,
.bootstrap-select.ajax-search .dropdown-menu.inner > li.no-results {
    padding: 12px 14px !important;
    color: #64748b !important;
    font-size: 13px !important;
}

/* =========================================================
   PURCHASE REQUEST MODALS - DROPDOWN OVERFLOW & FOOTER OVERLAP FIX
   ========================================================= */
#share_request .modal-body {
    min-height: 330px !important;
    position: relative !important;
    z-index: 1060 !important;
    overflow: visible !important;
}

#share_request .modal-content,
#share_request .modal-dialog,
#request_quotation .modal-content,
#request_quotation .modal-dialog {
    overflow: visible !important;
}

#share_request .modal-footer,
#request_quotation .modal-footer,
.modal:has(.bootstrap-select.open) .modal-footer {
    position: relative !important;
    z-index: 1040 !important;
}

#share_request .modal-footer .btn,
#request_quotation .modal-footer .btn,
.modal:has(.bootstrap-select.open) .modal-footer .btn {
    position: relative !important;
    z-index: 1 !important;
}

#share_request .bootstrap-select,
#request_quotation .bootstrap-select {
    position: relative !important;
    z-index: 1065 !important;
}

#share_request .bootstrap-select.open,
#request_quotation .bootstrap-select.open,
.modal .bootstrap-select.open {
    position: relative !important;
    z-index: 1070 !important;
}

#share_request .bootstrap-select.open > .dropdown-menu,
#request_quotation .bootstrap-select.open > .dropdown-menu,
.modal .bootstrap-select.open > .dropdown-menu {
    position: absolute !important;
    z-index: 1075 !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(0, 180, 216, 0.35) !important;
    box-shadow: 0 16px 40px rgba(5, 59, 76, 0.22) !important;
    margin-top: 4px !important;
}

#share_request .bootstrap-select .dropdown-menu.inner,
#request_quotation .bootstrap-select .dropdown-menu.inner {
    max-height: 200px !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
}

#share_request .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar,
#request_quotation .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar {
    width: 6px !important;
}

#share_request .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb,
#request_quotation .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 216, 0.45) !important;
    border-radius: 10px !important;
}

.modal:has(.bootstrap-select.open) .modal-body {
    position: relative !important;
    z-index: 1060 !important;
    overflow: visible !important;
}

/* =========================================================
   CALENDAR - TOOLBAR BUTTONS TEXT & ICON VISIBILITY FIX
   ========================================================= */
#calendar .fc-toolbar .fc-button,
#calendar .fc-toolbar button,
.fc .fc-toolbar .fc-button,
.fc-toolbar .fc-button-group > button,
.fc-toolbar .fc-button-group > .fc-button {
    background-color: #1e293b !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 6px 14px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
}

/* Ensure ALL text and icons inside calendar buttons are crisp white */
#calendar .fc-toolbar .fc-button,
#calendar .fc-toolbar .fc-button *,
#calendar .fc-toolbar .fc-button span,
#calendar .fc-toolbar button,
#calendar .fc-toolbar button *,
#calendar .fc-toolbar button span,
.fc .fc-toolbar .fc-button,
.fc .fc-toolbar .fc-button *,
.fc .fc-toolbar .fc-button span,
.fc-toolbar .fc-icon,
.fc-toolbar .fc-icon::before,
.fc-toolbar .fc-icon::after,
#calendar .fc-toolbar span.fc-icon,
#calendar .fc-toolbar span.fc-icon:after,
#calendar .fc-toolbar span.fc-icon:before {
    color: #ffffff !important;
    fill: #ffffff !important;
    text-shadow: none !important;
}

/* Arrow Icons (< and >) High Visibility */
#calendar .fc-toolbar .fc-prev-button .fc-icon,
#calendar .fc-toolbar .fc-next-button .fc-icon,
#calendar .fc-toolbar .fc-icon,
.fc .fc-toolbar .fc-icon {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Hover State for Calendar Buttons */
#calendar .fc-toolbar .fc-button:hover,
#calendar .fc-toolbar button:hover,
.fc .fc-toolbar .fc-button:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Active Button State (Month, Week, Day when selected) */
#calendar .fc-toolbar .fc-button.fc-state-active,
#calendar .fc-toolbar .fc-button.fc-button-active,
#calendar .fc-toolbar button.fc-state-active,
#calendar .fc-toolbar button.fc-button-active,
.fc .fc-toolbar .fc-button.fc-state-active,
.fc .fc-toolbar .fc-button.fc-button-active {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    border-color: #00b4d8 !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(0, 180, 216, 0.35) !important;
}

/* Today Button Specific Styling */
#calendar .fc-toolbar .fc-today-button,
.fc .fc-toolbar .fc-today-button {
    background-color: #334155 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-left: 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#calendar .fc-toolbar .fc-today-button:hover,
.fc .fc-toolbar .fc-today-button:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
}

/* Disabled State */
#calendar .fc-toolbar .fc-button:disabled,
#calendar .fc-toolbar .fc-button.fc-state-disabled,
.fc .fc-toolbar .fc-button:disabled,
.fc .fc-toolbar .fc-button.fc-state-disabled {
    opacity: 0.55 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: not-allowed !important;
    background-color: #1e293b !important;
}

/* =========================================================
   ESTIMATE REQUEST - ALL SELECTS DROPDOWN & OVERFLOW FIX
   ========================================================= */
.estimate-request-form .panel_s,
.estimate-request-form .panel-body,
.estimate-request-form .tab-content,
.estimate-request-form .tab-pane,
.estimate-request-form #wrapper,
.estimate-request-form .content,
.estimate-request-form .horizontal-scrollable-tabs,
.estimate-request-form .horizontal-tabs,
#form_info,
#tab_form_information,
#tab_config_general,
#tab_config_branding,
#tab_config_submission,
#tab_config_notifications,
.panel_s:has(#language),
.panel-body:has(#language) {
    overflow: visible !important;
}

.estimate-request-form .bootstrap-select.open,
#form_info .bootstrap-select.open,
.form-group:has(#language) .bootstrap-select.open {
    position: relative !important;
    z-index: 1060 !important;
}

/* Force ALL selects to open downwards as dropdowns (never upward dropup) */
.estimate-request-form .bootstrap-select.dropup > .dropdown-menu,
.estimate-request-form .bootstrap-select > .dropdown-menu,
#form_info .bootstrap-select.dropup > .dropdown-menu,
#form_info .bootstrap-select > .dropdown-menu,
.form-group:has(#language) .bootstrap-select.dropup > .dropdown-menu,
.bootstrap-select:has(#language).dropup > .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* Keep caret pointing downwards as a standard dropdown */
.estimate-request-form .bootstrap-select.dropup .caret,
#form_info .bootstrap-select.dropup .caret,
.bootstrap-select:has(#language).dropup .caret {
    border-top: 4px dashed !important;
    border-bottom: 0 !important;
}

.estimate-request-form .bootstrap-select .dropdown-menu,
#form_info .bootstrap-select .dropdown-menu,
.form-group:has(#language) .bootstrap-select .dropdown-menu,
.bootstrap-select:has(#language) .dropdown-menu {
    max-height: 250px !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(0, 180, 216, 0.35) !important;
    box-shadow: 0 16px 40px rgba(5, 59, 76, 0.22) !important;
    z-index: 1065 !important;
}

.estimate-request-form .bootstrap-select .dropdown-menu.inner,
#form_info .bootstrap-select .dropdown-menu.inner,
.form-group:has(#language) .dropdown-menu.inner,
.bootstrap-select:has(#language) .dropdown-menu.inner {
    max-height: 200px !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
}

.estimate-request-form .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar,
#form_info .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar,
.form-group:has(#language) .dropdown-menu.inner::-webkit-scrollbar,
.bootstrap-select:has(#language) .dropdown-menu.inner::-webkit-scrollbar {
    width: 6px !important;
}

.estimate-request-form .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb,
#form_info .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb,
.form-group:has(#language) .dropdown-menu.inner::-webkit-scrollbar-thumb,
.bootstrap-select:has(#language) .dropdown-menu.inner::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 216, 0.45) !important;
    border-radius: 10px !important;
}

.estimate-request-form .bootstrap-select .dropdown-menu.inner > li > a,
#form_info .bootstrap-select .dropdown-menu.inner > li > a,
.form-group:has(#language) .dropdown-menu.inner > li > a,
.bootstrap-select:has(#language) .dropdown-menu.inner > li > a {
    padding: 9px 14px !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: all 0.18s ease !important;
}

.estimate-request-form .bootstrap-select .dropdown-menu.inner > li > a:hover,
.estimate-request-form .bootstrap-select .dropdown-menu.inner > li.active > a,
.estimate-request-form .bootstrap-select .dropdown-menu.inner > li.selected > a,
#form_info .bootstrap-select .dropdown-menu.inner > li > a:hover,
#form_info .bootstrap-select .dropdown-menu.inner > li.active > a,
#form_info .bootstrap-select .dropdown-menu.inner > li.selected > a,
.form-group:has(#language) .dropdown-menu.inner > li > a:hover,
.form-group:has(#language) .dropdown-menu.inner > li.active > a,
.form-group:has(#language) .dropdown-menu.inner > li.selected > a,
.bootstrap-select:has(#language) .dropdown-menu.inner > li > a:hover,
.bootstrap-select:has(#language) .dropdown-menu.inner > li.active > a,
.bootstrap-select:has(#language) .dropdown-menu.inner > li.selected > a {
    background-color: rgba(0, 180, 216, 0.12) !important;
    color: #0077b6 !important;
}

/* =========================================================
   PURCHASE QUOTATIONS - VENDOR & REQUEST DROPDOWNS OVERFLOW FIX
   ========================================================= */
.panel_s:has(#pur_request),
.panel_s:has(#vendor),
.panel_s.mbot10,
.panel-body._buttons,
.panel-body._buttons:has(.bootstrap-select),
.panel_s.mbot10:has(.bootstrap-select.open),
.panel-body._buttons:has(.bootstrap-select.open) {
    overflow: visible !important;
}

.panel_s:has(#pur_request),
.panel_s:has(#vendor),
.panel_s.mbot10:has(.bootstrap-select.open) {
    position: relative !important;
    z-index: 1050 !important;
}

.panel_s .bootstrap-select:has(#pur_request),
.panel_s .bootstrap-select:has(#vendor),
.panel-body._buttons .bootstrap-select {
    position: relative !important;
}

.panel_s .bootstrap-select:has(#pur_request).open,
.panel_s .bootstrap-select:has(#vendor).open,
.panel-body._buttons .bootstrap-select.open {
    z-index: 1060 !important;
}

.panel_s .bootstrap-select:has(#pur_request) > .dropdown-menu,
.panel_s .bootstrap-select:has(#vendor) > .dropdown-menu,
.panel-body._buttons .bootstrap-select > .dropdown-menu {
    position: absolute !important;
    z-index: 1065 !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(0, 180, 216, 0.35) !important;
    box-shadow: 0 16px 40px rgba(5, 59, 76, 0.22) !important;
    min-width: 100% !important;
    max-height: 280px !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 4px !important;
}

.panel_s .bootstrap-select:has(#pur_request) .bs-searchbox,
.panel_s .bootstrap-select:has(#vendor) .bs-searchbox,
.panel-body._buttons .bootstrap-select .bs-searchbox {
    padding: 8px 10px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15, 118, 110, 0.1) !important;
}

.panel_s .bootstrap-select:has(#pur_request) .bs-searchbox input,
.panel_s .bootstrap-select:has(#vendor) .bs-searchbox input,
.panel-body._buttons .bootstrap-select .bs-searchbox input {
    height: 38px !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

.panel_s .bootstrap-select:has(#pur_request) .dropdown-menu.inner,
.panel_s .bootstrap-select:has(#vendor) .dropdown-menu.inner,
.panel-body._buttons .bootstrap-select .dropdown-menu.inner {
    max-height: 220px !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
}

.panel_s .bootstrap-select:has(#pur_request) .dropdown-menu.inner::-webkit-scrollbar,
.panel_s .bootstrap-select:has(#vendor) .dropdown-menu.inner::-webkit-scrollbar,
.panel-body._buttons .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar {
    width: 6px !important;
}

.panel_s .bootstrap-select:has(#pur_request) .dropdown-menu.inner::-webkit-scrollbar-thumb,
.panel_s .bootstrap-select:has(#vendor) .dropdown-menu.inner::-webkit-scrollbar-thumb,
.panel-body._buttons .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 216, 0.45) !important;
    border-radius: 10px !important;
}

.panel_s .bootstrap-select:has(#pur_request) .dropdown-menu.inner > li > a,
.panel_s .bootstrap-select:has(#vendor) .dropdown-menu.inner > li > a,
.panel-body._buttons .bootstrap-select .dropdown-menu.inner > li > a {
    padding: 9px 14px !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: all 0.18s ease !important;
    display: block !important;
}

.panel_s .bootstrap-select:has(#pur_request) .dropdown-menu.inner > li > a:hover,
.panel_s .bootstrap-select:has(#pur_request) .dropdown-menu.inner > li.active > a,
.panel_s .bootstrap-select:has(#pur_request) .dropdown-menu.inner > li.selected > a,
.panel_s .bootstrap-select:has(#vendor) .dropdown-menu.inner > li > a:hover,
.panel_s .bootstrap-select:has(#vendor) .dropdown-menu.inner > li.active > a,
.panel_s .bootstrap-select:has(#vendor) .dropdown-menu.inner > li.selected > a,
.panel-body._buttons .bootstrap-select .dropdown-menu.inner > li > a:hover,
.panel-body._buttons .bootstrap-select .dropdown-menu.inner > li.active > a,
.panel-body._buttons .bootstrap-select .dropdown-menu.inner > li.selected > a {
    background-color: rgba(0, 180, 216, 0.12) !important;
    color: #0077b6 !important;
}

/* =========================================================
   PURCHASE INVOICE - RECURRING INVOICE DROPDOWN FIX
   ========================================================= */
#pur_invoice-form .panel_s,
#pur_invoice-form .panel-body,
#pur_invoice-form #recurring_div,
.panel_s:has(#recurring),
.panel-body:has(#recurring) {
    overflow: visible !important;
}

/* Ensure first panel-body sits above the second panel-body (invoice-item) so dropdowns are never overlapped */
#pur_invoice-form .panel-body:first-of-type,
.panel_s > .panel-body:first-child {
    position: relative !important;
    z-index: 15 !important;
}

#pur_invoice-form .panel-body.invoice-item,
.panel_s > .panel-body.invoice-item,
.panel_s > .panel-body ~ .panel-body {
    position: relative !important;
    z-index: 1 !important;
}

#pur_invoice-form .panel-body:first-of-type:has(.bootstrap-select.open),
#pur_invoice-form .panel-body:first-of-type:has(.open),
.panel_s > .panel-body:has(.bootstrap-select.open),
.panel_s > .panel-body:has(.open) {
    z-index: 100 !important;
}

#pur_invoice-form #recurring_div {
    position: relative !important;
    z-index: 1055 !important;
}

#pur_invoice-form .bootstrap-select.open,
.bootstrap-select:has(#recurring).open {
    position: relative !important;
    z-index: 1060 !important;
}

/* Force dropdown to open downwards and prevent top overflow into navbar */
#pur_invoice-form .bootstrap-select.dropup > .dropdown-menu,
.bootstrap-select:has(#recurring).dropup > .dropdown-menu,
#pur_invoice-form .bootstrap-select > .dropdown-menu,
.bootstrap-select:has(#recurring) > .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* Keep caret pointing downwards as a standard dropdown */
#pur_invoice-form .bootstrap-select.dropup .caret,
.bootstrap-select:has(#recurring).dropup .caret {
    border-top: 4px dashed !important;
    border-bottom: 0 !important;
}

#pur_invoice-form .bootstrap-select > .dropdown-menu,
.bootstrap-select:has(#recurring) > .dropdown-menu {
    position: absolute !important;
    z-index: 1065 !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(0, 180, 216, 0.35) !important;
    box-shadow: 0 16px 40px rgba(5, 59, 76, 0.22) !important;
    min-width: 100% !important;
    max-height: 260px !important;
}

#pur_invoice-form .bootstrap-select .bs-searchbox,
.bootstrap-select:has(#recurring) .bs-searchbox {
    padding: 8px 10px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15, 118, 110, 0.1) !important;
}

#pur_invoice-form .bootstrap-select .bs-searchbox input,
.bootstrap-select:has(#recurring) .bs-searchbox input {
    height: 38px !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

#pur_invoice-form .bootstrap-select .dropdown-menu.inner,
.bootstrap-select:has(#recurring) .dropdown-menu.inner {
    max-height: 210px !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
}

#pur_invoice-form .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar,
.bootstrap-select:has(#recurring) .dropdown-menu.inner::-webkit-scrollbar {
    width: 6px !important;
}

#pur_invoice-form .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb,
.bootstrap-select:has(#recurring) .dropdown-menu.inner::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 216, 0.45) !important;
    border-radius: 10px !important;
}

#pur_invoice-form .bootstrap-select .dropdown-menu.inner > li > a,
.bootstrap-select:has(#recurring) .dropdown-menu.inner > li > a {
    padding: 9px 14px !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: all 0.18s ease !important;
    display: block !important;
}

#pur_invoice-form .bootstrap-select .dropdown-menu.inner > li > a:hover,
#pur_invoice-form .bootstrap-select .dropdown-menu.inner > li.active > a,
#pur_invoice-form .bootstrap-select .dropdown-menu.inner > li.selected > a,
.bootstrap-select:has(#recurring) .dropdown-menu.inner > li > a:hover,
.bootstrap-select:has(#recurring) .dropdown-menu.inner > li.active > a,
.bootstrap-select:has(#recurring) .dropdown-menu.inner > li.selected > a {
    background-color: rgba(0, 180, 216, 0.12) !important;
    color: #0077b6 !important;
}

/* =========================================================
   UTILITIES - MEDIA (ELFINDER) WHITE FONT & LOGOS/ICONS FIX
   ========================================================= */

/* 1. Top Toolbar Icons & Logos */
#elfinder .elfinder-toolbar .elfinder-button-icon,
#elfinder .elfinder-toolbar .ui-icon,
#elfinder .elfinder-toolbar [class*="elfinder-button-icon"],
#elfinder .elfinder-buttonset .elfinder-button-icon,
#elfinder .elfinder-button .elfinder-button-icon,
.elfinder-toolbar .elfinder-button-icon,
.elfinder-toolbar .ui-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

#elfinder .elfinder-toolbar .elfinder-button-icon:before,
#elfinder .elfinder-toolbar .ui-icon:before,
#elfinder .elfinder-toolbar [class*="elfinder-button-icon"]:before,
.elfinder-toolbar .elfinder-button-icon:before,
.elfinder-toolbar .ui-icon:before {
    color: #ffffff !important;
}

#elfinder .elfinder-toolbar .elfinder-button,
.elfinder-toolbar .elfinder-button {
    color: #ffffff !important;
    opacity: 1 !important;
}

#elfinder .elfinder-toolbar .elfinder-button.ui-state-disabled,
.elfinder-toolbar .elfinder-button.ui-state-disabled {
    opacity: 0.65 !important;
}

#elfinder .elfinder-toolbar .elfinder-button-search input,
.elfinder-toolbar .elfinder-button-search input {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

#elfinder .elfinder-toolbar .elfinder-button-search input::placeholder,
.elfinder-toolbar .elfinder-button-search input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

#elfinder .elfinder-toolbar .elfinder-button-search .ui-icon,
.elfinder-toolbar .elfinder-button-search .ui-icon {
    color: #ffffff !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* 2. Left Sidebar Navigation (Navbar) Font & Folder Names */
#elfinder .elfinder-navbar,
#elfinder .elfinder-navbar-dir,
#elfinder .elfinder-navbar-dir-name,
#elfinder .elfinder-navbar-dir a,
#elfinder .elfinder-navbar-dir span:not(.elfinder-navbar-icon):not(.elfinder-navbar-arrow),
#elfinder .elfinder-tree,
#elfinder .elfinder-tree .elfinder-navbar-wrapper,
.elfinder .elfinder-navbar,
.elfinder .elfinder-navbar-dir,
.elfinder .elfinder-navbar-dir-name {
    color: #ffffff !important;
}

#elfinder .elfinder-navbar-dir:hover,
#elfinder .elfinder-navbar-dir.ui-state-hover,
#elfinder .elfinder-navbar-dir.ui-state-active,
.elfinder .elfinder-navbar-dir:hover,
.elfinder .elfinder-navbar-dir.ui-state-hover,
.elfinder .elfinder-navbar-dir.ui-state-active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* 3. Left Sidebar Navigation (Navbar) Logos & Icons (Folder, Disk, Arrows) */
#elfinder .elfinder-navbar .elfinder-navbar-icon,
#elfinder .elfinder-navbar .elfinder-navbar-arrow,
#elfinder .elfinder-navbar [class*="elfinder-navbar-root"] .elfinder-navbar-icon,
.elfinder .elfinder-navbar .elfinder-navbar-icon,
.elfinder .elfinder-navbar .elfinder-navbar-arrow,
.elfinder .elfinder-navbar [class*="elfinder-navbar-root"] .elfinder-navbar-icon,
.elfinder-navbar-icon,
.elfinder-navbar-arrow {
    color: #ffffff !important;
    fill: #ffffff !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

#elfinder .elfinder-navbar-icon:before,
#elfinder .elfinder-navbar-arrow:before,
.elfinder-navbar-icon:before,
.elfinder-navbar-arrow:before {
    color: #ffffff !important;
}

/* 4. Bottom Status Bar */
#elfinder .elfinder-statusbar,
#elfinder .elfinder-statusbar *,
.elfinder .elfinder-statusbar,
.elfinder .elfinder-statusbar * {
    color: #ffffff !important;
}

/* =========================================================
   PURCHASE MODULE - ITEMS TABLE COMPACT SIZING & OVERFLOW FIX
   (Quotation, Purchase Order, Purchase Invoice)
   ========================================================= */

/* 1. Prevent Browser Window Horizontal Scrollbar */
body.admin,
body.admin #wrapper,
#wrapper .content {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* 2. Constrain Table Container within Card Form (Zero Top Gap / Flush Header) */
#estimate-form .table-responsive,
#pur_order-form .table-responsive,
#pur_invoice-form .table-responsive,
.accounting-template .table-responsive,
.invoice-item .table-responsive.s_table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    padding-top: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* 3. Items Table Layout & Spacing */
#invoice-form table.invoice-items-table,
#estimate-form table.invoice-items-table,
#pur_order-form table.invoice-items-table,
#pur_invoice-form table.invoice-items-table,
.accounting-template table.invoice-items-table,
.invoice-item table.invoice-items-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: none !important;
}

#invoice-form table.invoice-items-table thead,
#estimate-form table.invoice-items-table thead,
#pur_order-form table.invoice-items-table thead,
#pur_invoice-form table.invoice-items-table thead,
.accounting-template table.invoice-items-table thead,
.invoice-item table.invoice-items-table thead {
    margin: 0 !important;
    padding: 0 !important;
}

#invoice-form table.invoice-items-table thead tr,
#estimate-form table.invoice-items-table thead tr,
#pur_order-form table.invoice-items-table thead tr,
#pur_invoice-form table.invoice-items-table thead tr,
.accounting-template table.invoice-items-table thead tr,
.invoice-item table.invoice-items-table thead tr {
    margin: 0 !important;
}

#invoice-form table.invoice-items-table thead tr:first-child th:first-child,
#estimate-form table.invoice-items-table thead tr:first-child th:first-child,
#pur_order-form table.invoice-items-table thead tr:first-child th:first-child,
#pur_invoice-form table.invoice-items-table thead tr:first-child th:first-child {
    border-top-left-radius: 11px !important;
}

#invoice-form table.invoice-items-table thead tr:first-child th:last-child,
#estimate-form table.invoice-items-table thead tr:first-child th:last-child,
#pur_order-form table.invoice-items-table thead tr:first-child th:last-child,
#pur_invoice-form table.invoice-items-table thead tr:first-child th:last-child {
    border-top-right-radius: 11px !important;
}

/* 3.1 Reduced Column Header Font Size to Fit Columns */
#invoice-form table.invoice-items-table thead th,
#estimate-form table.invoice-items-table thead th,
#pur_order-form table.invoice-items-table thead th,
#pur_invoice-form table.invoice-items-table thead th,
.accounting-template table.invoice-items-table thead th,
.invoice-item table.invoice-items-table thead th {
    font-size: 11px !important;
    line-height: 1.25 !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

#invoice-form table.invoice-items-table thead th .th_currency,
#estimate-form table.invoice-items-table thead th .th_currency,
#pur_order-form table.invoice-items-table thead th .th_currency,
#pur_invoice-form table.invoice-items-table thead th .th_currency,
.accounting-template table.invoice-items-table thead th .th_currency,
.invoice-item table.invoice-items-table thead th .th_currency {
    font-size: 10px !important;
}

/* 4. Table Cell Body & Form Controls */
#invoice-form table.invoice-items-table tbody td,
#estimate-form table.invoice-items-table tbody td,
#pur_order-form table.invoice-items-table tbody td,
#pur_invoice-form table.invoice-items-table tbody td,
.accounting-template table.invoice-items-table tbody td,
.invoice-item table.invoice-items-table tbody td {
    padding: 6px 3px !important;
    font-size: 11.5px !important;
    vertical-align: middle !important;
}

/* Compact Inputs inside Item Entry & Data Rows */
#invoice-form table.invoice-items-table .form-control:not(textarea),
#estimate-form table.invoice-items-table .form-control:not(textarea),
#pur_order-form table.invoice-items-table .form-control:not(textarea),
#pur_invoice-form table.invoice-items-table .form-control:not(textarea),
.accounting-template table.invoice-items-table .form-control:not(textarea),
.invoice-item table.invoice-items-table .form-control:not(textarea) {
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px 6px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    width: 100% !important;
    box-shadow: none !important;
    text-align: right !important;
}

/* Item Name / Description Textarea */
#invoice-form table.invoice-items-table textarea.form-control,
#estimate-form table.invoice-items-table textarea.form-control,
#pur_order-form table.invoice-items-table textarea.form-control,
#pur_invoice-form table.invoice-items-table textarea.form-control,
.accounting-template table.invoice-items-table textarea.form-control,
.invoice-item table.invoice-items-table textarea.form-control {
    min-height: 48px !important;
    height: 48px !important;
    padding: 4px 6px !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    resize: vertical !important;
    text-align: left !important;
}

/* Quantity Input Styling */
#invoice-form table.invoice-items-table .qty input,
#estimate-form table.invoice-items-table .quantities input:first-child,
#pur_order-form table.invoice-items-table .qty input:first-child,
#pur_invoice-form table.invoice-items-table .qty input:first-child,
.accounting-template table.invoice-items-table .qty input:first-child,
.invoice-item table.invoice-items-table .quantities input:first-child,
#estimate-form table.invoice-items-table .quantities input[name*="[quantity]"],
#pur_order-form table.invoice-items-table .quantities input[name*="[quantity]"],
#pur_invoice-form table.invoice-items-table .quantities input[name*="[quantity]"],
#invoice-form table.invoice-items-table input[name="quantity"],
#estimate-form table.invoice-items-table input[name="quantity"],
#pur_order-form table.invoice-items-table input[name="quantity"],
#pur_invoice-form table.invoice-items-table input[name="quantity"] {
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 6px !important;
    font-size: 11.5px !important;
    text-align: center !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    width: 100% !important;
}

/* Restored Unit Pill Box under Quantity */
#invoice-form table.invoice-items-table input[placeholder*="Unit"],
#estimate-form table.invoice-items-table .quantities input[placeholder*="Unit"],
#pur_order-form table.invoice-items-table .quantities input[placeholder*="Unit"],
#pur_invoice-form table.invoice-items-table .quantities input[placeholder*="Unit"],
.accounting-template table.invoice-items-table .quantities input[placeholder*="Unit"],
.invoice-item table.invoice-items-table .quantities input[placeholder*="Unit"],
#estimate-form table.invoice-items-table .quantities input[name*="unit_name"],
#pur_order-form table.invoice-items-table .quantities input[name*="unit_name"],
#pur_invoice-form table.invoice-items-table .quantities input[name*="unit_name"],
#invoice-form table.invoice-items-table input.input-transparent,
#estimate-form table.invoice-items-table input.pur_input_none,
#pur_order-form table.invoice-items-table input.pur_input_none,
#pur_invoice-form table.invoice-items-table input.pur_input_none,
.accounting-template table.invoice-items-table input.pur_input_none,
.invoice-item table.invoice-items-table input.pur_input_none {
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    margin-top: 4px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #475569 !important;
    text-align: center !important;
    width: 100% !important;
    box-shadow: none !important;
    display: block !important;
}

/* Tax Selectpicker inside Items Table */
#invoice-form table.invoice-items-table .bootstrap-select,
#estimate-form table.invoice-items-table .bootstrap-select,
#pur_order-form table.invoice-items-table .bootstrap-select,
#pur_invoice-form table.invoice-items-table .bootstrap-select,
.accounting-template table.invoice-items-table .bootstrap-select,
.invoice-item table.invoice-items-table .bootstrap-select {
    width: 100% !important;
    height: 34px !important;
}

#invoice-form table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle,
#estimate-form table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle,
#pur_order-form table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle,
#pur_invoice-form table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle,
.accounting-template table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle,
.invoice-item table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle {
    height: 34px !important;
    padding: 4px 6px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
}

#invoice-form table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle .filter-option,
#estimate-form table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle .filter-option,
#pur_order-form table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle .filter-option,
#pur_invoice-form table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle .filter-option,
.accounting-template table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle .filter-option,
.invoice-item table.invoice-items-table .bootstrap-select > .btn.dropdown-toggle .filter-option {
    font-size: 11.5px !important;
    line-height: 24px !important;
}

/* Dropdown Menu & Content Items Font Size to Match Table Content */
#invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu,
#estimate-form table.invoice-items-table .bootstrap-select .dropdown-menu,
#pur_order-form table.invoice-items-table .bootstrap-select .dropdown-menu,
#pur_invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu,
.accounting-template table.invoice-items-table .bootstrap-select .dropdown-menu,
.invoice-item table.invoice-items-table .bootstrap-select .dropdown-menu {
    font-size: 11.5px !important;
    min-width: 100% !important;
    border-radius: 8px !important;
    padding: 4px 0 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

#invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu.inner > li > a,
#estimate-form table.invoice-items-table .bootstrap-select .dropdown-menu.inner > li > a,
#pur_order-form table.invoice-items-table .bootstrap-select .dropdown-menu.inner > li > a,
#pur_invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu.inner > li > a,
.accounting-template table.invoice-items-table .bootstrap-select .dropdown-menu.inner > li > a,
.invoice-item table.invoice-items-table .bootstrap-select .dropdown-menu.inner > li > a,
#invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu li a,
#estimate-form table.invoice-items-table .bootstrap-select .dropdown-menu li a,
#pur_order-form table.invoice-items-table .bootstrap-select .dropdown-menu li a,
#pur_invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu li a,
.accounting-template table.invoice-items-table .bootstrap-select .dropdown-menu li a,
.invoice-item table.invoice-items-table .bootstrap-select .dropdown-menu li a {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    padding: 5px 8px !important;
    font-weight: 500 !important;
}

#invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu li a span,
#estimate-form table.invoice-items-table .bootstrap-select .dropdown-menu li a span,
#pur_order-form table.invoice-items-table .bootstrap-select .dropdown-menu li a span,
#pur_invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu li a span,
.accounting-template table.invoice-items-table .bootstrap-select .dropdown-menu li a span,
.invoice-item table.invoice-items-table .bootstrap-select .dropdown-menu li a span,
#invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu .text,
#estimate-form table.invoice-items-table .bootstrap-select .dropdown-menu .text,
#pur_order-form table.invoice-items-table .bootstrap-select .dropdown-menu .text,
#pur_invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu .text,
.accounting-template table.invoice-items-table .bootstrap-select .dropdown-menu .text,
.invoice-item table.invoice-items-table .bootstrap-select .dropdown-menu .text {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
}

#invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu small,
#estimate-form table.invoice-items-table .bootstrap-select .dropdown-menu small,
#pur_order-form table.invoice-items-table .bootstrap-select .dropdown-menu small,
#pur_invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu small,
.accounting-template table.invoice-items-table .bootstrap-select .dropdown-menu small,
.invoice-item table.invoice-items-table .bootstrap-select .dropdown-menu small,
#invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu .subtext,
#estimate-form table.invoice-items-table .bootstrap-select .dropdown-menu .subtext,
#pur_order-form table.invoice-items-table .bootstrap-select .dropdown-menu .subtext,
#pur_invoice-form table.invoice-items-table .bootstrap-select .dropdown-menu .subtext,
.accounting-template table.invoice-items-table .bootstrap-select .dropdown-menu .subtext,
.invoice-item table.invoice-items-table .bootstrap-select .dropdown-menu .subtext {
    font-size: 10px !important;
    margin-left: 4px !important;
}

/* Action button inside items table */
#invoice-form table.invoice-items-table .btn,
#estimate-form table.invoice-items-table .btn,
#pur_order-form table.invoice-items-table .btn,
#pur_invoice-form table.invoice-items-table .btn,
.accounting-template table.invoice-items-table .btn,
.invoice-item table.invoice-items-table .btn {
    padding: 6px 9px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* Settings Cog (⚙) Column Width & Action Column Styling */
table.invoice-items-table thead th:last-child,
table.invoice-items-table tbody td:last-child {
    width: 6% !important;
    min-width: 45px !important;
    text-align: center !important;
}


/* =========================================================
   TEPL GROUP - ISOLATED CUSTOMER / STAFF PORTAL DASHBOARD STYLES
   Scope: body.customers ONLY (Does NOT touch body.admin)
   ========================================================= */

/* Body Background for Dashboard Pages */
body.customers:not(.customers_login) {
    background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 70%),
                linear-gradient(135deg, #e0f2fe 0%, #bae6fd 45%, #e0f2fe 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Body Background for Login Pages (Full Screen Photo Background) */
body.customers_login {
    background: #dbeafe url('../images/login-bg.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    min-height: 100vh !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

body.customers_login #wrapper {
    background: transparent !important;
}

/* ---------------------------------------------------------
   1. TOPBAR NAVBAR STYLING
   --------------------------------------------------------- */
body.customers nav.navbar-default.header {
    background: linear-gradient(135deg, #053b4c 0%, #084e61 50%, #0a657c 100%) !important;
    box-shadow: 0 10px 30px -5px rgba(5, 59, 76, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    border-radius: 0 0 18px 18px !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    min-height: 60px !important;
    position: relative !important;
    z-index: 1000 !important;
}

body.customers nav.navbar-default.header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    transform: none !important;
}

@media (min-width: 768px) {
    body.customers nav.navbar-default.header .navbar-header {
        display: flex !important;
        align-items: center !important;
        float: left !important;
        height: 60px !important;
    }

    body.customers nav.navbar-default.header .navbar-collapse {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        float: right !important;
        height: 60px !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.customers nav.navbar-default.header .navbar-nav {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        float: right !important;
        height: 60px !important;
    }

    body.customers nav.navbar-default.header .navbar-nav > li {
        display: flex !important;
        align-items: center !important;
        float: left !important;
        height: 60px !important;
    }
}

body.customers nav.navbar-default.header .navbar-brand {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.4px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    height: 60px !important;
    line-height: 60px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
}

body.customers nav.navbar-default.header .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    margin: 0 4px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    line-height: 1 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

body.customers nav.navbar-default.header .navbar-nav > li > a:hover,
body.customers nav.navbar-default.header .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px) !important;
}

body.customers nav.navbar-default.header .navbar-nav > li.active > a,
body.customers nav.navbar-default.header .navbar-nav > li > a.btn {
    color: #053b4c !important;
    background: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* User Profile Image & Dropdown */
body.customers .client-profile-image-small {
    border: 2px solid #00b4d8 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 12px rgba(0, 180, 216, 0.5) !important;
    transition: transform 0.2s ease !important;
}

body.customers .client-profile-image-small:hover {
    transform: scale(1.08) !important;
}

body.customers nav.navbar-default.header .dropdown-menu,
body.customers .customers-nav-item-profile .dropdown-menu {
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.2) !important;
    padding: 10px !important;
    margin-top: 10px !important;
    min-width: 220px !important;
    right: 0 !important;
    left: auto !important;
}

body.customers nav.navbar-default.header .dropdown-menu > li > a,
body.customers .customers-nav-item-profile .dropdown-menu > li > a {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}

body.customers nav.navbar-default.header .dropdown-menu > li > a:hover,
body.customers .customers-nav-item-profile .dropdown-menu > li > a:hover {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    transform: translateX(3px) !important;
}

/* ---------------------------------------------------------
   2. BOTTOMBAR FOOTER STYLING
   --------------------------------------------------------- */
body.customers footer.footer {
    background: linear-gradient(135deg, #053b4c 0%, #064052 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    padding: 20px 0 !important;
    margin-top: 40px !important;
    box-shadow: 0 -10px 30px rgba(5, 59, 76, 0.2) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

body.customers footer.footer a {
    color: #38bdf8 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body.customers footer.footer a:hover {
    color: #7dd3fc !important;
    text-decoration: underline !important;
}

/* ---------------------------------------------------------
   3. KPI SUMMARY CARDS & WIDGETS
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   3. KPI SUMMARY CARDS & WIDGETS (ADMIN MATCHED DESIGN)
   --------------------------------------------------------- */

/* Projects Summary Grid Cards */
body.customers dl.tw-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}

body.customers dl.tw-grid > a {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    padding: 20px 22px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 30px rgba(5, 59, 76, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Top Color Accent Line Indicator (::before) */
body.customers dl.tw-grid > a::before,
body.customers .invoices-stats > div[class*="col-"]::before,
body.customers .estimates-stats > div[class*="col-"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 3 !important;
    transition: all 0.35s ease !important;
}

/* Subtle Wave Background SVG Decoration (::after) */
body.customers dl.tw-grid > a::after,
body.customers .invoices-stats > div[class*="col-"]::after,
body.customers .estimates-stats > div[class*="col-"]::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 140px !important;
    height: 75px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath fill='%23ffffff' fill-opacity='0.7' d='M0,40 C30,15 70,50 100,20 L100,60 L0,60 Z'%3E%3C/path%3E%3Cpath fill='%23ffffff' fill-opacity='0.4' d='M0,25 C40,45 75,10 100,35 L100,60 L0,60 Z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    border-bottom-right-radius: 20px !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
    transition: transform 0.38s ease, opacity 0.38s ease !important;
}

body.customers dl.tw-grid > a:hover::after,
body.customers .invoices-stats > div[class*="col-"]:hover::after,
body.customers .estimates-stats > div[class*="col-"]:hover::after {
    transform: scale(1.12) translateY(-4px) !important;
    opacity: 1 !important;
}

/* Hover Elevation & Spring Animation */
body.customers dl.tw-grid > a:hover,
body.customers .invoices-stats > div[class*="col-"]:hover,
body.customers .estimates-stats > div[class*="col-"]:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 20px 40px -10px rgba(5, 59, 76, 0.18), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Content Stacking Z-Index */
body.customers dl.tw-grid > a > *,
body.customers .invoices-stats > div[class*="col-"] > *,
body.customers .estimates-stats > div[class*="col-"] > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Specific Card Color Schemes for Projects Summary */

/* 1. Not Started (Blue Theme) */
body.customers dl.tw-grid > a:nth-child(1) {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
}
body.customers dl.tw-grid > a:nth-child(1)::before {
    background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
}
body.customers dl.tw-grid > a:nth-child(1) dt {
    color: #1d4ed8 !important;
}

/* 2. In Progress (Cyan/Teal Theme) */
body.customers dl.tw-grid > a:nth-child(2) {
    background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%) !important;
}
body.customers dl.tw-grid > a:nth-child(2)::before {
    background: linear-gradient(90deg, #06b6d4, #0891b2) !important;
}
body.customers dl.tw-grid > a:nth-child(2) dt {
    color: #0e7490 !important;
}

/* 3. On Hold (Orange Theme) */
body.customers dl.tw-grid > a:nth-child(3) {
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
}
body.customers dl.tw-grid > a:nth-child(3)::before {
    background: linear-gradient(90deg, #f97316, #ea580c) !important;
}
body.customers dl.tw-grid > a:nth-child(3) dt {
    color: #c2410c !important;
}

/* 4. Cancelled (Red Theme) */
body.customers dl.tw-grid > a:nth-child(4) {
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important;
}
body.customers dl.tw-grid > a:nth-child(4)::before {
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}
body.customers dl.tw-grid > a:nth-child(4) dt {
    color: #b91c1c !important;
}

/* 5. Finished (Emerald/Green Theme) */
body.customers dl.tw-grid > a:nth-child(5) {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
}
body.customers dl.tw-grid > a:nth-child(5)::before {
    background: linear-gradient(90deg, #10b981, #059669) !important;
}
body.customers dl.tw-grid > a:nth-child(5) dt {
    color: #047857 !important;
}

body.customers dl.tw-grid > a dt {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

body.customers dl.tw-grid > a dd .tw-text-base,
body.customers dl.tw-grid > a dd div {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
}

/* 2. Invoices & Estimates KPI Stats Container & Cards */
body.customers .invoices-stats,
body.customers .estimates-stats {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 28px !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

body.customers .invoices-stats > div[class*="col-"],
body.customers .estimates-stats > div[class*="col-"] {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    padding: 18px 22px !important;
    margin: 8px !important;
    flex: 1 1 220px !important;
    max-width: calc(25% - 16px) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 30px rgba(5, 59, 76, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    body.customers .invoices-stats > div[class*="col-"],
    body.customers .estimates-stats > div[class*="col-"] {
        max-width: calc(50% - 16px) !important;
    }
}

@media (max-width: 575px) {
    body.customers .invoices-stats > div[class*="col-"],
    body.customers .estimates-stats > div[class*="col-"] {
        max-width: 100% !important;
    }
}

/* Individual Invoices Cards Theming */

/* Unpaid (Red Theme) */
body.customers .invoices-stats-unpaid {
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important;
}
body.customers .invoices-stats-unpaid::before {
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}
body.customers .invoices-stats-unpaid .stats-status a {
    color: #b91c1c !important;
}

/* Paid (Green Theme) */
body.customers .invoices-stats-paid {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
}
body.customers .invoices-stats-paid::before {
    background: linear-gradient(90deg, #10b981, #059669) !important;
}
body.customers .invoices-stats-paid .stats-status a {
    color: #047857 !important;
}

/* Overdue (Orange/Amber Theme) */
body.customers .invoices-stats-overdue {
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
}
body.customers .invoices-stats-overdue::before {
    background: linear-gradient(90deg, #f97316, #ea580c) !important;
}
body.customers .invoices-stats-overdue .stats-status a {
    color: #c2410c !important;
}

/* Partially Paid (Cyan Theme) */
body.customers .invoices-stats-partially-paid {
    background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%) !important;
}
body.customers .invoices-stats-partially-paid::before {
    background: linear-gradient(90deg, #06b6d4, #0891b2) !important;
}
body.customers .invoices-stats-partially-paid .stats-status a {
    color: #0e7490 !important;
}

/* Estimates Cards Theming */

body.customers .estimates-stats-sent {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
}
body.customers .estimates-stats-sent::before {
    background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
}

body.customers .estimates-stats-expired {
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important;
}
body.customers .estimates-stats-expired::before {
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}

body.customers .estimates-stats-declined {
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
}
body.customers .estimates-stats-declined::before {
    background: linear-gradient(90deg, #f97316, #ea580c) !important;
}

body.customers .estimates-stats-accepted {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
}
body.customers .estimates-stats-accepted::before {
    background: linear-gradient(90deg, #10b981, #059669) !important;
}

body.customers .invoices-stats .stats-status a,
body.customers .estimates-stats .stats-status a {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
}

body.customers .invoices-stats .stats-numbers,
body.customers .estimates-stats .stats-numbers {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
}

body.customers .invoices-stats .progress,
body.customers .estimates-stats .progress {
    height: 20px !important;
    background: rgba(203, 213, 225, 0.45) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 14px 0 0 0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

body.customers .invoices-stats .progress .progress-bar,
body.customers .estimates-stats .progress .progress-bar {
    height: 20px !important;
    line-height: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    transition: width 0.6s ease !important;
}

body.customers .invoices-stats .progress .progress-bar[data-percent="0.00"],
body.customers .invoices-stats .progress .progress-bar[data-percent="0"],
body.customers .estimates-stats .progress .progress-bar[data-percent="0.00"],
body.customers .estimates-stats .progress .progress-bar[data-percent="0"] {
    color: #475569 !important;
    padding-left: 8px !important;
    text-align: left !important;
}

body.customers .progress-bar-danger {
    background: linear-gradient(90deg, #f43f5e 0%, #e11d48 100%) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.3) !important;
}

body.customers .progress-bar-success {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3) !important;
}

body.customers .progress-bar-warning {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3) !important;
}

body.customers .progress-bar-info {
    background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 100%) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

body.customers .progress-bar-default {
    background: linear-gradient(90deg, #64748b 0%, #475569 100%) !important;
    border-radius: 999px !important;
}

/* Contracts Chart & Summary Box */
body.customers .contracts-summary-heading,
body.customers .section-heading {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 16px !important;
}

body.customers canvas#contracts-by-type-chart {
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 10px 25px -5px rgba(5, 59, 76, 0.08) !important;
}

/* ---------------------------------------------------------
   4. MAIN CONTENT PANELS & DATA TABLES
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   4. MAIN CONTENT PANELS & DATA TABLES (OVERFLOW FIX & GLASS CARD)
   --------------------------------------------------------- */
body.customers #wrapper,
body.customers #wrapper .container,
body.customers .container {
    box-sizing: border-box !important;
}

body.customers .panel_s {
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 45px -12px rgba(5, 59, 76, 0.1) !important;
    margin-bottom: 25px !important;
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.customers .panel-body {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
}

body.customers .dataTables_wrapper,
body.customers table.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    background: #ffffff !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

body.customers table.table thead th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

body.customers table.table tbody tr {
    transition: background 0.2s ease !important;
}

body.customers table.table tbody tr:hover {
    background: #f8fafc !important;
}

body.customers table.table tbody td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Inputs & Filter Dropdowns */
body.customers .form-control,
body.customers .bootstrap-select .btn {
    border-radius: 12px !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
}

body.customers .form-control:focus,
body.customers .bootstrap-select .btn:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
    background: #ffffff !important;
}

/* ---------------------------------------------------------
   5. LAYOUT OVERFLOW & NESTED ROW MARGIN FIX
   --------------------------------------------------------- */
body.customers .row .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---------------------------------------------------------
   6. VENDOR & CUSTOMER HEADER PROFILE DROPDOWN MENU STYLING
   --------------------------------------------------------- */
body.customers nav.navbar-default.header .dropdown-menu,
body.customers .customers-nav-item-profile .dropdown-menu {
    background: #ffffff !important;
    border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.2), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    padding: 10px !important;
    margin-top: 10px !important;
    min-width: 230px !important;
    right: 0 !important;
    left: auto !important;
    animation: dropdownSlideFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes dropdownSlideFade {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.customers nav.navbar-default.header .dropdown-menu > li > a,
body.customers .customers-nav-item-profile .dropdown-menu > li > a {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 14px !important;
    margin-bottom: 3px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

body.customers nav.navbar-default.header .dropdown-menu > li > a i,
body.customers .customers-nav-item-profile .dropdown-menu > li > a i {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: #f0f9ff !important;
    color: #0284c7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    margin-right: 12px !important;
    transition: all 0.2s ease !important;
}

body.customers nav.navbar-default.header .dropdown-menu > li > a:hover,
body.customers .customers-nav-item-profile .dropdown-menu > li > a:hover {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    transform: translateX(4px) !important;
}

body.customers nav.navbar-default.header .dropdown-menu > li > a:hover i,
body.customers .customers-nav-item-profile .dropdown-menu > li > a:hover i {
    background: #0284c7 !important;
    color: #ffffff !important;
}

/* Logout Item Accent */
body.customers .customers-nav-item-logout > a {
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 6px !important;
    padding-top: 12px !important;
}

body.customers .customers-nav-item-logout > a i {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

body.customers .customers-nav-item-logout > a:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

body.customers .customers-nav-item-logout > a:hover i {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------
   7. DATATABLES LENGTH SELECT, SEARCH & PAGINATION STYLING
   --------------------------------------------------------- */
body.customers .dataTables_wrapper .dataTables_length,
body.customers .dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px !important;
}

body.customers .dataTables_wrapper .dataTables_length label,
body.customers .dataTables_wrapper .dataTables_filter label {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

body.customers .dataTables_wrapper .dataTables_length select,
body.customers select.form-control,
body.customers select[name*="length"] {
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 6px 32px 6px 14px !important;
    height: 38px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230284c7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

body.customers .dataTables_wrapper .dataTables_length select:focus,
body.customers select.form-control:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
    outline: none !important;
}

body.customers .dataTables_wrapper .dataTables_filter input[type="search"],
body.customers input[type="search"].form-control {
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 8px 16px !important;
    height: 38px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

body.customers .dataTables_wrapper .dataTables_filter input[type="search"]:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
    outline: none !important;
}

/* DataTables Pagination Buttons Styling */
body.customers .dataTables_wrapper .dataTables_paginate {
    margin-top: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

body.customers .dataTables_wrapper .dataTables_paginate ul.pagination {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    list-style: none !important;
}

/* Reset outer li elements so only inner a/span is styled */
body.customers .dataTables_wrapper .dataTables_paginate ul.pagination > li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Actual Clickable Pagination Buttons (li > a, li > span, .paginate_button > a) */
body.customers .dataTables_wrapper .dataTables_paginate ul.pagination > li > a,
body.customers .dataTables_wrapper .dataTables_paginate ul.pagination > li > span,
body.customers .dataTables_wrapper .dataTables_paginate a.paginate_button {
    border-radius: 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 7px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Hover State */
body.customers .dataTables_wrapper .dataTables_paginate ul.pagination > li > a:hover,
body.customers .dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border-color: #0284c7 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.15) !important;
}

/* Active Page Button (current) */
body.customers .dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a,
body.customers .dataTables_wrapper .dataTables_paginate ul.pagination > li.active > span,
body.customers .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

/* Disabled Pagination Buttons (e.g. Previous when on page 1) */
body.customers .dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > a,
body.customers .dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > span,
body.customers .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* DataTables Info Text */
body.customers .dataTables_wrapper .dataTables_info {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-top: 16px !important;
}

/* Knowledge Base Search Bar Icon & Input Alignment Fix */
.kb-search #kb-search-form .input-group,
#kb-search-form .input-group {
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
    width: 100% !important;
}

.kb-search #kb-search-form .input-group-btn,
#kb-search-form .input-group-btn {
    display: flex !important;
    width: auto !important;
}

.kb-search-input,
input.kb-search-input,
#kb-search-form .kb-search-input {
    height: 52px !important;
    line-height: 52px !important;
    padding-left: 48px !important;
    padding-right: 16px !important;
    margin: 0 !important;
    border-radius: 14px 0 0 14px !important;
    flex: 1 1 auto !important;
}

.kb-search-button,
#kb-search-form .kb-search-button {
    height: 52px !important;
    line-height: 52px !important;
    margin: 0 !important;
    border-radius: 0 14px 14px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.form-control-feedback.kb-search-icon,
i.kb-search-icon,
#kb-search-form .kb-search-icon {
    position: absolute !important;
    top: 50% !important;
    left: 14px !important;
    transform: translateY(-50%) !important;
    height: 24px !important;
    width: 24px !important;
    line-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    z-index: 5 !important;
    pointer-events: none !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* =========================================================
   SALES VS PURCHASES OVERVIEW WIDGET STYLING
   ========================================================= */

.sales-vs-purchases-widget .svp-header-icon-box {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

.sales-vs-purchases-widget .svp-header-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #0369a1 !important;
    background: rgba(224, 242, 254, 0.85) !important;
    border: 1px solid rgba(186, 230, 253, 0.95) !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.sales-vs-purchases-widget .svp-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 24px rgba(5, 59, 76, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    min-height: 94px !important;
    display: flex !important;
    align-items: center !important;
}

/* Accent Line Bar on top of each card */
.sales-vs-purchases-widget .svp-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 3 !important;
    transition: all 0.35s ease !important;
}

/* Subtle Translucent Wave graphic background in bottom-right corner */
.sales-vs-purchases-widget .svp-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 120px !important;
    height: 70px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath fill='%23ffffff' fill-opacity='0.65' d='M0,40 C30,15 70,50 100,20 L100,60 L0,60 Z'%3E%3C/path%3E%3Cpath fill='%23ffffff' fill-opacity='0.35' d='M0,25 C40,45 75,10 100,35 L100,60 L0,60 Z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    border-bottom-right-radius: 16px !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
    transition: transform 0.35s ease, opacity 0.35s ease !important;
}

.sales-vs-purchases-widget .svp-card:hover::after {
    transform: scale(1.12) translateY(-3px) !important;
    opacity: 1 !important;
}

.sales-vs-purchases-widget .svp-card-body {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 14px !important;
}

/* Icon Box */
.sales-vs-purchases-widget .svp-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease !important;
}

.sales-vs-purchases-widget .svp-icon-wrapper svg {
    width: 24px !important;
    height: 24px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.sales-vs-purchases-widget .svp-card:hover .svp-icon-wrapper {
    transform: scale(1.12) rotate(5deg) !important;
}

.sales-vs-purchases-widget .svp-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.sales-vs-purchases-widget .svp-label-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
}

.sales-vs-purchases-widget .svp-card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sales-vs-purchases-widget .svp-pill {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.sales-vs-purchases-widget .svp-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2 !important;
}

/* 1. SALES CARD (Emerald Theme) */
.sales-vs-purchases-widget .svp-card-sales {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(209, 250, 229, 0.95) 50%, rgba(167, 243, 208, 0.88) 100%) !important;
    border-color: rgba(167, 243, 208, 0.95) !important;
}
.sales-vs-purchases-widget .svp-card-sales::before {
    background: linear-gradient(90deg, #059669 0%, #10b981 50%, #34d399 100%) !important;
}
.sales-vs-purchases-widget .svp-card-sales:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 16px 36px rgba(16, 185, 129, 0.22) !important;
    border-color: #34d399 !important;
}
.sales-vs-purchases-widget .svp-icon-sales {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.38) !important;
}
.sales-vs-purchases-widget .svp-text-green {
    color: #065f46 !important;
}
.sales-vs-purchases-widget .svp-pill-green {
    background: rgba(5, 150, 105, 0.12) !important;
    color: #047857 !important;
}

/* 2. PURCHASES CARD (Amber / Orange Theme) */
.sales-vs-purchases-widget .svp-card-purchases {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(254, 243, 199, 0.95) 50%, rgba(253, 230, 138, 0.88) 100%) !important;
    border-color: rgba(253, 230, 138, 0.95) !important;
}
.sales-vs-purchases-widget .svp-card-purchases::before {
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%) !important;
}
.sales-vs-purchases-widget .svp-card-purchases:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 16px 36px rgba(245, 158, 11, 0.22) !important;
    border-color: #fbbf24 !important;
}
.sales-vs-purchases-widget .svp-icon-purchases {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.38) !important;
}
.sales-vs-purchases-widget .svp-text-amber {
    color: #92400e !important;
}
.sales-vs-purchases-widget .svp-pill-amber {
    background: rgba(217, 119, 6, 0.12) !important;
    color: #b45309 !important;
}

/* 3. DIFFERENCE POSITIVE CARD (Royal Blue Theme) */
.sales-vs-purchases-widget .svp-card-diff-pos {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(224, 242, 254, 0.95) 50%, rgba(186, 230, 253, 0.88) 100%) !important;
    border-color: rgba(186, 230, 253, 0.95) !important;
}
.sales-vs-purchases-widget .svp-card-diff-pos::before {
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%) !important;
}
.sales-vs-purchases-widget .svp-card-diff-pos:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.22) !important;
    border-color: #60a5fa !important;
}
.sales-vs-purchases-widget .svp-icon-diff-pos {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.38) !important;
}
.sales-vs-purchases-widget .svp-text-blue {
    color: #1e40af !important;
}
.sales-vs-purchases-widget .svp-pill-blue {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #1d4ed8 !important;
}

/* 4. DIFFERENCE NEGATIVE CARD (Crimson Red Theme) */
.sales-vs-purchases-widget .svp-card-diff-neg {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(254, 226, 226, 0.95) 50%, rgba(254, 202, 202, 0.88) 100%) !important;
    border-color: rgba(254, 202, 202, 0.95) !important;
}
.sales-vs-purchases-widget .svp-card-diff-neg::before {
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #f87171 100%) !important;
}
.sales-vs-purchases-widget .svp-card-diff-neg:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 16px 36px rgba(220, 38, 38, 0.22) !important;
    border-color: #f87171 !important;
}
.sales-vs-purchases-widget .svp-icon-diff-neg {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.38) !important;
}
.sales-vs-purchases-widget .svp-text-red {
    color: #991b1b !important;
}
.sales-vs-purchases-widget .svp-pill-red {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
}