:root {
    --nexus-font-family: "Source Sans 3", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --nexus-brand-color: #245B9E;
    --nexus-brand-hover: #1b467a;
    --nexus-brand-soft: rgba(36, 91, 158, 0.12);
    --nexus-brand-shadow: rgba(36, 91, 158, 0.3);
    --nexus-brand-solid: #245B9E;
    --nexus-brand-solid-hover: #1b467a;
    --nexus-radius-sm: 6px;
    --nexus-radius-md: 8px;
    --nexus-radius-lg: 10px;
    --nexus-motion-fast: 140ms ease;
    --theme-color: var(--nexus-brand-color);
    --primary-bg-color: var(--nexus-brand-soft);
}

body.dark-mode {
    --nexus-brand-color: #8DBDF0;
    --nexus-brand-hover: #B7D5F5;
    --nexus-brand-soft: rgba(141, 189, 240, 0.22);
    --nexus-brand-shadow: rgba(141, 189, 240, 0.34);
    --nexus-brand-solid: #326FB6;
    --nexus-brand-solid-hover: #245B9E;
    --theme-color: var(--nexus-brand-color);
    --primary-bg-color: var(--nexus-brand-soft);
}

body,
button,
input,
select,
textarea,
.form-control,
.bootstrap-select .dropdown-toggle,
.navbar,
.side-navbar,
.table,
.card,
.dropdown-menu,
.modal-content {
    font-family: var(--nexus-font-family);
}

input.form-control::-moz-placeholder,
input.form-control::-webkit-input-placeholder,
input.form-control:-ms-input-placeholder,
select.form-control,
input.input-material ~ label {
    font-family: var(--nexus-font-family);
}

a,
a:hover,
a:focus {
    color: var(--nexus-brand-color);
}

.bootstrap-select .btn-link,
.brand-text h3,
.dashboard-counts .count-title i,
.details-header,
.dripicons-question,
.statistics .user-activity .page-statistics strong,
.table.order-list tr td .btn-link,
.table.totals tr td .btn-link,
.text-primary,
.page-link,
.dropdown-menu.edit-options li .btn-link,
.dropdown-menu.edit-options li a {
    color: var(--nexus-brand-color) !important;
}

.side-navbar li a i,
nav.navbar .nav-item a i,
.right-sidebar a i,
.btn.btn-default,
.btn.btn-default:focus,
.btn-default,
.btn-default:focus,
.dark-mode .btn-default,
.dark-mode .side-navbar li a i,
.dark-mode nav.navbar .nav-item a i,
.dark-mode .right-sidebar a i {
    color: var(--nexus-brand-color) !important;
}

.side-navbar li a:focus,
.side-navbar li a:hover,
.side-navbar li a[aria-expanded=true],
.side-navbar li.active > a,
.dropdown-item.selected,
.dropdown-menu.edit-options li .btn-link:hover,
.dropdown-menu.edit-options li a:hover {
    background-color: var(--primary-bg-color) !important;
    color: var(--nexus-brand-color) !important;
}

.dark-mode .side-navbar li ul {
    border-color: var(--nexus-brand-color) !important;
}

.side-navbar .sidenav-header,
.statistics .user-activity .progress .progress-bar.bg-primary,
.bg-primary,
.buttons-collection,
.dt-button-collection.dropdown-menu,
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front,
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.badge-primary,
.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.daterangepicker .custom-range-buttons button.apply-btn,
.daterangepicker .custom-range-buttons button.apply-btn:hover {
    background-color: var(--nexus-brand-solid) !important;
    border-color: var(--nexus-brand-solid) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.buttons-collection:hover,
.buttons-collection:focus,
.btn-pos:hover,
nav.navbar a.menu-btn:hover {
    background-color: var(--nexus-brand-solid-hover) !important;
    border-color: var(--nexus-brand-solid-hover) !important;
    color: #fff !important;
}

.btn-outline-primary,
.btn-pos,
nav.navbar a.menu-btn,
.border-primary {
    border-color: var(--nexus-brand-color) !important;
}

.btn-outline-primary,
.btn-pos,
.btn-pos i,
.btn-pos span,
nav.navbar a.menu-btn {
    color: var(--nexus-brand-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--nexus-brand-solid) !important;
    border-color: var(--nexus-brand-solid) !important;
    color: #fff !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle,
.page-item.active .page-link,
.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.badge-primary,
.buttons-collection,
.buttons-collection span,
.dt-button-collection.dropdown-menu,
.dt-button-collection.dropdown-menu a,
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front,
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item,
.btn-pos:hover i,
.btn-pos:hover span {
    color: #fff !important;
}

.page-item.active .page-link {
    background-color: var(--nexus-brand-solid) !important;
    border-color: var(--nexus-brand-solid) !important;
}

.page-link,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    color: var(--nexus-brand-color) !important;
}

.nav-tabs .nav-item .nav-link.active {
    border-bottom-color: var(--nexus-brand-color) !important;
}

.blockquote {
    border-left-color: var(--nexus-brand-color) !important;
}

.gmpc,
.payment-amount h2 {
    color: var(--nexus-brand-color) !important;
}

#loader {
    border-top-color: var(--nexus-brand-color) !important;
}

