/* ============================================================
   DARK GREY THEME OVERRIDES
   Primary: #424242 | Hover: #303030 | Light: #5a5a5a
   ============================================================ */

/* --- CSS Custom Properties (for consistency) --- */
:root {
    --theme-primary:        #424242;
    --theme-primary-hover:  #303030;
    --theme-primary-light:  #5a5a5a;
    --theme-primary-alpha:  rgba(66, 66, 66, 0.35);
    --theme-primary-soft:   rgba(66, 66, 66, 0.10);
}

/* --- Text / Background / Border utilities --- */
.text--primary               { color: var(--theme-primary) !important; }
.bg--primary                 { background-color: var(--theme-primary) !important; }
.border--primary             { border-color: var(--theme-primary) !important; }

/* --- Solid buttons --- */
.btn--primary                { background-color: var(--theme-primary) !important; }
.btn--primary:hover          { background-color: var(--theme-primary-hover) !important; }
.btn--primary.btn--shadow    { box-shadow: 0 5px 10px 0 rgba(66, 66, 66, 0.35); }
.btn--primary.btn--gradi,
.btn-primary.btn--gradi      {
    background: var(--theme-primary) !important;
    background-image: linear-gradient(30deg, #424242, rgba(90, 90, 90, 0.7)) !important;
}

/* --- Outline buttons --- */
.btn-outline--primary        { color: var(--theme-primary)  !important; border-color: var(--theme-primary) !important; }
.btn-outline--primary:hover  { background-color: var(--theme-primary) !important; color: #ffffff !important; }
.btn-outline--primary.btn--shadow       { box-shadow: 0 5px 10px 0 rgba(66, 66, 66, 0.35); }
.btn-outline--primary.btn--shadow:hover { box-shadow: 0 5px 15px 0 rgba(66, 66, 66, 0.4); }

/* --- Dropdown active item --- */
.dropdown-item.active,
.dropdown-item:active        { background-color: var(--theme-primary); }

/* --- Sidebar-specific palette (distinct from button primary) --- */
:root {
    --sidebar-active-bg:    #2e3b4e;   /* dark blue-slate for active/open items */
    --sidebar-active-text:  #ffffff;
    --sidebar-hover-bg:     #e8ecf0;   /* soft cool-grey hover background */
    --sidebar-hover-text:   #2e3b4e;   /* matching text/icon on hover */
    --sidebar-sub-active:   rgba(46, 59, 78, 0.20);
}

/* --- Sidebar menu active / hover --- */
.sidebar .res-sidebar-close-btn                                          { background-color: var(--sidebar-active-bg); }

/* Hover: background + icon + text */
.sidebar__menu .sidebar-menu-item > a:hover                             { background-color: var(--sidebar-hover-bg) !important; }
.sidebar__menu .sidebar-menu-item > a:hover .menu-icon,
.sidebar__menu .sidebar-menu-item > a:hover .menu-title                 { color: var(--sidebar-hover-text); }

/* Active / opened top-level item */
.sidebar__menu .sidebar-menu-item .side-menu--open,
.sidebar__menu .sidebar-menu-item.active > a                            {
    background-color: var(--sidebar-active-bg) !important;
    border-left-color: var(--sidebar-active-bg) !important;
}
.sidebar__menu .sidebar-menu-item .side-menu--open .menu-icon,
.sidebar__menu .sidebar-menu-item .side-menu--open .menu-title,
.sidebar__menu .sidebar-menu-item.active > a .menu-icon,
.sidebar__menu .sidebar-menu-item.active > a .menu-title               { color: var(--sidebar-active-text) !important; }

/* Submenu active */
.sidebar__menu .sidebar-submenu .sidebar-menu-item.active > a           { background-color: var(--sidebar-sub-active) !important; }
.sidebar__menu .sidebar-submenu .sidebar-menu-item.active a .menu-icon,
.sidebar__menu .sidebar-submenu .sidebar-menu-item.active a .menu-title { color: var(--sidebar-active-bg); }

/* Submenu hover */
.sidebar__menu .sidebar-submenu .sidebar-menu-item a:hover              { background-color: var(--sidebar-hover-bg) !important; }
.sidebar__menu .sidebar-submenu .sidebar-menu-item a:hover .menu-icon,
.sidebar__menu .sidebar-submenu .sidebar-menu-item a:hover .menu-title  { color: var(--sidebar-hover-text); }

/* sidebar with bg-- class */
.sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item > a:hover     { background-color: var(--sidebar-sub-active); }
.sidebar[class*="bg--"] .sidebar__menu .sidebar-menu-item .side-menu--open { background-color: var(--sidebar-active-bg) !important; }

/* pill styles */
.sidebar.pill--bg-1 .sidebar-menu-item .side-menu--open,
.sidebar.pill--bg-1 .sidebar-menu-item.active > a                       { background-color: var(--sidebar-active-bg); }

.sidebar[class*="bg--white"] .sidebar__menu .sidebar-menu-item > a:hover .menu-icon,
.sidebar[class*="bg--white"] .sidebar__menu .sidebar-menu-item > a:hover .menu-title { color: var(--sidebar-hover-text); }

/* --- Navbar / topbar search focus --- */
.navbar-search .navbar-search-field:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 5px rgba(66, 66, 66, 0.4);
}

/* --- Navbar pulse dot --- */
.pulse--primary {
    background: var(--theme-primary);
    box-shadow: 0 0 0 rgba(66, 66, 66, 0.9);
}
@-webkit-keyframes pulse-primary {
    0%   { -webkit-box-shadow: 0 0 0 0   rgba(66, 66, 66, 0.9); }
    70%  { -webkit-box-shadow: 0 0 0 6px rgba(66, 66, 66, 0); }
    100% { -webkit-box-shadow: 0 0 0 0   rgba(66, 66, 66, 0); }
}
@keyframes pulse-primary {
    0%   { box-shadow: 0 0 0 0   rgba(66, 66, 66, 0.9); }
    70%  { box-shadow: 0 0 0 6px rgba(66, 66, 66, 0); }
    100% { box-shadow: 0 0 0 0   rgba(66, 66, 66, 0); }
}

/* --- Breadcrumb links --- */
.page-breadcrumb li a                       { color: var(--theme-primary); }

/* --- Notification dropdown footer hover --- */
.dropdown-menu__footer .view-all-message:hover { color: var(--theme-primary); }

/* --- Loading spinner --- */
.spinner { border-top: 4px solid var(--theme-primary); }

/* --- Links default --- */
a { color: var(--theme-primary); }
a:hover { color: var(--theme-primary-hover); }

/* --- Form controls focus --- */
.form-control:focus,
.form-select:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.2rem rgba(66, 66, 66, 0.2);
}

