/* START dropdown Service Time Options (STO) */
.status-dropdown {
    width: 100%;
    padding: 8px 30px 8px 10px; /* Add right padding for the arrow */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

   

    .status-dropdown option {
        padding: 10px;
        font-size: 14px;
        color: #333;
    }

 

    .status-dropdown:disabled {
        color: #c4c4c4;
       /* background-color: #f7f7f7;*/
        cursor: not-allowed;
    }

    .status-dropdown option {
        background-color: #ffffff;
        color: #333;
        padding: 8px;
        font-size: 14px;
        font-weight: 500;
    }

        .status-dropdown option:hover {
            background-color: #f0f0f0; /* Light gray background on hover */
            color: #333; /* Ensure the text color stays visible */
        }

        .status-dropdown option:disabled {
            color: #c4c4c4; /* Grey out disabled options */
            background-color: #f9f9f9;
        }

/* END dropdown service time options */

/* START Delivery Zones Input */
.form-control-dz {
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #DDDDDD;
    padding: 0 3px 0 3px;
    width: 70px;
    font-size: 15px;
    height: 20px;
    margin-right: 3px;
    box-shadow: none;
    outline: none;
}

.form-style1 .form-control-dz::placeholder {
    color: #717171;
    font-family: var(--title-font-family);
}

.form-style1 .form-control-dz.active, .form-style1 .form-control-dz:focus {
    border: none;
    border-bottom: 1px solid #8B5CF6;
}
/* END Delivery Zones Input */


/* START Sound on order */
.order-sound-btn {
    margin-right: 3px;
    border: none;
    background-color: #FFF5F8;
    color: #F1416C;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
}

.order-sound-btn.off {
    background-color: #FFF5F8;
    color: #F1416C;
}

/* The tint carries the icon's own hue, exactly as #FFF5F8 does for #F1416C. #e6f4ec was built for
   the older, warmer #5BBB7B and sits 11 degrees off #00d181; #E6F4EF keeps its lightness and
   saturation untouched and moves only the hue, so the pair matches as closely as the off pair. */
.order-sound-btn.on {
    background-color: #E6F4EF;
    color: #00d181;
}
/* END Sound on order */

/* START Fiscal printer status - card admin-ui/07.
   Deliberately identical to .order-sound-btn above: the two sit side by side in the header
   and must read as one control type. Padding is left at the UA button default so the 38px
   line-height centres the glyph inside the 40px box exactly as it does for the bell.
   The .on/.off classes are set on the button by fiscalization-bridge, so colour and
   background move together from one place instead of JS writing an inline colour. */
.fiscal-printer-btn {
    margin-right: 3px;
    border: none;
    background-color: #FFF5F8;
    color: #F1416C;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
}

.fiscal-printer-btn.off {
    background-color: #FFF5F8;
    color: #F1416C;
}

.fiscal-printer-btn.on {
    background-color: #E6F4EF;
    color: #00d181;
}
/* END Fiscal printer status */


/* START Log Out Admin Button */
.logout-admin-btn {
    background: none;
    border: none;
    color: #181A20;
    background-color: #f3f5f6;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
}
/* END Log Out Admin Button */


/* MAUI-only navigation entries are hidden by default; layout JS removes the
   .maui-hidden class once it detects the MAUI bridge is available. Class-based
   (instead of inline style:none) so CSS :has() selectors below can react. */
.maui-hidden {
    display: none !important;
}

/* START Office Tabs Styling */
.office-tabs-container {
    display: inline-block;
}

.office-radio-tabs {
    padding: 3px;
    display: inline-flex;
    background: #f9f9f9;
    border-radius: 12px;
    overflow: hidden;
}

    .office-radio-tabs.mv {
        background: #fff;
        border-radius: 5px;
    }

    .office-radio-tabs .office-tab-link {
        cursor: pointer;
        padding: 13px 30px;
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
        color: var(--headings-color);
        background: #fff;
        transition: all 0.3s ease;
        margin: 0;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 120px;
        text-align: center;
        text-decoration: none;
        flex: 1;
    }

    .office-radio-tabs.mv .office-tab-link {
        background: #f9f9f9;
    }

    .office-radio-tabs .office-tab-link:first-child {
        border-right: 2px solid #f9f9f9;
        border-radius: 12px 0 0 12px;
    }

    .office-radio-tabs.mv .office-tab-link:first-child {
        border-right: 2px solid #fff;
        border-radius: 5px 0 0 5px;
    }

    .office-radio-tabs .office-tab-link:last-child {
        border-left: 2px solid #f9f9f9;
        border-radius: 0 12px 12px 0;
    }

    .office-radio-tabs.mv .office-tab-link:last-child {
        border-left: 2px solid #fff;
        border-radius: 0 5px 5px 0;
    }

    /* Marked tab: the light brand wash, exactly as the POS basket's eat-in/takeaway tabs do it
       (pos-layout.1.25.css:763). One background layer and nothing else - the label keeps the dark
       var(--headings-color) from the base rule, and the border is left alone so the first/last
       child separator rules keep working untouched. */
    .office-radio-tabs .office-tab-link.active,
    .office-radio-tabs .office-tab-link.active:hover {
        background-image: var(--kl-btn-gradient-wash);
        position: relative;
        z-index: 1;
    }

    .office-radio-tabs .office-tab-link:hover:not(.active) {
        background-color: #f9f9f9;
        border-color: #f9f9f9;
    }

    /* When the last tab in the DOM is hidden (e.g. POS in browser), promote the
       second-to-last tab to be the visually-last one so the rounded right corner
       and the left separator land on it instead. Same for the .mv (mobile)
       variant which uses different colours and radii. */
    .office-radio-tabs:has(> .office-tab-link.maui-hidden:last-child) .office-tab-link:nth-last-child(2) {
        border-left: 2px solid #f9f9f9;
        border-radius: 0 12px 12px 0;
    }

    .office-radio-tabs.mv:has(> .office-tab-link.maui-hidden:last-child) .office-tab-link:nth-last-child(2) {
        border-left: 2px solid #fff;
        border-radius: 0 5px 5px 0;
    }

/* Restaurant Selector Styling */
.restaurant-selector-container {
    display: inline-block;
}

    .restaurant-selector-container .bootstrap-select {
        min-width: 200px !important;
    }

        .restaurant-selector-container .bootstrap-select .btn {
            border: 1px solid #DDDDDD;
            border-radius: 12px;
            padding: 13px 24px;
            outline: none;
            font-size: 14px;
            line-height: 18px;
            height: auto;
            align-items: center;
            color: #212529;
            background: #fff;
            transition: all 0.3s ease;
        }

            .restaurant-selector-container .bootstrap-select .btn:hover {
                color: #8B5CF6;
            }

            .restaurant-selector-container .bootstrap-select .btn:focus {
                outline: none;
                box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
            }

/* Mobile responsive */
@media (max-width: 991px) {
    .office-tabs-container {
    }

    .restaurant-selector-container {
    }
}

@media (max-width: 576px) {
    .office-radio-tabs .office-tab-link {
        padding: 10px 16px;
        font-size: 12px;
        min-width: 100px;
    }
}

/* END Office Tabs Styling */


/* START Touch-Friendly Radio Buttons */
.radio-card-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-card-group .radio-card {
    display: block;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.radio-card-group .radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.radio-card-group .radio-card .radio-card-content {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    transition: all 0.15s ease;
    min-height: 48px;
}

.radio-card-group .radio-card .radio-card-content:active {
    transform: scale(0.98);
}

.radio-card-group .radio-card .radio-card-dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.radio-card-group .radio-card .radio-card-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.15s ease;
}

.radio-card-group .radio-card .radio-card-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

/* Selected state */
.radio-card-group .radio-card input[type="radio"]:checked ~ .radio-card-content {
    border-color: var(--kl-ctl-detail);
    background-image: var(--kl-btn-gradient-wash);
    background-origin: border-box;
    background-clip: border-box;
}

.radio-card-group .radio-card input[type="radio"]:checked ~ .radio-card-content .radio-card-dot {
    border-color: var(--kl-ctl-detail);
}

.radio-card-group .radio-card input[type="radio"]:checked ~ .radio-card-content .radio-card-dot::after {
    background-color: var(--kl-ctl-detail);
}

.radio-card-group .radio-card input[type="radio"]:checked ~ .radio-card-content .radio-card-label {
    color: #1a1a1a;
}

/* Hover state (non-touch devices) */
@media (hover: hover) {
    .radio-card-group .radio-card:hover .radio-card-content {
        border-color: var(--kl-ctl-detail);
    }

    .radio-card-group .radio-card:hover .radio-card-dot {
        border-color: var(--kl-ctl-detail);
    }
}
/* END Touch-Friendly Radio Buttons */


/* START PIN Lock Keypad */
.pin-lock-modal {
    z-index: 9999;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pin-lock-modal .modal-dialog {
    max-width: 380px;
}

@media (max-width: 576px) {
    .pin-lock-modal .modal-dialog {
        margin: 1.75rem auto;
    }
}

.pin-modal-bg {
    background: #ffffff;
    border: none;
}

.pin-display-line {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    min-height: 42px;
}

.pin-stars {
    font-size: 36px;
    letter-spacing: 14px;
    color: #181A20;
    line-height: 1;
}

.pin-display-line.success .pin-stars {
    color: #00d181;
}

.pin-cursor {
    display: inline-block;
    width: 2px;
    height: 34px;
    background: #181A20;
    margin-left: 2px;
    animation: pin-blink 1s step-end infinite;
}

.pin-display-line.success .pin-cursor {
    display: none;
}

@keyframes pin-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.pin-display-line.shake {
    animation: pin-shake 0.5s ease;
}

@keyframes pin-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-12px); }
    30% { transform: translateX(10px); }
    45% { transform: translateX(-8px); }
    60% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
}

