:root {
    --main-color: #FB8C00;
    --main-hover-color: #FBC02D;
    --main-secondary-color: #e8953a;
    --main-secondary-opacity-color: #FBC02D73;
    --main-border-color: #fdf0df;
    --main-focus-color: #d7461f73;
    --main-light-color: #e8953a;
    --main-light-opacity-color: #e8953a33;
    --main-light-hover-color: #e8953a;
    --main-light-hover-opacity-color: #e8953a33;
    --main-light-border-color: #e8953a;
    --main-light-border-opacity-color: #e8953a33;
    --main-light-focus-color: #e8953a;
    --main-light-focus-opacity-color: #e8953a33;
    --secondary-color: #E53935;
    --secondary-opacity-color: #E5393533;
    --secondary-hover-color: #be2c2a;
    --secondary-light-color: #e8953a;
    --secondary-light-opacity-color: #e8953a33;
    --secondary-light-hover-color: #e8953a;
    --secondary-light-hover-opacity-color: #e8953a33;
    --secondary-light-border-color: #e8953a;
    --secondary-light-border-opacity-color: #e8953a33;
    --secondary-light-focus-color: #e8953a;
    --secondary-light-focus-opacity-color: #e8953a33;
}

.layout-wrapper,
.layout-container {
    background-color: #F8F9FA;
}

.bg-image {
    background-image: url("/assets/background/background4.jpg") !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

.bg-transparent {
    background-color: rgba(0, 0, 0, .325) !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div:where(.swal2-container) {
    z-index: 1999 !important;
}

/* width */
.menu-inner::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.menu-inner::-webkit-scrollbar-track {
    background: var(--main-hover-color);
}

/* Handle */
.menu-inner::-webkit-scrollbar-thumb {
    background: var(--main-color) !important;
    border-radius: 100px;
}

/* Handle on hover */
.menu-inner::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-hover-color);
    transition: all .25s ease-in-out !important;
    -webkit-transition: all .25s ease-in-out !important;
}

/* Shadow */
.menu-inner-shadow {
    background: transparent !important;
}

.card-primary.card-outline {
    border-top: 3px solid var(--main-color) !important;
}

.card {
    border-radius: 0 !important;
}

.layout-navbar {
    border-radius: 0 !important;
}

.bg-primary {
    color: white !important;
}

.bg-label-primary {
    background-color: var(--main-border-color) !important;
    color: var(--main-color) !important;
}

.flex-fill {
    flex: 1 1 auto !important;
}

.breadcrumb-item {
    font-size: 1.25rem;
    padding-bottom: 1rem;
}

.list-group .list-group-item {
    padding: 0.25rem 0 !important;
    margin: 0.25rem 0 !important;
}

.list-group-item {
    cursor: pointer;
}

.breadcrumb-style1 .breadcrumb-item+.breadcrumb-item::before {
    content: "\ecb3";
    font-size: 1.35rem;
    line-height: 1.4;
}

.bg-menu-theme {
    background-color: #424242 !important;
    color: #697a8d;
}

.range-score {
    background: -moz-linear-gradient(left, #e42d19 0%, #f1c40f 35%, #12c75d 80%, #0300b6 100%);
    background: -webkit-linear-gradient(left, #e42d19 0%, #f1c40f 35%, #12c75d 80%, #0300b6 100%);
    background: linear-gradient(to right, #e42d19 0%, #f1c40f 35%, #12c75d 80%, #0300b6 100%);
    width: 100%;
    height: 24px !important;
}

html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover {
    color: var(--main-color) !important;
    background-color: var(--secondary-opacity-color) !important;
}

.bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle),
.bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle) .menu-icon {
    color: var(--main-color) !important;
}

.bg-menu-theme .menu-inner .menu-sub>.menu-item.active .menu-icon {
    color: var(--main-color) !important;
}

.bg-menu-theme .menu-inner>.menu-item.active>.menu-link {
    color: var(--main-color) !important;
    background-color: var(--secondary-opacity-color) !important;
}

.bg-menu-theme .menu-inner>.menu-item.active:before {
    background: var(--main-color) !important;
}

.bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle) {
    background-color: var(--secondary-opacity-color);
    color: var(--main-color) !important;
}

.nav-link-primary {
    color: var(--main-color) !important;
    transition: all .25 ease-in-out !important;
    -moz-transition: all .25 ease-in-out !important;
    -o-transition: all .25 ease-in-out !important;
    -webkit-transition: all .25 ease-in-out !important;
}

