/* Active link for frontend start */

.profile-link.active, .profile-link.active .lab {
    --tw-text-opacity: 1;
    color: rgb(var(--primary) / var(--tw-text-opacity));
}

/* Active link for frontend close */

/* Date picker code start*/
.dp__input {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity)) !important;
    color: inherit !important;
    font-family: var(--client-font) !important;
    font-size: 0.875rem !important;
    padding: 6px 25px !important;
}

.dp__input:hover {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity)) !important;
    color: inherit !important;
}

.dp__input_focus {
    border-color: rgb(var(--primary) / 0.2) !important;
    color: inherit !important;
}

/* Date picker code close here*/


/* Tag package customize start*/
.vue-tags-input {
    max-width: 100% !important;
}

.vue-tags-input .ti-input {
    --tw-border-opacity: 1 !important;
    border-radius: 0.375rem;
    border-color: rgb(229 231 235 / var(--tw-border-opacity)) !important;
}

.vue-tags-input.ti-focus .ti-input {
    border-color: rgb(var(--primary) / 0.2) !important;
}

.vue-tags-input.invalid-tag .ti-input {
    --tw-border-opacity: 1 !important;
    border-color: rgb(252 165 165 / var(--tw-border-opacity)) !important;
}

/* Tag package customize end*/

/* Textarea package customize start */
.textarea-error-box-style {
    padding: 0;
    margin: 0;
    border: 1px solid;
    border-radius: 0.375rem;
}

.textarea-error-box-style.invalid::before {
    content: none !important;
}

.textarea-border-radius {
    border-radius: 0 0 0 0.375rem;
    border-color: rgb(229 231 235 / var(--tw-border-opacity)) !important;
}