.pin-alert {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    text-align: center;
}

.pin-alert-error {
    background: rgba(235, 103, 83, 0.15);
    color: #EB6753;
    border: 1px solid rgba(235, 103, 83, 0.25);
}

.pin-alert-warning {
    background: rgba(255, 193, 7, 0.1);
    color: #b8860b;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 280px;
    margin: 0 auto;
}

.pin-key {
    height: 58px;
    border-radius: 14px;
    border: 1px solid #e8e8e8;
    font-size: 22px;
    font-weight: 600;
    color: #181A20;
    background: #F7F7F7;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.pin-key:hover {
    background: #eaeaea;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pin-key:active {
    transform: scale(0.93);
    background: #e0e0e0;
}

.pin-key-backspace {
    color: #999;
    font-size: 18px;
}

.pin-key-backspace:hover {
    color: #8B5CF6;
}

.pin-key-ok {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.3);
    color: #7C3AED;
    font-size: 18px;
}

.pin-key-ok:hover {
    background: rgba(124, 58, 237, 0.2);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.pin-key-ok:active {
    background: rgba(124, 58, 237, 0.3);
}

.pin-key-ok.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
/* END PIN Lock Keypad */


/* START Cash keypad — touch-friendly numeric pad for cash amount entry inside
   deposit / withdraw modals. Visually inspired by the PIN keypad but tuned for
   monetary input (decimal point + backspace, OK is the modal footer button). */
.cash-amount-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 8px;
    padding: 14px 20px;
    background: #f8f9fa;
    border: 1px dashed #DDDDDD;
    border-radius: 12px;
    font-weight: 700;
    max-width: 320px;
}