.nav-link-primary:hover {
    color: var(--secondary-hover-color) !important;
    transition: all .25 ease-in-out !important;
    -moz-transition: all .25 ease-in-out !important;
    -o-transition: all .25 ease-in-out !important;
    -webkit-transition: all .25 ease-in-out !important;
}

.nav-tabs .nav-item .nav-link:not(.active) {
    background-color: #ffffff00 !important;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
    background-color: var(--main-color) !important;
    color: #fff;
    box-shadow: 0 2px 4px 0 var(--main-secondary-opacity-color);
}

.nav .nav-link:hover,
.nav .nav-link:focus {
    color: var(--main-color) !important;
}

.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next {
    color: var(--main-border-color);
}

.bg-primary {
    background-color: var(--secondary-color) !important;
}

.bg-thead {
    background-color: #FCFCFC;
    border-color: var(--main-color) !important;
    color: var(--main-color) !important;
}

.bg-thead th {
    color: var(--main-color) !important;
}

a.bg-primary:hover,
a.bg-primary:focus {
    background-color: var(--main-color) !important;
}

.btn-primary {
    color: #fff;
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    box-shadow: 0 0.125rem 0.25rem 0 var(--main-secondary-opacity-color);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--main-hover-color);
    border-color: var(--main-hover-color);
    transform: translateY(-1px);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--main-hover-color);
    border-color: var(--main-hover-color);
    transform: translateY(0);
    box-shadow: none;
}

.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--main-hover-color);
    border-color: var(--main-hover-color);
}

.btn-check:checked+.btn-primary:focus,
.btn-check:active+.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-primary.disabled,
.btn-primary:disabled {
    box-shadow: none;
}

.btn-glass {
  background:rgba(255,255,255,0.2); color:#fff; border: 1px solid rgba(255,255,255,0.3);
}

.btn-glass:focus, .btn-glass:active, .btn-glass:hover {
  background:rgba(255,255,255,0.2); color:#fff; border: 1px solid rgba(255,255,255,0.3);
}

.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.pagination li.active>a:not(.page-link),
.pagination li.active>a:not(.page-link):hover,
.pagination li.active>a:not(.page-link):focus {
    border-color: var(--main-color) !important;
    background-color: var(--main-color) !important;
    color: #fff;
    box-shadow: 0 0.125rem 0.25rem var(--main-secondary-opacity-color);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    box-shadow: 0 2px 4px 0 var(--main-secondary-opacity-color) !important;
}

.form-check-input:focus {
    border-color: var(--main-color) !important;
    box-shadow: 0 2px 4px 0 var(--main-secondary-opacity-color) !important;
}

.form-check-input:disabled {
    background-color: #eceef1;
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    box-shadow: 0 2px 4px 0 var(--main-secondary-opacity-color) !important;
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FBC02DFF'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-control:focus,
.form-select:focus {
    border-color: var(--main-color) !important;
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
    border-color: var(--main-color) !important;
}

.form-check-input:focus {
    border-color: var(--main-color) !important;
    box-shadow: 0 2px 4px 0 var(--main-secondary-opacity-color);
}

.link a {
    color: var(--main-color) !important;
    transition: all 0.25s ease-in-out;
}

.link a:hover {
    color: var(--main-hover-color) !important;
    transition: all 0.25s ease-in-out;
}

.with-arrow .nav-link.active {
    position: relative;
    color: var(--main-color) !important;
    border-bottom: 3px solid var(--main-color) !important;
}

.with-arrow .nav-link.active::after {
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--main-color) !important;
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}

.text-primary {
    color: var(--main-color) !important;
}

.chart-sm {
    min-height: 252px;
}

.chart {
    margin: auto;
    min-height: 300px;
    position: relative;
    width: 100%;
}

/* lined tabs */

.lined .nav-link {
    border: none;
    padding: .5rem 1rem !important;
}

.lined .nav-link:hover {
    border: none;
    border-bottom: 3px solid var(--secondary-color) !important;
}