.btn.btn-default,
.btn.btn-default:focus,
.btn-primary.active {
    color: var(--nexus-brand-color) !important;
}

.btn-primary.active {
    background-color: transparent !important;
    border-color: var(--nexus-brand-color) !important;
}

.form-control:focus,
#lims_productcodeSearch,
input.input-material:focus {
    border-color: var(--nexus-brand-color) !important;
    box-shadow: none !important;
}

input.input-material ~ label.active,
.login-page .logo span,
.register-page .logo span,
.login-page a.forgot-pass,
.login-page a.signup,
.register-page a.forgot-pass,
.register-page a.signup,
.checkbox label::after {
    color: var(--nexus-brand-color) !important;
}

input.form-control-custom:checked + label::before {
    background: var(--nexus-brand-color) !important;
}

#product-table td:hover,
#product-table tr:last-child td:hover,
#product-table tr:first-child td:hover,
#product-table tr td:first-child:hover {
    border-color: var(--nexus-brand-color) !important;
    color: var(--nexus-brand-color) !important;
}

#product-table td:hover p {
    color: var(--nexus-brand-color) !important;
}

.daterangepicker .periods li,
.daterangepicker .ranges li,
.daterangepicker .custom-range-buttons button {
    color: var(--nexus-brand-color) !important;
}

.daterangepicker .periods li.active,
.daterangepicker .periods li:hover,
.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover,
.calendar .calendar-table .table-row .table-col.end-date .table-value-wrapper,
.calendar .calendar-table .table-row .table-col.end-date .table-value-wrapper:hover,
.calendar .calendar-table .table-row .table-col.start-date .table-value-wrapper,
.calendar .calendar-table .table-row .table-col.start-date .table-value-wrapper:hover {
    background: var(--nexus-brand-solid) !important;
    color: #fff !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
    background-image: none !important;
    background-color: var(--nexus-brand-solid) !important;
    border-color: var(--nexus-brand-solid) !important;
    color: #fff !important;
    text-shadow: none !important;
}

.navbar-laravel .navbar-brand,
.navbar-laravel .nav-link,
.navbar-laravel .dropdown-toggle {
    color: var(--nexus-brand-color) !important;
}

.theme-option[data-color="default.css"] {
    background: var(--nexus-brand-color) !important;
}

body.dark-mode .pos-page .top-fields label {
    background-color: #20293d;
    color: #aebbd1;
}

body.dark-mode .pos-page #myTable tr th {
    background: #20293d !important;
    color: #e3ebf8 !important;
    border-color: #324056;
}

body.dark-mode .pos-page .totals {
    background-color: #20293d !important;
    border-top-color: #324056 !important;
    color: #edf3ff;
}

body.dark-mode .pos-page .totals .col-sm-4 {
    border-bottom-color: #324056;
}

body.dark-mode .pos-page .totals .totals-title {
    color: #aebbd1 !important;
}

body.dark-mode .pos-page .totals strong:not(.totals-title),
body.dark-mode .pos-page .product-price-text,
body.dark-mode .pos-page #myTable tbody td {
    color: #edf3ff;
}

body.dark-mode .pos-page .payment-amount {
    background-color: #24324a;
    box-shadow: inset 0 0 0 1px #324056;
}

body.dark-mode .pos-page .btn-default.minus,
body.dark-mode .pos-page .btn-default.minus:focus,
body.dark-mode .pos-page .btn-default.plus,
body.dark-mode .pos-page .btn-default.plus:focus {
    background-color: #24324a;
    color: #edf3ff !important;
}

body.dark-mode .pos-page .form-control.qty {
    background-color: transparent;
    color: #edf3ff;
}

body.dark-mode .pos-page .filter-window {
    background-color: #141b2e;
}

.btn,
.form-control,
.custom-select,
.bootstrap-select .dropdown-toggle,
.input-group-text,
.page-link {
    border-radius: var(--nexus-radius-sm) !important;
}

.card,
.modal-content,
.dropdown-menu,
.table-container,
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front,
.dt-button-collection.dropdown-menu {
    border-radius: var(--nexus-radius-md) !important;
}

.side-navbar li a,
.btn,
.form-control,
.bootstrap-select .dropdown-toggle,
.dropdown-item,
.page-link,
.nav-tabs .nav-link {
    transition: background-color var(--nexus-motion-fast), color var(--nexus-motion-fast), border-color var(--nexus-motion-fast), box-shadow var(--nexus-motion-fast), transform var(--nexus-motion-fast);
}

.btn:not(.btn-link):hover,
.btn:not(.btn-link):focus {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .side-navbar li a,
    .btn,
    .form-control,
    .bootstrap-select .dropdown-toggle,
    .dropdown-item,
    .page-link,
    .nav-tabs .nav-link {
        transition: none !important;
    }

    .btn:not(.btn-link):hover,
    .btn:not(.btn-link):focus {
        transform: none !important;
    }
}