.cash-amount-value {
    font-size: 32px;
    color: #181A20;
    line-height: 1;
    letter-spacing: -0.5px;
}

.cash-amount-currency {
    font-size: 18px;
    color: #6c757d;
    font-weight: 500;
}

.cash-amount-error {
    color: #dc3545;
    font-size: 13px;
    text-align: center;
    margin-bottom: 12px;
    min-height: 18px;
    line-height: 1.4;
}

.cash-amount-error:empty {
    margin-bottom: 0;
    min-height: 0;
}

.cash-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}

.cash-keypad-key {
    height: 56px;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    font-size: 22px;
    font-weight: 600;
    color: #181A20;
    background: #F7F7F7;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0;
}

.cash-keypad-key:hover {
    background: #eaeaea;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.cash-keypad-key:active {
    transform: scale(0.95);
    background: #e0e0e0;
}

.cash-keypad-key-decimal {
    font-size: 28px;
    line-height: 0.5;
}

.cash-keypad-key-backspace {
    color: #999;
    font-size: 18px;
}

.cash-keypad-key-backspace:hover {
    color: #8B5CF6;
}

@media (max-width: 575.98px) {
    .cash-amount-value {
        font-size: 28px;
    }
    .cash-amount-currency {
        font-size: 16px;
    }
    .cash-keypad-key {
        height: 50px;
        font-size: 20px;
    }
}
/* END Cash keypad */


