/* Global modal close button: override bootstrap-extended.css's floating
   white square (box-shadow + translate) with a plain inline BS5 icon,
   matching the style used on the Sale Invoice "Add Item" modal. */
.modal .modal-header .btn-close {
    padding: 0.8rem !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    opacity: 0.5 !important;
    position: relative !important;
    transform: none !important;
    margin: -0.8rem -0.8rem -0.8rem auto !important;
}

.modal .modal-header .btn-close:hover,
.modal .modal-header .btn-close:focus,
.modal .modal-header .btn-close:active {
    opacity: 1 !important;
    outline: none;
    transform: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.dt-button:active {
    background-color: white !important;
    color: #CC9214 !important;
}

.dt-button:focus {
    background-color: white !important;
    color: #CC9214 !important;
}

.dt-button:focus-visible {
    background-color: white !important;
    color: #CC9214 !important;
}

.dt-button:focus-within {
    background-color: white !important;
    color: #CC9214 !important;
}

.dt-button-collection {
    margin-top: 8px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    width: 210px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    z-index: 1050 !important;
}

.table thead th {
    text-transform: none;
}

.dt-buttons {
    float: unset !important;
}

/* Colvis Buttons */
.dt-button-collection .dt-button.buttons-columnVisibility {
    background-color: transparent !important;
    background: transparent !important;
    color: #4a5568 !important;
    border: none !important;
    padding: 8px 12px 8px 32px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    border-radius: 5px !important;
    position: relative !important;
    transition: all 0.15s ease-in-out !important;
}

/* Checkbox outline */
.dt-button-collection .dt-button.buttons-columnVisibility::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 1.5px solid #a0aec0;
    border-radius: 3px;
    transition: all 0.15s ease-in-out;
}

/* Checkbox checked state */
.dt-button-collection .dt-button.buttons-columnVisibility.active::before {
    content: '✓';
    border-color: #00ADEF;
    color: #ffffff;
    background-color: #00ADEF;
    font-size: 9px;
    line-height: 10px;
    text-align: center;
    font-weight: bold;
}

/* Hover/Focus/Active state locks for inactive items */
.dt-button-collection .dt-button.buttons-columnVisibility:hover,
.dt-button-collection .dt-button.buttons-columnVisibility:focus,
.dt-button-collection .dt-button.buttons-columnVisibility:active {
    background-color: #f7fafc !important;
    background: #f7fafc !important;
    color: #2d3748 !important;
    border: none !important;
}

/* Hover/Focus/Active state locks for active items */
.dt-button-collection .dt-button.buttons-columnVisibility.active,
.dt-button-collection .dt-button.buttons-columnVisibility.active:hover,
.dt-button-collection .dt-button.buttons-columnVisibility.active:focus,
.dt-button-collection .dt-button.buttons-columnVisibility.active:active {
    color: #00ADEF !important;
    background-color: rgba(0, 173, 239, 0.08) !important;
    background: rgba(0, 173, 239, 0.08) !important;
    border: none !important;
}

/* Dark layout overrides */
.dark-layout .dt-button-collection {
    background-color: #283046 !important;
    background: #283046 !important;
    border-color: #3b4253 !important;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility {
    color: #b4b7bd !important;
    border: none !important;
}

.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility::before {
    border-color: #676d7d;
}

.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility.active::before {
    border-color: #00ADEF;
    background-color: #00ADEF;
}

.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility:hover,
.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility:focus,
.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility:active {
    background-color: #343d55 !important;
    background: #343d55 !important;
    color: #ffffff !important;
}

.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility.active,
.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility.active:hover,
.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility.active:focus,
.dark-layout .dt-button-collection .dt-button.buttons-columnVisibility.active:active {
    color: #00ADEF !important;
    background-color: rgba(0, 173, 239, 0.12) !important;
    background: rgba(0, 173, 239, 0.12) !important;
}

.dt-button-collection [class*="buttons-"]:active {
    background-color: rgba(0, 173, 239, 0.12) !important;
}

/* .main-menu ul.navigation-main {
    overflow-x: scroll;
} */


.vertical-layout.vertical-menu-modern.menu-expanded .main-menu {
    overflow-x: hidden !important;
}

/* Global Font Override — Supports Dynamic Site Font Selection */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --app-font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --bs-font-sans-serif: var(--app-font-family) !important;
    --font-family-sans-serif: var(--app-font-family) !important;
    --report-font: var(--app-font-family) !important;
}

body {
    font-weight: 500 !important;
    font-family: var(--app-font-family) !important;
}

html, body, input, select, textarea, button, p, span, a, div, table, th, td, label, small, form, option, optgroup, legend, fieldset, nav, header, footer, section, main, article, aside, details, summary, .form-control, .btn, .nav-link, .menu-title, .menu-item {
    font-family: var(--app-font-family) !important;
    font-weight: 500;
}

.dark-layout #appFontSelector {
    background-color: #283046 !important;
    color: #d0d2d6 !important;
    border-color: #3b4253 !important;
}

/* Preserve icon font families and pseudo-elements for icons/navigation indicators */
i, .fa, .fas, .far, .fab, .fal, .fad, .feather,
[class^="fa-"], [class*=" fa-"], [class^="icon-"], [class*=" icon-"],
[class^="feather-"], [class*=" feather-"], [class^="pe-7s-"], [class*=" pe-7s-"],
.select2-icon, .swal2-icon, .swiper-button-next, .swiper-button-prev, .context-menu-icon {
    font-family: initial !important;
}

i::before, i::after,
.fa::before, .fa::after,
.fas::before, .fas::after,
.far::before, .far::after,
.fab::before, .fab::after,
.fal::before, .fal::after,
.fad::before, .fad::after,
[class^="fa-"]::before, [class^="fa-"]::after,
[class*=" fa-"]::before, [class*=" fa-"]::after,
[class^="icon-"]::before, [class^="icon-"]::after,
[class*=" icon-"]::before, [class*=" icon-"]::after,
[class^="feather"]::before, [class^="feather"]::after,
[class*=" feather"]::before, [class*=" feather"]::after,
[class^="pe-7s-"]::before, [class^="pe-7s-"]::after,
[class*=" pe-7s-"]::before, [class*=" pe-7s-"]::after,
.context-menu-icon::before, .context-menu-icon::after,
.navigation li.has-sub > a::after,
.navigation li.has-sub > a::before,
.dropdown-toggle::after,
.dropdown-toggle::before {
    font-family: initial;
}

/* Ensure submodule chevron arrows always render clearly across light and dark modes */
.main-menu .navigation li.has-sub > a:after {
    content: '' !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1.1rem !important;
    height: 1.1rem !important;
    width: 1.1rem !important;
    display: inline-block !important;
    position: absolute !important;
    right: 20px !important;
    top: 14px !important;
    transform: rotate(0deg);
    transition: all 0.2s ease-out !important;
}

.main-menu .navigation li.has-sub.open:not(.menu-item-closing) > a:after,
.main-menu .navigation li.has-sub.sidebar-group-active:not(.menu-item-closing) > a:after {
    transform: rotate(90deg) !important;
}

.dark-layout .main-menu .navigation li.has-sub > a:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0d2d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* 
.ps__rail-y {
    top: 21px;
    right: 0px;
    height: 368px;
    display: block;
}

.ps__thumb-y {
    top: 8px;
    height: 100px !important;
    width: 6px;
    right: 2px;
}

.ps__rail-x {
    left: 0px;
    bottom: -21px;
    display: block;
}

.ps--active-y>.ps__rail-y {
    display: block;
} */