@media (max-width: 575px) {
    nav.navbar {
        padding: 0 8px;
    }

    nav.navbar .nav-menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1 1 auto;
        width: calc(100% - 48px);
        margin-left: 8px;
        margin-right: 0;
        flex-wrap: nowrap;
    }

    nav.navbar .nav-menu > .dropdown,
    nav.navbar .nav-menu > .nav-item {
        margin-left: 0 !important;
        flex: 0 0 auto;
    }

    nav.navbar .nav-menu > .dropdown > a,
    nav.navbar .nav-menu > .nav-item > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        padding: 0 3px !important;
    }

    nav.navbar .btn-pos {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    nav.navbar .btn-pos span,
    nav.navbar .nav-menu > li.nav-item:last-child > a > span {
        display: none;
    }

    nav.navbar .nav-menu > .nav-item > a > i {
        margin-right: 0;
    }

    nav.navbar .nav-menu > li.nav-item:last-child > a > i.fa-angle-down {
        margin-left: 4px;
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    #mobile-shortcuts-modal .modal-dialog {
        max-width: min(94vw, 420px);
        min-height: calc(100% - 1.5rem);
        margin: 0.75rem auto;
        display: flex;
        align-items: center;
    }

    #mobile-shortcuts-modal .modal-content {
        border: 0;
        border-radius: 18px 18px 14px 14px;
        box-shadow: 0 14px 36px rgba(14, 24, 42, 0.26);
        overflow: hidden;
    }

    #mobile-shortcuts-modal .mobile-shortcuts-header {
        border-bottom: 0;
        padding: 8px 12px 4px;
        position: relative;
        justify-content: flex-end;
    }

    #mobile-shortcuts-modal .mobile-shortcuts-handle {
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: rgba(128, 138, 154, 0.45);
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    #mobile-shortcuts-modal .mobile-shortcuts-close {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0;
        padding: 0;
        opacity: 1;
        color: #4f5d75;
        background: rgba(120, 138, 165, 0.12);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #mobile-shortcuts-modal .mobile-shortcuts-close span {
        line-height: 1;
    }

    #mobile-shortcuts-modal .modal-body {
        background: linear-gradient(180deg, rgba(36, 91, 158, 0.08) 0%, rgba(36, 91, 158, 0.02) 18%, #ffffff 44%);
        padding: 8px !important;
        max-height: 70vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #mobile-shortcuts-modal .mobile-shortcuts-list {
        background: transparent;
        border: 0;
        gap: 8px;
        display: flex;
        flex-direction: column;
    }

    #mobile-shortcuts-modal .mobile-shortcuts-list .list-group-item {
        border: 1px solid rgba(36, 91, 158, 0.14);
        border-radius: 11px;
        background: #ffffff;
        color: #2c3d55;
        font-weight: 600;
        font-size: 14px;
        white-space: normal;
        line-height: 1.3;
        padding: 12px 14px;
        transition: transform var(--nexus-motion-fast), border-color var(--nexus-motion-fast), box-shadow var(--nexus-motion-fast), background-color var(--nexus-motion-fast);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #mobile-shortcuts-modal .mobile-shortcuts-list .list-group-item::after {
        content: '\f105';
        font-family: FontAwesome;
        font-size: 15px;
        color: rgba(36, 91, 158, 0.75);
        margin-left: 10px;
        flex: 0 0 auto;
    }

    #mobile-shortcuts-modal .mobile-shortcuts-list .list-group-item:active,
    #mobile-shortcuts-modal .mobile-shortcuts-list .list-group-item:focus,
    #mobile-shortcuts-modal .mobile-shortcuts-list .list-group-item:hover {
        transform: translateY(-1px);
        border-color: rgba(36, 91, 158, 0.3);
        box-shadow: 0 8px 18px rgba(36, 91, 158, 0.14);
        background: #f8fbff;
    }

    body.dark-mode #mobile-shortcuts-modal .mobile-shortcuts-list .list-group-item {
        background: #1f293d;
        border-color: #324056;
        color: #dbe7fb;
    }

    body.dark-mode #mobile-shortcuts-modal .modal-content {
        background: #141b2e;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    }

    body.dark-mode #mobile-shortcuts-modal .modal-body {
        background: linear-gradient(180deg, rgba(141, 189, 240, 0.14) 0%, rgba(20, 27, 46, 0.96) 30%);
    }

    body.dark-mode #mobile-shortcuts-modal .mobile-shortcuts-close {
        color: #dbe7fb;
        background: rgba(141, 189, 240, 0.16);
    }

    body.dark-mode #mobile-shortcuts-modal .mobile-shortcuts-list .list-group-item::after {
        color: #8dbdf0;
    }

    body.dark-mode .pos-page #myTable tbody tr {
        background: #20293d;
        border-color: #324056;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    }

    body.dark-mode .pos-page #myTable tbody td.product-title {
        border-bottom-color: #324056;
    }

    body.dark-mode .pos-page .mobile-label {
        color: #aebbd1;
    }
}