/* START Inventory Navigation Tabs */
.inventory-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inventory-nav-item {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 16px;
    padding: 15px 25px;
    position: relative;
    border: none;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    -webkit-box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.07);
    -moz-box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.07);
    -o-box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.07);
    box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.07);
}

.inventory-nav-text {
    font-size: 14px;
    align-self: center;
    margin-right:20px;
    color: var(--headings-color);
    font-family: var(--title-font-family);
    font-weight: 400;
}

.inventory-nav-icon {
    text-align:center;
    background-color: #f3f5f6;
    border-radius: 50%;
    color: var(--headings-color);
    font-size: 16px;
    height: 45px;
    line-height: 45px;
    position: relative;
    width: 45px;
}



.inventory-nav-item:hover {
    transform: translateY(-3px);
    box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.08);
    text-decoration: none;
    border: none;
}


@media (max-width: 575.98px) {
    .inventory-nav {
        gap: 6px;
    }

    .inventory-nav-item {
        padding: 8px 14px;
    }

    .inventory-nav-text {
        font-size: 12px;
    }

    .inventory-nav-icon {
        font-size: 14px;
        height: 35px;
        line-height: 35px;
        width: 35px;
    }
}
/* END Inventory Navigation Tabs */

/* START Inventory Item List */
.inventory-list-item {
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 12px;
    border: 1px dashed #6c757d;
    position:relative;
}

.edit-inventory-link {
    display: inline-block;
    background-color: rgb(247, 247, 247);
    color: var(--headings-color);
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    border-radius: 4px;
    cursor: pointer;
}

    .edit-inventory-link:hover {
        color: var(--headings-color);
    }

/* END Inventory Item List */

/* START Inventory Accordion */
.inventory-accordion {
    border: none;
}

.inventory-accordion-item {
    border: none;
    border-radius: 12px !important;
    margin-bottom: 15px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.inventory-accordion-btn {
    padding: 18px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: none;
    box-shadow: none !important;
}

.inventory-accordion-btn:not(.collapsed) {
    color: #333;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.inventory-accordion-btn::after {
    width: 14px;
    height: 14px;
    background-size: 14px;
}

/* card admin-ui/08: geometry only. The colours come from the house style — the markup carries
   .pending-style.style5 for the resting (collapsed) state, which this rule must not fight. */
.inventory-accordion-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

/* The open state is style6 (#F3EDFF / #7C3AED). It lives here rather than as a markup class because
   it is a *state*, not a label: Bootstrap's accordion and inventory-search.1.01.js both toggle
   `collapsed` on the ancestor button, and a static class cannot follow that. At (0,3,0) this beats
   .pending-style.style5 (0,2,0) on specificity, so it no longer depends on stylesheet load order. */
.inventory-accordion-btn:not(.collapsed) .inventory-accordion-badge {
    background-color: #F3EDFF;
    color: #7C3AED;
}

.inventory-accordion-item .accordion-body {
    padding: 15px 24px 24px;
}


/* .btn-icon-soft-success is gone. It was the soft green icon-only button, and its own comment said
   the green existed to match the order-cancellation modal - a pairing that stopped being true when
   that modal moved to the brand wash during the form-controls work. Its only two users were the
   Check Printer Status button on the fiscal-operations screen and its POS twin, and both now use
   .cash-stat-refresh, the transparent brand refresh button already sitting a few rows below them on
   the same screen. Same icon, same job, one treatment.
   Note it drops from 44px to that class's 40px. Below the Datecs touch floor on paper, but
   .cash-stat-refresh is already used at 40px on this very screen, so the pair is now consistent
   rather than one of them being right. */


/* START Square icon-only button geometry.
   Carries no colour: the order-details icon buttons take their palette from .btn-thm2. Needed
   because .ud-btn is inline-block with 8px/16px padding, which leaves an icon-only button about
   34px tall — under the 44px touch minimum these screens are used at on a Datecs terminal. */
.ud-btn.btn-icon-square {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* END Square icon-only button geometry */


/* START Action Row pattern — full-width tappable row used as a single button.
   Replaces the "title + description + button" trio with one large touch target. */
.action-row-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed #DDDDDD;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    color: inherit;
    font: inherit;
    min-height: 64px;
}

.action-row:hover,
.action-row:focus {
    background: #f8f9fa;
    border-color: #B5B5B5;
    outline: none;
    text-decoration: none;
}

.action-row:active {
    background: #f0f1f3;
    transform: scale(0.998);
}

.action-row[disabled],
.action-row.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Neutral icon square on the left. All variants share the same gray background;
   variant classes are kept on the markup for future use but currently render
   identically. The icon background flips to white when the row is hovered. */
.action-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    flex-shrink: 0;
    background-color: #f3f5f6;
    color: var(--headings-color);
    transition: background-color 0.15s ease;
}