.lined .nav-link.active {
    background: none;
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.list-group.rank .list-group-item {
    padding: 1.25rem .75rem !important;
    border: 0 !important;
    outline: 0 !important;
}

.nav .nav-link:focus {
    background-color: var(--main-hover-color);
    color: #fff !important;
}

ul.summary {
    list-style: none;
    padding: .5rem .75rem;
}

li.summary-list {
    padding-left: 1.3em;
    color: #dc3545 !important;
}

li.summary-list:before {
    content: "\f00d";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.75em;
    /* same as padding-left set on li */
    width: 1.75em;
    /* same as padding-left set on li */
}

ul.checklist {
    list-style: none !important;
    padding: .5rem .75rem;
}

li.list-checklist {
    padding-left: 1.3em;
}

li.list-checklist:before {
    color: #28a745 !important;
    content: "\f00c";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.75em;
    /* same as padding-left set on li */
    width: 1.75em;
    /* same as padding-left set on li */
}

li.repair-list {
    padding-left: 1.3em;
}

li.repair-list:before {
    color: #dc3545 !important;
    content: "\f00d";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.75em;
    /* same as padding-left set on li */
    width: 1.75em;
    /* same as padding-left set on li */
}

li.info-list {
    padding-left: 1.3em;
}

li.info-list:before {
    color: #5bc0de !important;
    content: "\f05a";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.75em;
    /* same as padding-left set on li */
    width: 1.75em;
    /* same as padding-left set on li */
}

li.list-cs {
    padding-left: 2.1em;
}

li.list-cs:before {
    color: #28a745 !important;
    content: "\f00c";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.75em;
    /* same as padding-left set on li */
    width: 1.75em;
    /* same as padding-left set on li */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    height: 100%;
    width: 100%;
    background: #fff;
    display: flex;
    /* Never block touch/pointer events — page is interactive immediately */
    pointer-events: none !important;
}

.loader {
    margin: auto;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: relative;
}

.loader:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--main-color) !important;
    border-radius: 50%;
    opacity: 0;
    animation: popin 1.5s linear infinite 0s;
}

.loader:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--main-color) !important;
    border-radius: 50%;
    opacity: 0;
    animation: popin 1.5s linear infinite 0.5s;
}

:root {
    --primary-blue: #3B82F6;
    --primary-blue-dark: #2563EB;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-900: #111827;
    --green-500: #10B981;
    --yellow-500: #F59E0B;
    --red-500: #EF4444;
}

.page-container {
    max-width: 1400px;
    margin: 0 auto;
}

.table {
    font-size: 0.875rem;
}

.table thead th {
    border-top: none;
    border-bottom: 2px solid var(--gray-200);
    font-weight: 600;
    color: var(--gray-700);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.table td {
    vertical-align: middle;
    padding: 1rem 0.75rem;
}

.quantity-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: 0.25rem;
    overflow: hidden;
}

.quantity-control button {
    background: white;
    border: none;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 1rem;
}

.quantity-control button:hover {
    background-color: var(--gray-100);
}

.quantity-control input {
    border: none;
    width: 50px;
    text-align: center;
    padding: 0.25rem;
    font-weight: 500;
}

.quantity-control input:focus {
    outline: none;
}

