Global overrides loaded after theme styles to ensure specificity
/* Highly specific selectors for rounded-input-y to override theme rules */
html body .signup-container input.rounded-input-y,
html body .signup-container select.rounded-input-y,
html body .signup-container textarea.rounded-input-y,
html body .signup-container .form-control.rounded-input-y,
html body .signup-container .form-select.rounded-input-y,
html body .signup-container .input-group .rounded-input-y,
html body .signup-container .file-input-hidden.rounded-input-y,
input.rounded-input-y,
select.rounded-input-y,
textarea.rounded-input-y {
    background-color: #e5e5e5 !important;
    border: none !important;
    border-radius: 40px !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    color: #333 !important;
}

    /* Placeholder rules */
    input.rounded-input-y::placeholder,
    textarea.rounded-input-y::placeholder {
        color: #6f6f6f !important;
    }

    input.rounded-input-y::-webkit-input-placeholder {
        color: #6f6f6f !important;
    }

    input.rounded-input-y:-ms-input-placeholder {
        color: #6f6f6f !important;
    }

    textarea.rounded-input-y::-webkit-input-placeholder {
        color: #6f6f6f !important;
    }

    textarea.rounded-input-y:-ms-input-placeholder {
        color: #6f6f6f !important;
    }

    /* Focus state */
    html body .signup-container input.rounded-input-y:focus,
    html body .signup-container select.rounded-input-y:focus,
    html body .signup-container textarea.rounded-input-y:focus,
    input.rounded-input-y:focus,
    select.rounded-input-y:focus,
    textarea.rounded-input-y:focus {
        background-color: #dddddd !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
        outline: none !important;
    }

/* File input label (if using wrapper) */
html body .signup-container .file-input-label {
    background-color: transparent;
    color: #3b82f6;
}

.rounded-input-y input {
    width: 100%;
    background-color: #e5e7eb; /* equivalent to bg-gray-200 */
    border-radius: 9999px; /* equivalent to rounded-full */
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    text-align: right;
    transition: background-color 0.15s ease;
}

    .rounded-input-y input:focus {
        background-color: #d1d5db; /* equivalent to bg-gray-300 */
        outline: none;
    }

.rounded-input-y {
    position: relative;
}

    .rounded-input-y input {
        padding-right: 3rem; /* space for eye icon */
    }

/* ─── Sidebar design tokens ────────────────────────────────────────── */
:root {
    --sidebar-bg: rgb(234, 244, 242);
    --sidebar-text: #374151;
    --sidebar-icon: #374151;
    --sidebar-item-bg: transparent;
    --sidebar-item-bg-hover: rgba(0, 167, 111, 0.08);
    --sidebar-item-bg-active: #bee8da;
    --sidebar-item-color-active: #1a202c;
    --sidebar-logout-color: #b71d18;
    --topbar-bg: #00a76f;
}

/* ─── Sidebar shell ─────────────────────────────────────────────────── */
.app-sidebar,
.main-sidebar {
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
}

.main-sidebar {
    margin-top: 20px !important;
}