.action-icon-success,
.action-icon-warning,
.action-icon-info,
.action-icon-danger {
    background-color: #f3f5f6;
    color: var(--headings-color);
}

.action-row:hover .action-icon,
.action-row:focus .action-icon {
    background-color: #ffffff;
}

/* Title + subtitle stack */
.action-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.action-title {
    font-weight: 600;
    font-size: 15px;
    color: #181a20;
    line-height: 1.3;
}

.action-subtitle {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.4;
}

/* Chevron on the right hints the row is tappable */
.action-chevron {
    color: #adb5bd;
    font-size: 13px;
    flex-shrink: 0;
    margin-left: 8px;
}

/* On narrow screens drop the description so two rows take less space */
@media (max-width: 767.98px) {
    .action-subtitle {
        display: none;
    }
    .action-row {
        padding: 12px 14px;
        min-height: 56px;
    }
}
/* END Action Row pattern */


/* START Cash stat card — hero display for "Cash in Drawer" with the amount as
   the focal point. Same white background + dashed border as the action rows so
   it sits naturally next to them; differentiated as a status (not an action) by
   the layout (label on top, big number on bottom, no chevron). */
.cash-stat-card {
    background: #fff;
    border: 1px dashed #DDDDDD;
    border-radius: 10px;
    padding: 14px 16px;
    /* Compact on larger screens — full-width only on small touch devices */
    max-width: 360px;
}