.summary-card {
    position: sticky;
    top: 2rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.summary-total {
    border-top: 2px solid var(--gray-200);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.action-button {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.download-wrapper {
    display: block;
    border-block-start:1px solid var(--bs-border-color);
    color: var(--main-color);
    font-size: .75rem;
    padding-top: .575rem;
    padding-inline:0;
    text-align: center;
    border-bottom-right-radius: calc(0.375rem - 1px);
    border-bottom-left-radius: calc(0.375rem - 1px);
    transition: all .15s ease-in-out !important;
}

.download-wrapper:hover,
.download-wrapper:focus {
    color: var(--main-hover-color);
    text-decoration: none;
    transition: all .15s ease-in-out !important;
}

.product-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.delete-btn {
    color: var(--red-500);
    cursor: pointer;
    font-size: 1.25rem;
    background: none;
    border: none;
    padding: 0;
}

.delete-btn:hover {
    color: #DC2626;
}

.file-preview {
    min-width: 100%;
    min-height: calc(100vh - 80vh);
    object-fit: cover;
    border-radius: 0.25rem;
    background-color: #F3F4F6;
}

.file-preview img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .file-preview {
        min-height: calc(100vh - 82vh);
    }
}

@media (min-width: 768px) {
    .file-preview {
        min-height: calc(100vh - 87vh);
    }
}

@keyframes popin {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    1% {
        opacity: 0.1;
        transform: scale(0);
    }

    99% {
        opacity: 0;
        transform: scale(2);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.transition-all {
    transition: all 0.25s ease-in-out !important;
    -moz-transition: all 0.25s ease-in-out !important;
    -o-transition: all 0.25s ease-in-out !important;
    -webkit-transition: all 0.25s ease-in-out !important;
}

.btn-action {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0s 0.3s; /* Delay visibility change */
}

.btn-action.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out; /* No delay on visibility when showing */
}

.pickr .pcr-button {
  width: 100% !important;
  height: 40px !important;
  border-radius: 6px !important;
}

/* Also adjust the :before pseudo-element for consistency */
.pcr-button:before {
  width: 100%;
  height: 40px;
  border-radius: 6px !important;
}

.pcr-button:after {
  width: 100%;
  height: 40px;
  border-radius: 6px !important;
}

.input-group > .form-custom {
  width: 1rem !important;
  flex: 0.3;
}

.filter-bar {
  background: #fff; border-radius: 8px; padding: 18px 22px; margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.page-header {
  background: linear-gradient(135deg, var(--main-color) 0%, var(--secondary-color) 100%);
  color: #fff; border-radius: 8px; padding: 28px 32px; margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.page-header::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.page-header::after {
  content: ''; position: absolute; bottom: -40px; right: 60px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.page-header h4 { margin: 0; font-weight: 700; color: #fff; font-size: 1.35rem; }
.page-header small { opacity: 0.85; font-size: 0.85rem; }
.page-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.stat-card {
  border-radius: 10px; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 18px 20px; background: #fff; transition: transform 0.15s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.stat-value { font-size: 22px; font-weight: 700; }
.stat-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }

.modal .modal-dialog .modal-content {
  border-radius: 8px !important;
}
.modal .modal-header {
    background: linear-gradient(135deg, var(--main-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    border: none !important;
    border-radius: 8px 8px 0 0;
    padding: 0.875rem 1.25rem !important;
}
.modal .modal-header .modal-title {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}
.modal .modal-header .btn-close {
    opacity: 0.85;
}
.modal .modal-header .btn-close:hover {
    opacity: 1;
}
/* Legacy alias — keep for backward compat */
.modal-header-gradient {
    background: linear-gradient(135deg, var(--main-color) 0%, var(--secondary-color) 100%);
    color: #fff; border: none;
    border-radius: 8px 8px 0px 0px;
}
.modal-header-gradient .modal-title { color: #fff; font-weight: 600; }

.bg-footer-theme .footer-link {
    color: #697a8d !important;
    transition: all 0.25s ease-in-out !important;
}

.footer-link {
    color: var(--main-color) !important;
    transition: all 0.25s ease-in-out !important;
}

.footer-link:hover, .footer-link:focus {
    color: var(--main-hover-color) !important;
    text-decoration: none;
    transition: all 0.25s ease-in-out !important;
}

.section-divider { border-top: 2px solid #f0f0f0; margin: 16px 0; padding-top: 16px; }
.section-divider-label { font-size: 12px; font-weight: 700; color: var(--main-color); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }

/* ════════════════════════════════════════════════════
   GLOBAL MOBILE TOUCH FIXES
   ════════════════════════════════════════════════════ */

/*
 * Remove 300ms tap delay on ALL elements.
 * `touch-action: manipulation` tells the browser we handle clicks ourselves
 * — no double-tap-to-zoom detection needed anywhere on this ERP.
 * NOTE: do NOT override template z-index values here.
 * The Sneat template sets .layout-menu: 1100 and
 * .layout-overlay: 1099 intentionally; overriding them
 * causes the overlay to cover the sidebar on mobile.
 */
* {
    touch-action: manipulation;
}

/* Minimum touch-target size (WCAG 2.5.5 / Apple HIG = 44px). */
@media (max-width: 991.98px) {
    .btn-sm {
        min-height: 38px;
        min-width: 38px;
        padding: 6px 10px !important;
    }
}

/*
 * PerfectScrollbar registers non-passive touchstart/touchmove listeners,
 * causing Chrome/Safari to add latency before responding to any touch on
 * the sidebar. `touch-action: pan-y` tells the browser it can immediately
 * start handling vertical scrolling without waiting for JS preventDefault.
 * `overscroll-behavior: contain` replaces the need for preventDefault to
 * stop scroll from propagating to the parent.
 */
.menu-inner,
.ps {
    touch-action: pan-y;
    overscroll-behavior: contain;
}