/* --- Input group addon (cursor buttons in amount fields) --- */
.input-group-text { background-color: var(--theme-primary); color: #fff; border-color: var(--theme-primary); }

/* --- Overlay bg-- primary --- */
[class*="overlay"].overlay--primary::before { background-color: var(--theme-primary); }

/* --- Badge primary --- */
.badge--primary,
.badge.bg--primary { background-color: var(--theme-primary) !important; color: #fff !important; }

/* --- Modal header accent (top border on modals) --- */
.modal-header { border-bottom: 2px solid var(--theme-primary); }

/* --- Pagination active --- */
.page-item.active .page-link {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}
.page-link:hover { color: var(--theme-primary); }
.page-link       { color: var(--theme-primary); }

/* --- Tabs active --- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
}
.nav-tabs .nav-link:hover { color: var(--theme-primary-hover); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--theme-primary); }

/* --- Checkbox / Radio accent --- */
.form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

/* --- Toggle (bootstrap-toggle) --- */
.toggle-on.btn-primary,
.toggle.btn-primary { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; }

/* --- Select2 focus / selected highlight --- */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--theme-primary);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.2rem rgba(66, 66, 66, 0.2);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
}

/* --- Login page colours → dark grey --- */
.login-main                { background-color: #1c1c1c !important; }
.login-wrapper             { background-color: #2a2a2a !important; }
.login-wrapper__top        { background-color: var(--theme-primary) !important; }
.login-wrapper__top::after { border-color: var(--theme-primary) transparent transparent transparent !important; }

/* --- Scrollbar thumb --- */
::-webkit-scrollbar-thumb { background-color: var(--theme-primary); border-radius: 4px; }

/* ============================================================
   END DARK GREY THEME OVERRIDES
   ============================================================ */

/* --- Login cmn-btn (submit button on login/auth pages) --- */
.cmn-btn {
    background-color: #3674B5 !important;
    border-color: #3674B5 !important;
    color: #fff !important;
}
.cmn-btn:hover {
    background-color: #2a5c9a !important;
    border-color: #2a5c9a !important;
}

/* --- .bg--dark utility (was blue #3674B5 → now dark grey) --- */
.bg--dark { background-color: var(--theme-primary) !important; }

/* --- Login form control focus border --- */
.login-form .form-control:focus { border-color: var(--theme-primary); }

.table .dropdown-menu {
     padding: 0 0;
}

.table .dropdown-item {
     padding: 0.4rem 0.8rem;
}

.dropdown-item.active,
.dropdown-item:active {
     background-color: #424242;
}

.products {
     position: absolute;
     left: 0;
     right: 0;
     top: calc(100% + 5px);
     background-color: #fff;
     box-shadow: 0 0 25px rgb(0 0 0 / 13%);
     border-radius: 3px;
     z-index: 999;
     max-height: 386px;
     overflow-y: scroll;
}

.products__item {
     padding: 10px 20px;
     cursor: pointer;
     transition: all .3s ease;
     border-bottom: 1px solid #f3f3f9;
}

.products__item:last-child {
     border-bottom: none;
}

.products__item:hover {
     background: #f3f3f9;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
     opacity: .4;
}

.table td img {
     height: 60px;
     width: 60px;
     object-fit: cover;
}


.table td {
     white-space: initial;
     word-break: initial;
}

.table td:last-child {
     white-space: nowrap;
}

.button--group {
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
     gap: 2px;
     flex-grow: 1;
}