.ql-toolbar.ql-snow {
    border: 1px solid rgb(229 231 235) !important;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.ql-container.ql-snow {
    border-left: 1px solid rgb(229 231 235) !important;
    border-right: 1px solid rgb(229 231 235) !important;
    border-bottom: 1px solid rgb(229 231 235) !important;
}

/* Textarea package customize end */

/* Text details v-html section start */
.text-description>ol {
    list-style: auto !important;
    margin: auto !important;
    padding: revert !important;
}

.text-description>ul {
    list-style: unset !important;
    margin: auto !important;
    padding: revert !important;
}

/* Text details v-html section end */

/* Select code start */
.vue-select.no-radius {
    border-radius: 0 !important;
}

.vue-select {
    /* Was width:auto !important — Firefox then overflowed grid/flex columns and
       clipped the right edge (POS Brand/Category). Cap to the parent instead. */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(229 231 235 / var(--tw-border-opacity)) !important;
    border-radius: 0.375rem !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex-direction: column !important;
}
.vue-select .vue-select-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.vue-select .vue-input,
.vue-select .vue-input input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.vue-select .vue-select-header .icon.arrow-downward {
    flex-shrink: 0 !important;
}


.vue-select.invalid {
    border: 1px solid rgb(252 165 165 / var(--tw-border-opacity)) !important
}

.vue-input {
    padding: 0.1rem 0 !important;
}

.vue-input input {
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

.vue-input input::placeholder {
    color: #697a8d !important;
}

.vue-dropdown {
    border: 1px solid rgb(var(--primary) / 0.2) !important;
    box-shadow: 0 0.25rem 1rem rgb(229 231 235 / 45%) !important;
}

.vue-select.direction-top .vue-dropdown {
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
    z-index: 100000;
}

.vue-select.direction-bottom .vue-dropdown {
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    z-index: 100000;
}

.vue-select[aria-expanded='true'].direction-top {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.vue-select[aria-expanded='true'].direction-bottom {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.vue-select[aria-expanded='true'] {
    border-color: rgb(var(--primary) / 0.2) !important;
}

.vue-dropdown-item.highlighted {
    background-color: rgba(67, 89, 113, .04) !important;
}

.vue-dropdown-item.selected.highlighted {
    background-color: rgba(105, 108, 255, .08) !important;
    color: rgb(var(--primary) / var(--tw-text-opacity)) !important;
}

.vue-dropdown-item.selected {
    background-color: rgba(105, 108, 255, .08) !important;
    color: rgb(var(--primary) / var(--tw-text-opacity)) !important;
}

.vue-dropdown-item {
    font-size: 15px;
    padding: 0.4375rem 0.875rem !important;
}

.frontend-select input::placeholder {
    font-size: 1rem !important;
    color: rgb(31 31 57 / 1) !important;
}

/* Select code close */

/* Range slider code start */
.simple-range-slider-popover.simple-range-slider-popover-left,
.simple-range-slider-popover-arrow,
.simple-range-slider-popover.simple-range-slider-popover-right {
    display: none;
}

.simple-range-slider .simple-range-slider-bg-bar {
    margin: 10px 10px 10px !important;
}

.simple-range-slider .simple-range-slider-bg-bar .simple-range-slider-anchor {
    background: #ffffff !important;
}

/* Range slider code close */

/* Icon size start */

.lab-font-color-1 {
    color: #dee2e5 !important;
}

[class="lab"].lab-font-size-20, [class^="lab-"].lab-font-size-20, [class*=" lab-"].lab-font-size-20 {
    font-size: 20px !important;
}

[class="lab"].lab-font-size-2xl, [class^="lab-"].lab-font-size-2xl, [class*=" lab-"].lab-font-size-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

[class="lab"].lab-font-size-xl, [class^="lab-"].lab-font-size-xl, [class*=" lab-"].lab-font-size-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

[class="lab"].lab-font-size-8, [class^="lab-"].lab-font-size-8, [class*=" lab-"].lab-font-size-8 {
    font-size: 8px !important;
}

[class="lab"].lab-font-size-10, [class^="lab-"].lab-font-size-10, [class*=" lab-"].lab-font-size-10 {
    font-size: 10px !important;
}

[class="lab"].lab-font-size-16, [class^="lab-"].lab-font-size-16, [class*=" lab-"].lab-font-size-16 {
    font-size: 16px !important;
}

[class="lab"].lab-font-size-24, [class^="lab-"].lab-font-size-24, [class*=" lab-"].lab-font-size-24 {
    font-size: 24px !important;
}

[class="lab"].lab-font-size-14, [class^="lab-"].lab-font-size-14, [class*=" lab-"].lab-font-size-14 {
    font-size: 14px !important;
}

/* Icon size close */

/* installer code start */
.bg-installer {
    background-image: url(../../../images/required/installer.jpg);
}

/* installer code close */

/* installer code close */
iframe.w-full.rounded-2xl {
    background: rgb(20, 20, 20) !important;
}

.sr-only {
    left: inherit !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: transparent;
    cursor: pointer;
    position: absolute;
    inset: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
}

.drawer:where([dir="ltr"], [dir="ltr"] *) {
    right: 0px;
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.drawer:where([dir="rtl"], [dir="rtl"] *) {
    left: 0px;
    right: unset !important;
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.drawer.active:where([dir="ltr"], [dir="ltr"] *) {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.drawer.active:where([dir="rtl"], [dir="rtl"] *) {
    --tw-translate-x: -0px;
    right: unset !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.dp__clear_icon{
    right: 1px !important;
}
[dir="rtl"] .dp__clear_icon{
    right: unset !important;
    left: 1px !important;
}

.dp__input_icons {
    background: #fff;
    padding: 4px 4px !important;
}

/* ══ POS desktop shell ══════════════════════════════════════════════════
   Two columns: products/filters | cart. Filters stay in the left column only
   (not full-page). Grid + minmax(0,1fr) avoids Firefox clipping from
   calc(100%-cartWidth) beside a position:fixed cart. */
.pos-shell {
    width: 100%;
    min-width: 0;
    display: block;
}
.pos-main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.pos-filter-form {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.pos-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}
.pos-filter-item {
    min-width: 0;
    max-width: 100%;
}
.pos-search-field {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #EFF0F6;
    background: #fff;
    box-sizing: border-box;
}
.pos-filter-item .vue-select,
.pos-filter-item .vue-select.db-field-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    /* db-field-control adds px-3; keep enough room on the right for the caret */
    padding-left: 0.75rem !important;
    padding-right: 0.5rem !important;
    overflow: visible !important;
}
.pos-filter-item .vue-select-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.35rem;
    box-sizing: border-box !important;
}
.pos-filter-item .vue-select-input-wrapper,
.pos-filter-item .vue-input {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: calc(100% - 1rem) !important;
    min-width: 0 !important;
}
.pos-filter-item .vue-input input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-overflow: ellipsis;
}
/* Keep the caret inside the bordered box (Firefox was pushing it past the edge). */
.pos-filter-item .vue-select-header .icon.arrow-downward,
.pos-filter-item .vue-select-header .icon.loading {
    flex-shrink: 0 !important;
    margin-right: 0 !important;
}

@media (min-width: 640px) {
    .pos-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .pos-shell {
        display: grid;
        /* Extra gap so Brand never sits under the cart border */
        grid-template-columns: minmax(0, 1fr) 322px;
        gap: 1.25rem;
        align-items: start;
    }
    .pos-filter-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .pos-filter-row.has-reset {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.75fr);
    }
    .pos-shell > .pos-main {
        min-width: 0;
        overflow: visible;
    }
    .pos-shell > .db-pos-cartDiv {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 322px !important;
        max-width: 322px !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0.5rem;
        transform: none !important;
        z-index: 10;
        overflow-x: hidden;
        overflow-y: visible;
        background: #fff;
    }
}

@media (min-width: 1024px) {
    .pos-shell {
        grid-template-columns: minmax(0, 1fr) 305px;
    }
    .pos-shell > .db-pos-cartDiv {
        width: 305px !important;
        max-width: 305px !important;
    }
}

@media (min-width: 1280px) {
    .pos-shell {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
    .pos-shell > .db-pos-cartDiv {
        width: 360px !important;
        max-width: 360px !important;
    }
}

/* ══ Mobile POS makeover (phones ≤767px) ════════════════════════════════
   The POS was a desktop layout crammed into a WebView: the cart was a fixed,
   off-screen slide-in drawer, so the checkout button was never reachable on a
   phone. This reworks it into a real mobile point-of-sale:
     • cart flows inline under the product grid (full order details visible)
     • Cancel/Order pinned to the bottom of the screen — checkout is always
       one tap away, with NO dependency on the (SPA-timing-fragile) drawer JS
     • tappable product cards, readable names/totals, thumb-friendly keypad
   All server-side; the thin-WebView APK needs no rebuild. */
@media (max-width: 767px) {

    /* ── Cart as a bottom sheet ──────────────────────────────────────────
       Tapping the floating "N items · total" bar slides the full cart up:
       customer selector + Add button, items, totals, and Cancel/Order — all
       in one focused view, so "Add customer" is never buried below the
       product grid. Toggle is the fixed event-delegation in customScript.js. */
    .db-pos-cartDiv {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 88vh !important;
        min-height: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 -10px 34px rgba(17, 17, 39, 0.20) !important;
        transform: translateY(100%) !important;   /* hidden below the screen */
        overflow-y: auto !important;
        z-index: 60 !important;
    }
    .db-pos-cartDiv.active {
        transform: translateY(0) !important;       /* slides up into view */
    }

    /* Floating "N items · total" bar stays visible to open the sheet; its
       close (X) button works inside the sheet. */
    .db-pos-cartBtn {
        display: flex !important;
    }
    .db-pos-cartCls {
        display: block !important;
    }

    /* Customer picker now lives at the top of the POS (mobile), so hide the
       duplicate one inside the cart sheet. */
    .db-pos-cartDiv .flex.gap-2.mb-3 {
        display: none !important;
    }

    /* Keep the last products clear of the floating bar. */
    .db-main {
        padding-bottom: 80px !important;
    }

    /* Cancel/Order stick to the bottom of the sheet while it scrolls. */
    .db-pos-cartDiv .flex.items-center.justify-center.gap-6 {
        position: sticky;
        bottom: 0;
        margin: 0 -1rem -1rem;
        padding: 12px 1rem calc(12px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        box-shadow: 0 -6px 18px rgba(17, 17, 39, 0.08);
        z-index: 5;
    }
    .db-pos-cartDiv .flex.items-center.justify-center.gap-6 button {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        font-size: 16px !important;
    }

    /* Bigger, clearer order summary. */
    .db-pos-cartDiv ul li span {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    /* Product tiles: distinct tappable cards with full (non-truncated) names. */
    [data-modal="#modal"] {
        background: #fff !important;
        padding: 10px !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 10px rgba(17, 17, 39, 0.06) !important;
    }
    [data-modal="#modal"] h3 {
        white-space: normal !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    /* Detail / create / edit panels (modals + right-side drawers) fill the
       screen on phones so the FULL form is visible with vertical scrolling
       only — no horizontal "side roll". Covers the POS "Add customer" form,
       product create/edit, and every admin detail drawer. */
    /* Modals must sit above the cart bottom-sheet (z 60) so the customer/edit
       form cleanly covers it instead of overlapping. */
    .modal {
        z-index: 70 !important;
    }
    .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .modal.active .modal-dialog {
        margin: 0 !important;
    }
    .drawer,
    #sidebar > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    .modal-body,
    .drawer-body {
        overflow-x: hidden !important;
    }

    /* Thumb-friendly payment keypad. */
    #orderPayment .num {
        padding: 16px 0 !important;
        font-size: 18px !important;
    }
}