.cash-stat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cash-stat-label {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* The Check Printer Status button. Same paint as .cash-stat-refresh, but its own class because the
   two sit in different places: the cash one is a flex item beside a label, this one has to line up
   with a 44px dropdown that carries a label above it. Borrowing the cash class meant relying on
   `align-self-end`, which aligns to the bottom of the flex LINE rather than to the field, so the
   button drifted. The markup now puts it in a `d-flex align-items-center` row with the select, which
   centres it against the field at any width and needs no alignment utility at all. */
.fiscal-printer-refresh {
    background: transparent;
    border: none;
    color: #8B5CF6;
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
}

.fiscal-printer-refresh:hover,
.fiscal-printer-refresh:focus {
    background: rgba(124, 58, 237, 0.18);
    color: #7C3AED;
}

/* 44px, the product's one control height. It was 40px - invisible on the cash card, where the button
   sits against a label rather than a field. */
.cash-stat-refresh {
    background: transparent;
    border: none;
    color: #8B5CF6;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
    margin: -6px -6px -6px 0; /* pull into card padding so the row stays tight */
}

.cash-stat-refresh:hover,
.cash-stat-refresh:focus {
    background: rgba(124, 58, 237, 0.18);
    color: #7C3AED;
    outline: none;
}

.cash-stat-amount {
    font-size: 30px;
    font-weight: 700;
    color: #181a20;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0;
}

/* Full-width on small / touch screens */
@media (max-width: 767.98px) {
    .cash-stat-card {
        max-width: none;
    }
    .cash-stat-amount {
        font-size: 28px;
    }
}
/* END Cash stat card */


/* START Brand form controls - card admin-ui/03.
   Loads after bootstrap.min.css and after the theme, so these rules win every
   source-order tie. Bootstrap here is v5.1.3: the tick, the dot and the switch
   knob are all background-image data-URIs, so a checked state needs two layers
   (mark over gradient) and must restate every multi-layer background property. */
:root {
    /* The three gradients live in the theme's :root (style.2.01.css:66-68) as
       --kl-btn-*; card 03 must not edit the theme, so it reuses them under their
       existing names and defines only the control-specific tokens below. */
    --kl-ctl-track-off: #F5F3FF;
    --kl-ctl-border-off: #E9D5FF;
    --kl-ctl-knob-off: #C4B5FD;
    --kl-ctl-detail: #7C3AED;
    --kl-ctl-track-disabled: #F1F5F9;
    --kl-ctl-border-disabled: #E5E7EB;
    --kl-ctl-knob-disabled: #CBD5E1;
    --kl-ctl-muted: #94A3B8;
    --kl-ctl-on-shadow: rgba(139, 92, 246, 0.28);
    --kl-ctl-surface: #FFFFFF;
}

/* .switch-style1 is listed alongside the bare selector, not for tidiness: the theme paints a checked
   switch #8bb03f at `.switch-style1 .form-check-input:checked`, which is (0,3,0) and beat this rule's
   (0,2,0). The green was winning on background-color and only stayed invisible because the gradient
   background-image below happened to cover it completely. Any change to background-size, or any
   transparency in the gradient, would have brought it back. 158 switches ride on this. */
.form-check-input:checked,
.switch-style1 .form-check-input:checked {
    background-color: transparent;
    border-color: transparent;
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), var(--kl-btn-gradient);
    background-position: center, center;
    background-size: contain, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

/* Radios mark their selection with a solid --kl-ctl-detail dot on white, not the gradient - the
   reference is pos-layout's variant card (.radio-element ... ::before). Deliberately ONE background
   layer, so none of the two-value lists the checkbox rules need are restated here: Bootstrap's own
   single-value background-position/size/repeat apply, and origin/clip fall back to their initial
   padding-box/border-box. The 3.5px radius reproduces Bootstrap's own 7px dot exactly, so the mark
   does not change size. Checkboxes and switches keep the gradient. */
.form-check-input:checked[type="radio"] {
    background-image: radial-gradient(circle, var(--kl-ctl-detail) 3.5px, #fff 3.5px);
    border-color: var(--kl-ctl-detail);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: transparent;
    border-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"), var(--kl-btn-gradient);
    background-position: center, center;
    background-size: contain, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

.custom_checkbox input:checked ~ .checkmark {
    background-color: transparent;
    background-image: var(--kl-btn-gradient);
    background-origin: border-box;
    background-clip: border-box;
    border-color: transparent;
}

/* The theme draws this one as a thick 3px ring with an empty white centre (style.2.01.css:7027-7030).
   Thinning it to 1px lets the shared radio dot above show through, so it matches every other radio.
   .form-check-input is 16px with box-sizing: border-box, so the width does not change. */
.radio-element .form-check-input:checked {
    border: 1px solid var(--kl-ctl-detail);
}

/* Switches. A switch input is [type=checkbox], so these rules use `input.` to
   lift specificity above the checkbox rules above rather than lean on order.
   Every state declares a 1px border - solid or transparent - so the track never
   changes size; box-sizing: border-box keeps the theme's 55x30px intact. */
.switch-style1 input.form-check-input,
.switch-style1 input.form-check-input:focus,
.form-switch input.form-check-input,
.form-switch input.form-check-input:focus {
    background-color: var(--kl-ctl-track-off);
    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='%23C4B5FD'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid var(--kl-ctl-border-off);
    box-shadow: none;
    outline: none;
}

.switch-style1 input.form-check-input:checked,
.switch-style1 input.form-check-input:checked:focus,
.form-switch input.form-check-input:checked,
.form-switch input.form-check-input:checked:focus {
    background-color: transparent;
    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"), var(--kl-btn-gradient);
    background-position: right center, center;
    background-size: contain, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px var(--kl-ctl-on-shadow);
}

/* opacity:1 overrides Bootstrap's .form-check-input:disabled{opacity:.5}, which would halve the
   dedicated disabled palette below and leave the knob at 1.16:1 against its own track - effectively
   invisible. The switch signals "disabled" through that palette, not through transparency. Scoped to
   switches on purpose: checkboxes and radios have no disabled palette and still need Bootstrap's .5.
   The label dims via a separate Bootstrap rule on .form-check-label, so it is unaffected. */
.switch-style1 input.form-check-input:disabled,
.form-switch input.form-check-input:disabled {
    opacity: 1;
    background-color: var(--kl-ctl-track-disabled);
    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='%23CBD5E1'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid var(--kl-ctl-border-disabled);
}

.switch-style1 input.form-check-input:checked:disabled,
.form-switch input.form-check-input:checked:disabled {
    background-color: transparent;
    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"), var(--kl-btn-gradient-wash);
    background-position: right center, center;
    background-size: contain, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    box-shadow: none;
}

.switch-style1 input.form-check-input:disabled ~ .form-check-label,
.switch-style1 input.form-check-input[disabled] ~ .form-check-label,
.form-switch input.form-check-input:disabled ~ .form-check-label,
.form-switch input.form-check-input[disabled] ~ .form-check-label {
    color: var(--kl-ctl-muted);
}

/* Focused text field. The theme's green ring is an `outline` sitting outside the
   box; this repaints the 1px border the field already carries at rest, so the
   box does not shift. .form-select is deliberately excluded - overriding
   background-image there would erase Bootstrap's dropdown caret. */
.form-style1 .form-control.active,
.form-style1 .form-control:focus,
.form-control:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid transparent;
    background-image: linear-gradient(var(--kl-ctl-surface), var(--kl-ctl-surface)), var(--kl-btn-gradient);
    background-position: center, center;
    background-size: auto, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}
/* END Brand form controls */
/* END Inventory Accordion */
/* Offer type selection - Views/Offers/_OfferTypeSelectionPartial.cshtml
   Moved here from a <style> block inside that partial. The partial is AJAX-loaded, so the block was
   re-sent on every visit to the screen and could never be cached.

   Every selector is scoped to .offer-type-card. In the partial's own file the generic names were
   safe by isolation; here they are not. `.divider` alone is live markup in five other places -
   Views/POS/_CashCalculatorContent.cshtml, Views/Reservations/_ManageTablesPartial.cshtml,
   Views/FbAds/Shared/_QualifierBundle.cshtml, wwwroot/pos/checkout.1.14.html and
   wwwroot/pos/order-details.1.07.html - and would have grown a 40x3 gradient bar. `.details` appears
   in twelve. Do not unscope any of these. */
.offer-type-card {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.offer-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8B5CF6, #EC4899);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.offer-type-card:hover::before {
    transform: scaleX(1);
}

.offer-type-card .offer-type-content {
    padding: 30px 20px 20px;
    text-align: center;
    position: relative;
}

/* The colour lives in the icon, not behind it: four solid gradient discs with coloured shadows
   shouted over each other. The disc rests neutral - #F1F5F9 is the palette's own grey, the one
   the style5 badge uses - and only picks up the brand tint on hover, so a screen of four reads
   calm and the one under the cursor is the one wearing colour. */
.offer-type-card .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    background: #F1F5F9;
    transition: background-color 0.3s ease;
}

.offer-type-card:hover .icon-circle {
    background: #F3EDFF;
}

/* The icons are `fal`, not `fas`. At 32px a solid glyph is a block of colour and reads as loud as
   the filled disc it replaced; the light weight is a line drawing, which is the point. Dark
   rather than violet: the light strokes keep it from outweighing the title beneath it, and the
   brand is left to carry the top bar, the divider and the hover. */
.offer-type-card .icon-circle i {
    font-size: 32px;
    color: var(--headings-color);
}

.offer-type-card .title {
    color: #2d3748;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 18px;
}

.offer-type-card .divider {
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #8B5CF6, #EC4899);
    margin: 0 auto 15px;
    border-radius: 2px;
}

.offer-type-card p {
    color: #6c757d;
    font-size: 13px;
    line-height: 1.6;
    min-height: 65px;
}

.offer-type-card .offer-type-footer {
    padding: 15px 20px;
    margin-top: 20px;
    border-top: 1px solid #e9ecef;
    background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.05) 100%);
}