/* ─── Nav items — base state ─────────────────────────────────────────── */
.app-sidebar .side-menu__item {
    color: var(--sidebar-text) !important;
    background-color: var(--sidebar-item-bg) !important;
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.app-sidebar .side-menu__icon {
    color: var(--sidebar-icon) !important;
    transition: color 0.18s ease;
}

.app-sidebar .side-menu__label {
    color: var(--sidebar-text) !important;
}

/* ─── Nav items — hover ─────────────────────────────────────────────── */
.app-sidebar .side-menu__item:hover {
    background-color: var(--sidebar-item-bg-hover) !important;
    color: var(--sidebar-item-color-active) !important;
}

    .app-sidebar .side-menu__item:hover .side-menu__icon {
        color: var(--sidebar-item-color-active) !important;
    }

/* ─── Nav items — active / selected ────────────────────────────────── */
.app-sidebar .side-menu__item.active,
.app-sidebar .slide.active > .side-menu__item,
.app-sidebar .slide.selected > .side-menu__item {
    background-color: var(--sidebar-item-bg-active) !important;
    color: var(--sidebar-item-color-active) !important;
}

    .app-sidebar .side-menu__item.active .side-menu__icon,
    .app-sidebar .slide.active > .side-menu__item .side-menu__icon,
    .app-sidebar .slide.selected > .side-menu__item .side-menu__icon {
        color: var(--sidebar-item-color-active) !important;
    }

/* ─── Logout item ────────────────────────────────────────────────────── */
.app-sidebar .side-menu__item.logout-nav-link,
.app-sidebar .side-menu__item.logout-nav-link .side-menu__icon,
.app-sidebar .side-menu__item.logout-nav-link .side-menu__label {
    color: var(--sidebar-logout-color) !important;
}

    .app-sidebar .side-menu__item.logout-nav-link:hover,
    .app-sidebar .side-menu__item.logout-nav-link:hover .side-menu__icon,
    .app-sidebar .side-menu__item.logout-nav-link:hover .side-menu__label {
        color: #fff !important;
    }

    .app-sidebar .side-menu__item.logout-nav-link:hover {
        background-color: var(--sidebar-logout-color) !important;
    }

/* Ensure sidebar text & icons keep the active color on hover/active (except logout) */
.app-sidebar .side-menu__item:not(.logout-nav-link):hover,
.app-sidebar .side-menu__item:not(.logout-nav-link):hover .side-menu__label,
.app-sidebar .side-menu__item:not(.logout-nav-link):hover .side-menu__icon,
.app-sidebar .side-menu__item:not(.logout-nav-link).active,
.app-sidebar .side-menu__item:not(.logout-nav-link).active .side-menu__label,
.app-sidebar .side-menu__item:not(.logout-nav-link).active .side-menu__icon,
.app-sidebar .slide.active > .side-menu__item:not(.logout-nav-link),
.app-sidebar
.slide.active > .side-menu__item:not(.logout-nav-link)
.side-menu__label,
.app-sidebar
.slide.active > .side-menu__item:not(.logout-nav-link)
.side-menu__icon,
.app-sidebar .slide.selected > .side-menu__item:not(.logout-nav-link),
.app-sidebar
.slide.selected > .side-menu__item:not(.logout-nav-link)
.side-menu__label,
.app-sidebar
.slide.selected > .side-menu__item:not(.logout-nav-link)
.side-menu__icon {
    color: var(--sidebar-item-color-active) !important;
}

/* ─── Category headings ──────────────────────────────────────────────── */
.app-sidebar .category-name {
    color: var(--sidebar-text) !important;
    opacity: 0.6;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─── Topbar ─────────────────────────────────────────────────────────── */
.app-topbar {
    background-color: var(--topbar-bg) !important;
    color: white !important;
}

/* ─── Header: truly full-width, no sidebar offset ───────────────────── */
[data-vertical-style='overlay'][data-toggled='icon-overlay-close'] .app-header {
    padding-inline-start: 0rem !important;
}

.app-header {
    padding-inline-start: 0 !important;
}

/* ─── Sidebar: start below the header (header height = 3.75rem) ─────── */
.app-sidebar {
    inset-block-start: 3.75rem !important;
}

    .app-sidebar .main-sidebar {
        margin-block-start: 0 !important;
        height: calc(100vh - 3.75rem) !important;
    }

/* ─── Content: keep top offset for fixed header only (no sidebar indent removed elsewhere) ── */
.content {
    padding-inline-start: 0;
}

:root {
    --body-bg: 240 241 247;
    --primary: 0 175 116;
    --primary-rgb: 0, 175, 116;
    --primary-color: rgb(var(--primary-rgb));
    --secondary: 35 183 229;
    --warning: 245 184 73;
    --info: 73 182 245;
    --success: 38 191 148;
    --danger: 230 83 60;
    --light: 243 246 248;
    --dark: 35 35 35;
    --orange: 255 165 5;
    --pink: 231 145 188;
    --teal: 18 194 194;
    --purple: 137 32 173;
    --default-text-color: 51 51 53;
    --default-border: 243 243 243;
    --default-background: 247 248 249;
    --menu-prime-color: 55 65 81;
    --menu-border-color: 243 243 243;
    --header-prime-color: 83 100 133;
    --header-border-color: 243 243 243;
    --bootstrap-card-border: 243 243 243;
    --list-hover-focus-bg: 245 246 247;
    --text-muted: 140 144 151;
    --input-border: 233 237 246;
    --red: 208 61 70;
    --blue: 43 62 101;
    --green: 29 216 113;
    --cyan: 0 209 209;
    --indigo: 77 93 219;
    --gray: 134 153 163;
    --yellow: 255 193 2;
    --facebook: 59 89 152;
    --twitter: 0 172 238;
    --github: 51 51 51;
    --google: 207 78 67;
    --youtube: 255 0 0;
    --bs-width: 1px;
}

.main-sidebar-header {
    background-color: rgb(var(--primary)) !important;
    color: #fff !important;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    text-align: center;
}

/* Global input/select border override */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    border: 1px solid #000 !important;
}

    /* Keep border black even on focus/active/hover */
    .form-control:focus,
    .form-select:focus,
    input:focus,
    textarea:focus,
    select:focus,
    .form-control:hover,
    .form-select:hover,
    input:hover,
    textarea:hover,
    select:hover {
        border-color: #000 !important;
    }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE & RTL SAFETY NET
   ═══════════════════════════════════════════════════════════════════════ */

/* Prevent any horizontal scroll bleed on the page body */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Ensure the main content area never exceeds viewport */
.main-content {
    max-width: 100% !important;
    overflow-x: hidden;
}

.content.main-index {
    max-width: 100% !important;
    overflow-x: hidden;
}

/* ─── Mobile sidebar: ensure correct slide direction in RTL ─────────── */
@media screen and (max-width: 991.98px) {
    /* On mobile the sidebar is a fixed overlay that slides in from the edge.
       The Ynex theme uses translateX(-100%) for LTR and translateX(100%) for RTL.
       Make sure our custom top offset still works on mobile. */
    .app-sidebar {
        inset-block-start: 0 !important;
        z-index: 103 !important;
    }

    /* Ensure the responsive overlay sits above content but below sidebar */
    #responsive-overlay {
        z-index: 102 !important;
    }

    /* Remove any content left/right padding offset on mobile */
    .content.main-index {
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }

    /* Page header: stack on mobile */
    .page-header.md\:flex {
        flex-direction: column !important;
        gap: 0.75rem;
    }

    /* Reduce page content horizontal padding on mobile */
    .main-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ─── Ensure sidebar open state works correctly in RTL on mobile ─────── */
@media screen and (max-width: 991.98px) {
    [data-toggled="open"][dir="rtl"] .app-sidebar {
        transform: translateX(0) !important;
    }

    [data-toggled="close"][dir="rtl"] .app-sidebar {
        transform: translateX(100%) !important;
    }

    [data-toggled="open"][dir="ltr"] .app-sidebar,
    [data-toggled="open"]:not([dir]) .app-sidebar {
        transform: translateX(0) !important;
    }

    [data-toggled="close"][dir="ltr"] .app-sidebar,
    [data-toggled="close"]:not([dir]) .app-sidebar {
        transform: translateX(-100%) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE ENHANCEMENTS — TABLET (< 768px)
   ═══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 767.98px) {
    /* Page headers: stack title + buttons vertically */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
    }

        .page-header ol,
        .page-header .flex.items-center {
            flex-wrap: wrap;
            gap: 0.5rem;
        }

    /* Buttons: ensure minimum touch target of 44px */
    .ti-btn {
        min-height: 44px;
        min-width: 44px;
        font-size: 0.8125rem;
    }

    /* Filter grids: single column on small tablets */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Pagination footer: stack on tablets */
    .border-t .flex-wrap {
        gap: 0.75rem;
    }

    /* Tables: improve scroll UX */
    .admin-table-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        position: relative;
    }

    /* Table cells: tighter padding */
    .admin-table th,
    .admin-table td {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.8125rem;
    }

    /* Dropdown menus: constrain to viewport */
    .hs-dropdown-menu,
    .ti-dropdown-menu {
        max-width: calc(100vw - 2rem) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE ENHANCEMENTS — PHONE (< 480px)
   ═══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 479.98px) {
    /* Scale base font for very small screens */
    html {
        font-size: 14px;
    }

    /* Page titles: slightly smaller */
    .page-header h3 {
        font-size: 1rem !important;
    }

    /* Page header buttons: full width on phones */
    .page-header ol {
        width: 100%;
    }

        .page-header ol li {
            flex: 1;
        }

            .page-header ol li .ti-btn {
                width: 100%;
                justify-content: center;
            }

    /* Filter bar padding: reduce on phones */
    .p-6 {
        padding: 1rem !important;
    }

    /* Pagination footer: vertical stack */
    .p-4.sm\:p-6.border-t {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }

    /* Table header: smaller text */
    .table-header-title th {
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    /* Ensure action dropdown button has good touch target */
    .hs-dropdown-toggle {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAL RESPONSIVE SAFETY
   ═══════════════════════════════════════════════════════════════════════ */

/* Ensure modals never exceed viewport — :where() keeps specificity at zero
   so that Tailwind utility classes like max-w-md still take priority */
:where(.fixed.inset-0) > div,
:where(.hs-overlay) > div {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

@media screen and (max-width: 479.98px) {
    :where(.fixed.inset-0) > div,
    :where(.hs-overlay) > div {
        max-width: calc(100vw - 1rem);
        margin: 0.5rem;
        border-radius: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLE SCROLL INDICATOR
   ═══════════════════════════════════════════════════════════════════════ */

/* Fade hint on right edge to signal horizontal scrollability */
@media screen and (max-width: 991.98px) {
    .admin-table-scroll {
        position: relative;
    }

        .admin-table-scroll::after {
            content: '';
            position: sticky;
            right: 0;
            top: 0;
            bottom: 0;
            width: 24px;
            pointer-events: none;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
            z-index: 1;
        }

    [dir="rtl"] .admin-table-scroll::after {
        right: auto;
        left: 0;
        background: linear-gradient(to left, transparent, rgba(255,255,255,0.8));
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOUCH TARGET IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
    /* On touch devices, enlarge clickable areas */
    .side-menu__item {
        min-height: 44px !important;
        padding-block: 0.625rem !important;
    }

    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Pagination arrows */
    .ri-arrow-left-s-line,
    .ri-arrow-right-s-line {
        padding: 0.25rem;
    }

    /* Form inputs: minimum height for touch */
    .form-control,
    .form-select {
        min-height: 44px;
    }

    /* Checkbox/switch: bigger touch area */
    .form-check-input,
    .ti-switch {
        min-width: 20px;
        min-height: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH DOT — RTL-AWARE POSITIONING
   ═══════════════════════════════════════════════════════════════════════ */

.toggle-dot-on {
    transform: translateX(100%);
}

[dir="rtl"] .toggle-dot-on {
    transform: translateX(-100%);
}

/* Status Toggle Switch overrides to ensure the isActive icon works correctly */
.w-11 {
    width: 2.75rem !important;
}

.h-6 {
    height: 1.5rem !important;
}

.w-5 {
    width: 1.25rem !important;
}

.h-5 {
    height: 1.25rem !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

.bg-green-500 {
    background-color: #22c55e !important;
}

.bg-gray-200 {
    background-color: #e5e7eb !important;
}

.text-green-600 {
    color: #16a34a !important;
}

.top-\[2px\] {
    top: 2px !important;
}

.start-\[2px\] {
    inset-inline-start: 2px !important;
}

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.transition-transform {
    transition-property: transform !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

/* Fix low contrast placeholder color globally across the application */
input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control::placeholder {
    color: #949eb7 !important; /* gray-500 from design system */
    opacity: 1 !important; /* Firefox override */
}

/* Order pages form legends (labels) */
fieldset.relative legend {
    color: #323251 !important; /* gray-900 */
    font-weight: 800 !important;
}

/* ─── Products Table UI/UX Improvements ───────────────────────────── */
.products-table-container {
    border: 2px solid #e6eaeb !important; /* gray-300 alternative for table border */
    border-radius: 20px !important;
    background-color: #fff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle hover effect on rows */
.products-table tbody tr {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.products-table tbody tr:hover {
    background-color: rgba(249, 250, 251, 0.8) !important; /* gray-100 equivalent */
}

/* Highlight row and table when active/focused */
.products-table tbody tr:focus-within {
    background-color: rgba(0, 167, 111, 0.05) !important; /* subtle primary green highlight */
}

.products-table-container:focus-within {
    border-color: rgb(var(--primary)) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 167, 111, 0.1), 0 8px 10px -6px rgba(0, 167, 111, 0.1) !important;
    transform: translateY(-2px);
}

/* Products Table Inputs Styling */
.products-table-container input[type="number"],
.products-table-container input[type="text"],
.products-table-container input[type="date"],
.products-table-container select {
    border-radius: 8px !important;
    border: 1px solid #dbdfe1 !important; /* gray-400 */
    font-weight: 700 !important;
    transition: all 0.2s ease-in-out !important;
    background-color: #fff !important;
    color: #323251 !important; /* gray-900 */
}

.products-table-container input:hover,
.products-table-container select:hover {
    border-color: #949eb7 !important; /* gray-500 */
}

.products-table-container input:focus,
.products-table-container select:focus {
    border-color: rgb(var(--primary)) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18) !important;
    outline: none !important;
}

/* Products Table Action Buttons */
.products-table-container .btn-delete-row {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fee2e2 !important; /* bg-red-100 */
    border: 1px solid #fca5a5 !important; /* border-red-300 */
    color: #dc2626 !important; /* text-red-600 */
    transition: all 0.2s ease-in-out;
}

.products-table-container .btn-delete-row:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    transform: scale(1.05);
}

.products-table-container .btn-delete-row:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
    outline: none !important;
}

/* Validation error message wrapping */
.validation-error-msg {
    color: #dc2626 !important; /* text-red-600 */
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
    display: block !important;
    max-width: 140px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* ─── Add Product Selection Modal UX Improvements ─────────────────── */
.modal-backdrop-custom {
    position: fixed !important;
    top: -100vh !important;
    left: -100vw !important;
    right: -100vw !important;
    bottom: -100vh !important;
    width: 300vw !important;
    height: 300vh !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 1000 !important;
}

.modal-wrapper-custom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    pointer-events: none !important;
}

.modal-container-custom {
    pointer-events: auto !important;
    background-color: #ffffff !important;
    border-radius: 24px !important;
    border: 1px solid #e6eaeb !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    max-width: 56rem !important; /* max-w-4xl */
    width: 100% !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1.5rem !important;
    overflow: hidden !important;
    transition: all 0.3s ease-in-out !important;
}

/* Overriding global input/select black borders specifically inside the modal */
.modal-container-custom input[type="text"],
.modal-container-custom select {
    border: 1px solid #dbdfe1 !important;
    border-radius: 12px !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #323251 !important;
    background-color: #fff !important;
    transition: all 0.2s ease-in-out !important;
}

.modal-container-custom input[type="text"]:focus,
.modal-container-custom select:focus {
    border-color: rgb(var(--primary)) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18) !important;
    outline: none !important;
}

.modal-container-custom .products-table-container {
    min-height: 200px !important;
}

/* Modal Content responsive fixes */
@media screen and (max-width: 767.98px) {
    .modal-container-custom {
        max-height: 92vh !important;
        padding: 1rem !important;
        border-radius: 16px !important;
    }
    .modal-container-custom .products-table-container {
        min-height: 180px !important;
    }
}

@media screen and (max-height: 700px) {
    .modal-container-custom {
        max-height: 95vh !important;
    }
    .modal-container-custom .products-table-container {
        min-height: 120px !important;
    }
}

/* Custom scrollbar styling for the products table container */
.products-table-container::-webkit-scrollbar {
    height: 8px !important;
    width: 8px !important;
}

.products-table-container::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 10px !important;
}

.products-table-container::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border-radius: 10px !important;
}

.products-table-container::-webkit-scrollbar-thumb:hover {
    background: #64748b !important;
}