.offer-type-card .select-text {
    color: #8B5CF6;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-block;
}

.offer-type-card .select-text i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.offer-type-card:hover .select-text i {
    transform: translateX(5px);
}

/* One tint for all four. The previous four differed by a couple of hex points each - a distinction
   nobody could see, and four rules to keep in step for nothing. */
.offer-type-card:hover {
    border-color: #8B5CF6;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(139, 92, 246, 0.12), 0 4px 8px rgba(0,0,0,0.06);
    background: linear-gradient(145deg, #FAF7FF 0%, #ffffff 100%);
}

.offer-type-card:hover .select-text {
    color: #7C3AED;
}

.offer-type-card:active {
    transform: translateY(-6px) scale(0.98);
}

@media (max-width: 1199px) {
    .offer-type-card .icon-circle {
        width: 70px;
        height: 70px;
    }

    .offer-type-card .icon-circle i {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .offer-type-card p {
        min-height: auto;
    }
}
/* END Offer type selection */

/* START Input affix and stepper groups
   One control drawn 54 different ways by a copy-pasted inline `style`, collapsed onto two classes:
   .kl-input-affix (a currency/unit label welded to the right edge of a field) and the
   .number-decrement / .number-increment pair (a stepper welded to both edges of a quantity field).

   `.form-control` must NEVER appear here unscoped - a bare rule would flatten and un-border every
   ordinary input in the admin. The child combinator `>` is used as well, so a .form-control nested
   deeper inside a group is untouched.

   background-origin and background-clip are stated on every gradient-bearing rule: the defaults
   (padding-box / border-box) size the gradient to the padding box but paint it into the border box,
   smearing the last stop across the border.

   The border is 1px, not the 2px the inline styles carried, so that the affix and the steppers line
   up on their top and bottom edges with the field's own `1px solid #DDDDDD` and with the POS
   .guest-qty-btn / .move-qty-btn family. 44px throughout, per the height card. */
.kl-input-group {
    display: flex;
}

.kl-input-group .number-decrement,
.kl-input-group .number-increment {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background-image: var(--kl-btn-gradient);
    background-origin: border-box;
    background-clip: border-box;
    color: var(--kl-btn-text-light);
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outer corners are keyed to the class rather than to :first-child/:last-child, because some of
   these groups straddle a Razor @if whose branches change which children are present. */
.kl-input-group .number-decrement {
    border-radius: 8px 0 0 8px;
}

.kl-input-group .number-increment {
    border-radius: 0 8px 8px 0;
}

.kl-input-group .number-decrement:hover,
.kl-input-group .number-increment:hover {
    background-image: var(--kl-btn-gradient-interaction);
    background-origin: border-box;
    background-clip: border-box;
    border-color: transparent;
}

.kl-input-group .number-decrement:disabled,
.kl-input-group .number-increment:disabled {
    background-image: none;
    background-color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
}

/* Every affix in the admin trails its input, so only the right corners are rounded. */
.kl-input-group .kl-input-affix {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 0 8px 8px 0;
    background-image: var(--kl-btn-gradient);
    background-origin: border-box;
    background-clip: border-box;
    color: var(--kl-btn-text-light);
    font-size: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.kl-input-group > .form-control {
    height: 44px;
    flex: 1 1 auto;
    min-width: 0;
}

/* :not(:last-child) is load-bearing. Views/Menu/_AddOrUpdateMenuItemPartial.cshtml renders a lone
   readonly input inside this same wrapper on one branch of an @if; squaring its right corners
   unconditionally would leave that field flattened against nothing. */
.kl-input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.kl-input-group > .number-decrement + .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

/* The focus rule further up this file sets `border: 1px solid transparent` as a shorthand, which
   puts back the side borders the two rules above remove. These take them off again; the extra
   :not(:last-child) / .number-decrement raises their specificity above .form-style1
   .form-control:focus, and they also sit later in the same file. */
.kl-input-group > .form-control:not(:last-child):focus {
    border-right: none;
}

.kl-input-group > .number-decrement + .form-control:focus {
    border-left: none;
}
/* END Input affix and stepper groups */