/**
 * BPOS Shared UI Design System
 * ─────────────────────────────────────────────────────────────────────────────
 * Import this file on any page (app or hotel layout) to get the glass-card
 * design language — buttons, inputs, cards, labels, select2, alerts, etc.
 *
 *   <link rel="stylesheet" href="{{ asset('css/bpos-ui.css') }}">
 *
 * The background image is intentionally excluded — each layout owns its own
 * background. Everything else (components, typography, controls) is here.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── 1. Transparent wrappers ───────────────────────────────────────────────── */
.wrapper,
.container-fluid {
    background: transparent !important;
}

/* ── 2. Page wrapper ───────────────────────────────────────────────────────── */
.hf-page {
    min-height: 90vh;
    padding: 24px 20px 32px;
}

/* ── 3. Back / nav pill link ───────────────────────────────────────────────── */
.hf-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff !important;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    text-decoration: none !important;
    box-shadow: none;
    transition: background 0.15s;
    margin-bottom: 4px;
}
.hf-back-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff !important;
    text-decoration: none !important;
}

/* Restyle AdminLTE btn-info.btn-flat that sometimes leaks in */
.no-print a.btn-info.btn-flat {
    background: rgba(255, 255, 255, 0.15) !important;
    background-image: none !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 8px !important;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16) !important;
}

/* POS product column sizing and scroll */
@media (min-width: 992px) {
    .hf-page .pos-columns {
        display: flex;
        align-items: stretch;
    }

    .hf-page .pos-columns > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

    .hf-page .pos-left-card {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: 100%;
    }

    .hf-page .pos-product-card {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: calc(100vh - 220px);
        max-height: calc(100vh - 220px);
        min-height: 0;
        margin-bottom: 0;
        overflow: hidden;
    }

    .hf-page .pos-product-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* stretch the row that contains the list */
    .hf-page .pos-product-body > .row:last-of-type {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0;
    }

    .hf-page .pos-product-body > .row:last-of-type > .col-md-12 {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
        padding-bottom: 0;
    }

    .hf-page .pos-products-row {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        gap: 0;
    }

    .hf-page .pos-products-col {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: 0;
    }

    /* product list grid */
    .hf-page #product_list_body {
        display: flex;
        flex-wrap: wrap;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        align-content: flex-start;
        gap: 0;
    }

    /* loader sits at bottom inside the product column */
    .hf-page #suggestion_page_loader {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        margin: 0;
        padding: 6px 0;
        z-index: 10;
    }
}

/* Date filter pill button with dropdown hint caret */
.hf-pill-btn-filter {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 30px !important;
    font-size: 13px;
    font-weight: 600;
    min-height: 36px;
    padding: 7px 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    transition: all 0.18s ease;
    text-decoration: none !important;
}

.hf-pill-btn-filter:hover,
.hf-pill-btn-filter:focus,
.hf-pill-btn-filter:active,
.hf-pill-btn-filter.active {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
}

.hf-pill-btn-filter .fa-caret-down,
.hf-pill-btn-filter .caret,
.hf-pill-btn-filter [class*='caret'] {
    opacity: 0.9;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.hf-pill-btn-filter[aria-expanded='true'] .fa-caret-down,
.hf-pill-btn-filter[aria-expanded='true'] .caret,
.hf-pill-btn-filter.open .fa-caret-down,
.hf-pill-btn-filter.open .caret,
.hf-pill-btn-filter.active .fa-caret-down,
.hf-pill-btn-filter.active .caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* ── 6. Glass text inputs ──────────────────────────────────────────────────── */
.hf-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    color: #fff !important;
    font-size: 13px;
    width: 100%;
    height: 38px;
    padding: 7px 16px;
    outline: none;
    transition: border-color 0.15s;
}
.hf-input:focus {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}
.hf-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

select.form-control.hf-input,
select.hf-input {
    background: rgba(34, 104, 255, 0.25) !important;
    color: #fff !important;
    border-color: rgba(34, 104, 255, 0.7) !important;
}

select.form-control.hf-input:focus,
select.hf-input:focus {
    background: rgba(34, 104, 255, 0.32) !important;
    border-color: rgba(34, 104, 255, 0.9) !important;
    box-shadow: 0 0 0 3px rgba(34, 104, 255, 0.25) !important;
}

/* ── 6a. Glass date/time inputs & picker ─────────────────────────────────── */
.hf-date {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    color: #fff !important;
    font-size: 13px;
    width: 100%;
    height: 38px;
    padding: 7px 16px;
    outline: none;
    transition: border-color 0.15s;
}
.hf-date:focus,
.hf-date:active {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}

/* Bootstrap datetimepicker popup */
.bootstrap-datetimepicker-widget.dropdown-menu {
    background: rgba(5, 18, 46, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #fff !important;
}
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget .picker-switch,
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    color: rgba(255, 255, 255, 0.9) !important;
}
.bootstrap-datetimepicker-widget table td:hover,
.bootstrap-datetimepicker-widget table th:hover,
.bootstrap-datetimepicker-widget .picker-switch:hover,
.bootstrap-datetimepicker-widget .prev:hover,
.bootstrap-datetimepicker-widget .next:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}
.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: rgba(255, 255, 255, 0.75) !important;
}

/* Daterangepicker dropdown (used by filter buttons with caret) */
.daterangepicker {
    background: rgba(5, 18, 46, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #fff !important;
}

.daterangepicker:before {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.daterangepicker:after {
    border-bottom-color: rgba(5, 18, 46, 0.96) !important;
}

.daterangepicker .calendar-table,
.daterangepicker .drp-calendar,
.daterangepicker .drp-buttons,
.daterangepicker .ranges {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td,
.daterangepicker .ranges li,
.daterangepicker .drp-selected,
.daterangepicker .drp-buttons .btn,
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    color: #fff !important;
}

.daterangepicker .calendar-table td.off,
.daterangepicker .calendar-table td.off.in-range,
.daterangepicker .calendar-table td.off.start-date,
.daterangepicker .calendar-table td.off.end-date {
    color: rgba(255, 255, 255, 0.45) !important;
    background: transparent !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
.daterangepicker .ranges li:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

.daterangepicker td.in-range {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
}

/* Home dashboard date filter trigger */
#dashboard_date_filter {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#dashboard_date_filter:hover,
#dashboard_date_filter:focus,
#dashboard_date_filter.active {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
}

#dashboard_date_filter span,
#dashboard_date_filter svg {
    color: rgba(255, 255, 255, 0.94) !important;
}

/* ── Glass file input ──────────────────────────────────────────────────────── */
.hf-file {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    color: #fff !important;
    font-size: 13px;
    width: 100%;
    padding: 7px 16px;
    outline: none;
    transition: border-color 0.15s;
    cursor: pointer;
}
.hf-file:focus-within {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}
.hf-file:focus {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}

/* Hide the default browser button and style the whole thing uniformly */
.hf-file::file-selector-button {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    padding: 4px 12px;
    margin-right: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.hf-file::-webkit-file-upload-button {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    padding: 4px 12px;
    margin-right: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.hf-file::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.25);
}
.hf-file::-webkit-file-upload-button:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* "No file chosen" text colour */
.hf-file:not(:has(+ *))::after {
    color: rgba(255, 255, 255, 0.45);
}

/* ── 6b. Bootstrap form-control glass (all hf-page pages) ───────────────────
   Styles every native <input>, <textarea>, <select> that uses Bootstrap's
   .form-control class, along with .input-group-addon, on any page that
   wraps content in .hf-page.                                               */
.hf-page .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 8px !important;
    color: #fff !important;
}
.hf-page .form-control:focus {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.14) !important;
}
.hf-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.hf-page .input-group-addon {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
/* textarea specific */
.hf-page textarea.form-control {
    resize: vertical;
}

/* POS section height sync */
.row.flex-column.flex-lg-row.align-items-stretch > .col-md-7,
.row.flex-column.flex-lg-row.align-items-stretch > .col-md-5 {
    display: flex;
    flex-direction: column;
}

.row.flex-column.flex-lg-row.align-items-stretch > .col-md-5 > .box,
.row.flex-column.flex-lg-row.align-items-stretch > .col-md-5 > .hf-page {
    flex: 1;
}


/* ── 7. Glass data table ───────────────────────────────────────────────────── */
.hf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.hf-table thead tr {
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}
.hf-table th {
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(255, 255, 255, 0.05);
}
.hf-table td {
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.88);
    vertical-align: middle;
}
.hf-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hf-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}
.hf-table tfoot tr {
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.07);
}

/* Global DataTables export controls glass theme */
.dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    width: auto !important;
    gap: 8px;
    justify-content: center;
    margin: 0 0 12px 0;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .buttons-csv,
.dataTables_wrapper .dt-buttons .buttons-excel,
.dataTables_wrapper .dt-buttons .buttons-print,
.dataTables_wrapper .dt-buttons .buttons-colvis,
.dataTables_wrapper .dt-buttons .buttons-pdf,
.dataTables_wrapper .dt-buttons .buttons-pdfHtml5 {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    border-radius: 24px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    text-shadow: none !important;
    padding: 7px 14px !important;
    transition: all 0.18s ease;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons .btn:focus,
.dataTables_wrapper .dt-buttons .dt-button:focus,
.dataTables_wrapper .dt-buttons .btn:active,
.dataTables_wrapper .dt-buttons .dt-button:active,
.dataTables_wrapper .dt-buttons .btn.active,
.dataTables_wrapper .dt-buttons .dt-button.active {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    outline: none !important;
}

/* ── 8. Select2 glass theme ────────────────────────────────────────────────── */
/* Single */
.select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    line-height: 34px !important;
    padding-left: 16px !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: rgba(255, 255, 255, 0.6) !important;
}
.select2-container--default.select2-container--open
    .select2-selection--single
    .select2-selection__arrow
    b {
    border-top-color: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.6) !important;
}

/* multiple */
.select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    /* height: 38px !important; */
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #fff !important;
    line-height: 34px !important;
    padding-left: 16px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__arrow b {
    border-top-color: rgba(255, 255, 255, 0.6) !important;
}
.select2-container--default.select2-container--open
    .select2-selection--multiple
    .select2-selection__arrow
    b {
    border-top-color: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.6) !important;
}

.select2-dropdown {
    background: rgba(5, 18, 46, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* POS customer select2 (#customer_id) inherits its dropdown width from the
   trigger, which is squeezed by the col-md-4 column — the search box and
   "Add '...'" option text end up cramped/clipped. Give this one dropdown
   a wider floor regardless of the trigger's rendered width. */
body > .select2-container--open:has(#select2-customer_id-results) {
    min-width: 320px !important;
}

body > .select2-container--open:has(#select2-customer_id-results) .select2-dropdown {
    min-width: 320px !important;
}
.ui-autocomplete {
    background: rgba(5, 18, 46, 0.92) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(12, 61, 154, 0.35) !important;
    color: #fff !important;
    padding: 8px 0 !important;
}
.ui-autocomplete .ui-menu-item {
    padding: 3px 10px !important;
}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item a {
    color: #fff !important;
}
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item .ui-state-active {
    background: #383E52 !important;
    color: #fff !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.select2-container--default .select2-search--dropdown {
    padding: 8px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    color: #fff !important;
    padding: 5px 14px !important;
    outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.select2-results__options {
    padding: 4px 0 !important;
}
.select2-container--default .select2-results__option {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected='true'] {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ── 9. Checkboxes & radios ────────────────────────────────────────────────── */
input[type='checkbox'],
input[type='radio'] {
    accent-color: #fff;
    cursor: pointer;
}

/* ── 10. Stats tile ────────────────────────────────────────────────────────── */
.hf-stat {
    padding: 16px 18px;
    color: #fff;
}
.hf-stat-val {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}
.hf-stat-lbl {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 4px;
}

/* ── 11. Flash alerts (glass style) ────────────────────────────────────────── */
.hf-alert {
    border-radius: 10px;
    color: #fff;
    margin-bottom: 14px;
    padding: 10px 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(15px);
}
.hf-alert-success {
    background: rgba(40, 167, 69, 0.25);
    border: 1px solid rgba(40, 167, 69, 0.5);
}
.hf-alert-error {
    background: rgba(220, 53, 69, 0.25);
    border: 1px solid rgba(220, 53, 69, 0.5);
}
.hf-alert-warning {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
}
.hf-alert-info {
    background: rgba(10, 126, 255, 0.18);
    border: 1px solid rgba(10, 126, 255, 0.4);
}
.hf-alert-danger {
    background: rgba(220, 53, 69, 0.25);
    border: 1px solid rgba(220, 53, 69, 0.5);
}
.hf-alert .close {
    color: #fff;
}

/* ── 11c. Global modal glass theme ───────────────────────────────────────── */
.modal-content {
    background: rgba(5, 18, 46, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(0, 0, 0, 0.22) !important;
    border-radius: 12px !important;
    color: #fff !important;
}

.modal-header,
.modal-footer {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.modal-title,
.modal .close,
.modal-body,
.modal-body h1,
.modal-body h2,
.modal-body h3,
.modal-body h4,
.modal-body p,
.modal-body span,
.modal-body strong,
.modal-body small,
.modal-body td,
.modal-body th,
.modal-body label,
.modal-body li,
.modal-content .help-block,
.modal-content .text-muted {
    color: #fff !important;
}

.modal .close {
    opacity: 0.9 !important;
    text-shadow: none !important;
}

.modal .box,
.modal .box-primary,
.modal .well,
.modal .table-responsive,
.modal .alert {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.modal .table,
.modal .table-striped,
.modal .table-bordered {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.modal .table-striped > tbody > tr:nth-of-type(odd), .modal .table-striped > tbody > tr:nth-of-type(even) {
    background: transparent !important;
}

/* Form fields inside modals (global fallback — .hf-modal is never actually
   used anywhere in the app, so form-control/select2 glass rules scoped to
   it were dead code; every one of the app's ~105 modals had unstyled
   opaque-white inputs). Mirrors the .hf-page .form-control treatment. */
.modal-content .form-control,
.modal-body .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

.modal-content .form-control:focus,
.modal-body .form-control:focus {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}

.modal-content .form-control::placeholder,
.modal-body .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.modal-content .input-group-addon,
.modal-body .input-group-addon {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.modal-content .select2-container--default .select2-selection--single,
.modal-body .select2-container--default .select2-selection--single,
.modal-content .select2-container--default .select2-selection--multiple,
.modal-body .select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
}

.modal-content .select2-selection__rendered,
.modal-body .select2-selection__rendered {
    color: #fff !important;
}

.modal-content .checkbox label,
.modal-body .checkbox label,
.modal-content .radio label,
.modal-body .radio label {
    color: rgba(255, 255, 255, 0.85) !important;
}


/* ── 11b. Status badges ─────────────────────────────────────────────────────── */
.hf-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    vertical-align: middle;
}

/* ── 12. Page divider ──────────────────────────────────────────────────────── */
.hf-hr {
    border-color: rgba(255, 255, 255, 0.15);
    margin: 0 0 18px;
}

/* ── 13. White text overrides for app-layout pages ─────────────────────────
   When on layouts.app (dark sidebar), these ensure all the component labels,
   headings, and links stay white/legible against any dark background.        */
.hf-page h1,
.hf-page h2,
.hf-page h3,
.hf-page h4,
.hf-page h5,
.hf-page h6 {
    color: #fff;
}
.hf-page p,
.hf-page span,
.hf-page label {
    color: rgba(255, 255, 255, 0.85);
}
.hf-page a {
    color: #fff;
}

/* Ensure AdminLTE content wrapper doesn't override our bg */
.content-wrapper {
    background: transparent !important;
}

/* ── Sidebar glass ─────────────────────────────────────────────────────────── */

/* Outer <aside> shell */
.sidebar-glass {
    background: rgba(5, 16, 52, 0.74) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.13) !important;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* Business name / logo band at the top of the sidebar */
.sidebar-brand {
    background: rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    min-height: 60px;
    padding: 14px 20px;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.sidebar-brand:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ── Menu items ─────────────────────────────────────────────────────────────── */

/* Remove the right-border originally put on the scroll wrapper */
#side-bar {
    border-right: none !important;
    padding: 10px 10px !important;
}

/* Top-level links & dropdown toggles */
#side-bar > a,
#side-bar > div > a.drop_down {
    color: rgba(255, 255, 255, 0.78) !important;
    background: transparent !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin-bottom: 2px !important;
    transition:
        background 0.15s,
        color 0.15s !important;
}
#side-bar > a:hover,
#side-bar > div > a.drop_down:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Active top-level item */
#side-bar > a.tw-bg-gray-200,
#side-bar > a.sidebar-active-item,
#side-bar > div.sidebar-active-group > a.drop_down,
#side-bar > div.tw-pb-1.tw-rounded-md.tw-bg-gray-200 > a.drop_down {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Section header labels (e.g. "MANAGEMENT", "REPORTS") */
#side-bar > div[class*='tw-px-3 tw-py-2 tw-text-xs'] {
    color: rgba(255, 255, 255, 0.42) !important;
    font-size: 10px !important;
    letter-spacing: 0.65px !important;
    padding: 14px 12px 4px !important;
}

/* Dropdown chevron / arrow SVG */
#side-bar .svg {
    color: rgba(255, 255, 255, 0.42) !important;
}
#side-bar a.drop_down:hover .svg {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Child items — vertical timeline bar */
#side-bar .chiled > div.tw-absolute {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Child item links */
#side-bar .chiled a {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 12.5px !important;
}
#side-bar .chiled a:hover {
    color: #fff !important;
    text-decoration: none !important;
}
/* Active child item */
#side-bar .chiled a.tw-text-primary-700 {
    color: #fff !important;
    font-weight: 700 !important;
}

/* ── Sidebar visibility (mobile-first) ────────────────────────────────────── */

/* Mobile: sidebar hidden by default */
aside.custom-sidebar {
    display: none;
    flex-direction: column;
    height: 100%;
}

/* Desktop (lg = 1024px): sidebar always visible */
@media (min-width: 1024px) {
    aside.custom-sidebar {
        display: flex !important;
        flex-direction: column;
    }
}

/* Desktop collapsed state */
aside.custom-sidebar.sidebar-collapsed {
    display: none !important;
}

/* Mobile: open state — combined selector ensures maximum specificity (0,2,1)
   with !important so it beats every Tailwind utility and other rule without
   relying on <style> tag ordering which can be browser-dependent.            */
aside.custom-sidebar.small-view-side-active {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 256px !important;
    height: 100vh !important;
    z-index: 1050 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Sidebar glass */
#side-bar::-webkit-scrollbar {
    width: 4px;
}
#side-bar::-webkit-scrollbar-track {
    background: transparent;
}
#side-bar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}
#side-bar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* ── 5. Pill buttons ───────────────────────────────────────────────────────── */
.hf-pill-btn {
    background: #fff;
    color: #0a2862 !important;
    border: none;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 22px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    transition: opacity 0.15s;
}
.hf-pill-btn:hover        { opacity: 0.88; }
.hf-pill-btn:disabled     { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.hf-ghost-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.hf-ghost-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}


/* ── POS create: glass completion ─────────────────────────────────────────── */
.hf-page .box,
.hf-page .box-solid,
.hf-page .box-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

.hf-page .box > .box-header,
.hf-page .box-solid > .box-header,
.hf-page .box-primary > .box-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.hf-page .box > .box-body,
.hf-page .box-solid > .box-body,
.hf-page .box-primary > .box-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.hf-page .box .form-control,
.hf-page .box-solid .form-control,
.hf-page .box-primary .form-control {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.hf-page .box .form-control:focus,
.hf-page .box-solid .form-control:focus,
.hf-page .box-primary .form-control:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

.hf-page .dataTables_wrapper,
.hf-page table.dataTable {
    background: transparent !important;
}

.hf-page table.dataTable thead th {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.hf-page table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.hf-page table.dataTable.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
}

.hf-modal .modal-content,
.hf-page .modal-content {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.hf-modal .modal-header,
.hf-page .modal-header {
    background: rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.hf-modal .modal-header .modal-title,
.hf-page .modal-header .modal-title {
    color: #fff !important;
}

.hf-modal .modal-header .close,
.hf-page .modal-header .close {
    color: #fff !important;
    opacity: 0.9;
    text-shadow: none;
}

.hf-modal .modal-footer,
.hf-page .modal-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.hf-page .alert,
.hf-modal .alert {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.hf-page .alert-danger,
.hf-modal .alert-danger {
    background: rgba(231, 76, 60, 0.2) !important;
    border-color: rgba(231, 76, 60, 0.4) !important;
}

.hf-page .alert-warning,
.hf-modal .alert-warning {
    background: rgba(241, 196, 15, 0.2) !important;
    border-color: rgba(241, 196, 15, 0.4) !important;
}

.hf-page .alert-success,
.hf-modal .alert-success {
    background: rgba(46, 204, 113, 0.2) !important;
    border-color: rgba(46, 204, 113, 0.4) !important;
}

.hf-input-addon,
.hf-page .input-group-addon.hf-input-addon {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 8px !important;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16) !important;
}

.hf-page .input-group .hf-input-addon i,
.hf-page .input-group .hf-input-addon .fa,
.hf-page .input-group .hf-input-addon .fas,
.hf-modal .input-group .hf-input-addon i,
.hf-modal .input-group .hf-input-addon .fa,
.hf-modal .input-group .hf-input-addon .fas {
    color: rgba(201, 233, 255, 0.98) !important;
}

.hf-page .input-group .hf-input-addon + .form-control,
.hf-modal .input-group .hf-input-addon + .form-control {
    margin-left: 6px;
}

.pos-form-actions {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.pos-form-actions .hf-pos-nav-btn {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.pos-form-actions .hf-pos-nav-btn:hover,
.pos-form-actions .hf-pos-nav-btn:focus {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.48) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.pos-form-actions .hf-pos-nav-btn[disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.pos-form-actions .hf-pos-nav-cta {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.54) !important;
}

.pos-form-actions .hf-pos-nav-success {
    background: rgba(46, 204, 113, 0.25) !important;
    border-color: rgba(139, 245, 188, 0.52) !important;
}

.pos-form-actions .hf-pos-nav-danger {
    background: rgba(220, 53, 69, 0.28) !important;
    border-color: rgba(255, 131, 144, 0.5) !important;
}

.pos-form-actions .hf-pos-total-chip,
.pos-form-actions .tw-pos-total {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
}

.pos-form-actions .hf-pos-total-chip #total_payable,
.pos-form-actions .tw-pos-total #total_payable {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.pos-form-actions #pos-finalize,
.pos-form-actions .pos-express-finalize[data-pay_method='cash'] {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
}

.pos-form-actions #pos-cancel,
.pos-form-actions #pos-delete {
    background: rgba(220, 53, 69, 0.28) !important;
    border: 1px solid rgba(220, 53, 69, 0.45) !important;
    color: #fff !important;
}

.pos-form-actions #recent-transactions {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
}

.pos-form-actions .pos-action-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

.hf-page .hf-inline-modal-trigger {
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none !important;
    padding-left: 8px;
}

.hf-page .hf-inline-modal-trigger:hover,
.hf-page .hf-inline-modal-trigger:focus {
    color: #fff !important;
}

.hf-page .pos_form_totals .hf-inline-modal-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92) !important;
}

.hf-page .pos_form_totals .hf-inline-modal-trigger:hover,
.hf-page .pos_form_totals .hf-inline-modal-trigger:focus {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.42);
}

.pos-form-actions button:hover,
.pos-form-actions #recent-transactions:hover {
    filter: brightness(1.08);
}

/* ── POS top header bar (location/terminal/date + action buttons) ───────── */
.hf-pos-topbar {
    z-index: 990 !important;
    position: relative;
}

.hf-pos-topbar .hf-pos-topbar-shell {
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    overflow: visible !important;
    z-index: 990;
    position: relative;
}

.hf-pos-topbar-shell > * {
    overflow: visible !important;
}

.hf-pos-topbar .hf-pos-topbar-left,
.hf-pos-topbar .hf-pos-topbar-terminal,
.hf-pos-topbar .hf-pos-topbar-datetime,
.hf-pos-topbar .hf-pos-topbar-actions {
    border-color: rgba(255, 255, 255, 0.26) !important;
    overflow: visible !important;
}

.hf-pos-topbar .hf-pos-top-select,
.hf-pos-topbar #select_location_id {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
    /* Lets Chromium/Firefox render this <select>'s native dropdown popup
       (and its scrollbar) using the dark UA theme instead of plain white —
       the option list itself can't be reached by normal CSS. */
    color-scheme: dark;
}

.hf-pos-topbar .hf-pos-top-select option,
.hf-pos-topbar #select_location_id option {
    background: #13203f;
    color: #fff;
}

.hf-pos-topbar .hf-pos-topbar-datetime {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 6px 10px;
}

.hf-pos-topbar .hf-pos-topbar-datetime .fa-calendar,
.hf-pos-topbar .hf-pos-topbar-datetime .curr_datetime,
.hf-pos-topbar .hf-pos-topbar-datetime .hover-q {
    color: rgba(255, 255, 255, 0.92) !important;
}

.hf-pos-topbar .terminal-switcher summary,
.hf-pos-topbar .terminal-switcher > button {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

.hf-pos-topbar .terminal-switcher ul {
    background: rgba(8, 20, 48, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.hf-pos-topbar .terminal-switcher ul p,
.hf-pos-topbar .terminal-switcher ul a,
.hf-pos-topbar .terminal-switcher .terminal-code-text,
.hf-pos-topbar .terminal-switcher .terminal-name-text,
.hf-pos-topbar .terminal-switcher svg {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hf-pos-topbar .terminal-switcher li {
    background: transparent !important;
}

.hf-pos-topbar .terminal-switcher li a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* App layout top-nav terminal switcher (outside .hf-pos-topbar scope) */
.custom-transparent-bg .terminal-switcher summary,
.custom-transparent-bg .terminal-switcher > button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    color: #fff !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

.custom-transparent-bg .terminal-switcher ul {
    background: rgba(8, 20, 48, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35) !important;
}

.custom-transparent-bg .terminal-switcher ul p,
.custom-transparent-bg .terminal-switcher ul a,
.custom-transparent-bg .terminal-switcher .terminal-code-text,
.custom-transparent-bg .terminal-switcher .terminal-name-text,
.custom-transparent-bg .terminal-switcher svg {
    color: rgba(255, 255, 255, 0.94) !important;
}

.custom-transparent-bg .terminal-switcher ul li a:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* App layout top-nav shared glass feel for other icon/buttons */
.custom-transparent-bg .small-view-button,
.custom-transparent-bg .side-bar-collapse,
.custom-transparent-bg .hf-pill-btn,
.custom-transparent-bg .notifications-menu > a.dropdown-toggle,
.custom-transparent-bg details > summary {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.custom-transparent-bg .small-view-button:hover,
.custom-transparent-bg .side-bar-collapse:hover,
.custom-transparent-bg .hf-pill-btn:hover,
.custom-transparent-bg .notifications-menu > a.dropdown-toggle:hover,
.custom-transparent-bg details > summary:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
}

.custom-transparent-bg .small-view-button svg,
.custom-transparent-bg .side-bar-collapse svg,
.custom-transparent-bg .hf-pill-btn svg,
.custom-transparent-bg .notifications-menu > a.dropdown-toggle svg,
.custom-transparent-bg details > summary svg,
.custom-transparent-bg .hf-pill-btn span,
.custom-transparent-bg details > summary span {
    color: rgba(255, 255, 255, 0.94) !important;
}

.custom-transparent-bg .notifications-menu .notifications_count {
    background: rgba(255, 184, 193, 0.95) !important;
    color: #1b2438 !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* App layout profile dropdown glass panel */
.custom-transparent-bg .user-profile-glass-menu {
    background: rgba(8, 20, 48, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35) !important;
}

.custom-transparent-bg .user-profile-glass-menu p,
.custom-transparent-bg .user-profile-glass-menu a,
.custom-transparent-bg .user-profile-glass-menu svg {
    color: rgba(255, 255, 255, 0.94) !important;
}

.custom-transparent-bg .user-profile-glass-menu a:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

/* Header dropdown glass panel (calendar/app-tour menu, notifications tray) */
.header-dropdown-glass-menu {
    background: rgba(8, 20, 48, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35) !important;
    color: rgba(255, 255, 255, 0.94) !important;
}

.header-dropdown-glass-menu a,
.header-dropdown-glass-menu p,
.header-dropdown-glass-menu span,
.header-dropdown-glass-menu svg,
.header-dropdown-glass-menu li {
    color: rgba(255, 255, 255, 0.94) !important;
}

.header-dropdown-glass-menu a:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

.header-dropdown-glass-menu .load_more_li a {
    color: rgba(126, 196, 255, 0.98) !important;
}

/* Active terminal row highlight */
.terminal-switcher ul li.tw-bg-gray-50,
.hf-pos-topbar .terminal-switcher ul li.tw-bg-gray-50,
.custom-transparent-bg .terminal-switcher ul li.tw-bg-gray-50 {
    background: rgba(126, 196, 255, 0.16) !important;
    border: 1px solid rgba(126, 196, 255, 0.42) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 1px rgba(126, 196, 255, 0.15) !important;
}

.terminal-switcher ul li.tw-bg-gray-50 .terminal-code-text,
.terminal-switcher ul li.tw-bg-gray-50 .terminal-name-text {
    color: rgba(221, 241, 255, 0.98) !important;
    font-weight: 700 !important;
}

.terminal-switcher ul li.tw-bg-gray-50 svg {
    color: rgba(173, 232, 196, 0.98) !important;
}

.terminal-switcher ul li.tw-bg-gray-50 a:hover {
    background: rgba(126, 196, 255, 0.24) !important;
}

.hf-pos-topbar .hf-pos-top-btn {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.hf-pos-topbar .hf-pos-top-btn i,
.hf-pos-topbar .hf-pos-top-btn span,
.hf-pos-topbar .hf-pos-top-btn strong {
    color: rgba(255, 255, 255, 0.94) !important;
}

.hf-pos-topbar .hf-pos-top-btn:hover,
.hf-pos-topbar .hf-pos-top-btn:focus {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-1px);
}

.hf-pos-topbar .hf-pos-top-btn-wide {
    padding: 6px 14px !important;
    min-height: 34px;
}

.hf-pos-topbar .hf-pos-top-btn-info {
    border-color: rgba(126, 196, 255, 0.5) !important;
}

.hf-pos-topbar .hf-pos-top-btn-info i {
    color: rgba(166, 216, 255, 0.98) !important;
}

.hf-pos-topbar .hf-pos-top-btn-success {
    border-color: rgba(137, 241, 185, 0.52) !important;
}

.hf-pos-topbar .hf-pos-top-btn-success i {
    color: rgba(178, 252, 211, 0.98) !important;
}

.hf-pos-topbar .hf-pos-top-btn-danger {
    border-color: rgba(255, 152, 164, 0.52) !important;
}

.hf-pos-topbar .hf-pos-top-btn-danger i {
    color: rgba(255, 184, 193, 0.98) !important;
}

.hf-pos-topbar .hf-pos-top-btn-muted {
    border-color: rgba(210, 220, 232, 0.5) !important;
}

.hf-pos-topbar .hf-pos-top-btn-muted i {
    color: rgba(227, 235, 244, 0.96) !important;
}

.hf-pos-topbar .hf-pos-top-hamburger {
    color: rgba(255, 255, 255, 0.92) !important;
}

@media (max-width: 767px) {
    .hf-pos-topbar .hf-pos-topbar-actions {
        width: 100%;
        border-left: none !important;
        padding-left: 0 !important;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.hf-modal .form-control,
.hf-modal .input-group-addon,
.hf-modal .select2-container--default .select2-selection--single,
.hf-modal .select2-container--default .select2-selection--multiple {
    color: #fff !important;
}

.hf-modal .well,
.hf-modal .well.well-sm,
.hf-modal .bg-light-gray {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.hf-page #pos_table {
    background: transparent !important;
}

.hf-page #pos_table > thead > tr > th {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.hf-page #pos_table > tbody > tr > td {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.hf-page #pos_table.table-striped > tbody > tr:nth-of-type(odd) > td,
.hf-page #pos_table.table-striped > tbody > tr:nth-of-type(even) > td {
    background: rgba(255, 255, 255, 0.06) !important;
}

.hf-page #pos_table.table-striped > tbody > tr:nth-of-type(odd),
.hf-page #pos_table.table-striped > tbody > tr:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.06) !important;
}

.hf-page #pos_table .form-control,
.hf-page #pos_table .input-sm,
.hf-page #pos_table textarea {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.hf-page #pos_table .form-control:focus,
.hf-page #pos_table .input-sm:focus,
.hf-page #pos_table textarea:focus {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: none !important;
}

/* Keep POS row selects neutral glass (avoid global blue hf-input select tint). */
.hf-page #pos_table select.form-control.hf-input,
.hf-page #pos_table select.hf-input {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.hf-page #pos_table select.form-control.hf-input:focus,
.hf-page #pos_table select.hf-input:focus {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: none !important;
}

.hf-page #pos_table .input-group-btn .btn,
.hf-page #pos_table .btn-default,
.hf-page #pos_table .btn-flat {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.hf-page #pos_table .input-group-btn .btn:hover,
.hf-page #pos_table .btn-default:hover,
.hf-page #pos_table .btn-flat:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.hf-page #product_list_body .product_box,
.hf-page #featured_products_box .product_box {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.hf-page #product_list_body .product_box:hover,
.hf-page #featured_products_box .product_box:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.hf-page #product_list_body .product_box .text,
.hf-page #product_list_body .product_box .text-muted,
.hf-page #featured_products_box .product_box .text,
.hf-page #featured_products_box .product_box .text-muted {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hf-page #product_list_body .product_box .image-container,
.hf-page #featured_products_box .product_box .image-container {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.08);
}

/* POS category drawer/cards: align with glass theme and remove white panels */
.hf-page #product_category_div {
    --pos-category-drawer-width: min(640px, 42vw);
}

.hf-page #product_category_div .tw-dw-drawer-overlay.overlay-category {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 11998 !important;
}

.hf-page #product_category_div .tw-dw-drawer-side {
    position: fixed !important;
    inset: 0 !important;
    z-index: 11999 !important;
}

.hf-page #product_category_div .tw-dw-menu {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    z-index: 12000 !important;
    background: rgba(8, 28, 68, 0.78) !important;
    /* background: rgba(7, 24, 58, 0.45) !important; */
    border-left: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: -14px 0 34px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.hf-page #product_category_div .tw-dw-menu .tw-bg-white,
.hf-page #product_category_div .tw-dw-menu .tw-bg-base-100,
.hf-page #product_category_div .tw-dw-menu .tw-dw-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.hf-page #product_category_div .tw-dw-menu .tw-dw-card:hover,
.hf-page #product_category_div .tw-dw-menu .main-category-div:hover .tw-dw-card,
.hf-page #product_category_div .tw-dw-menu .product_category:hover .tw-dw-card {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
}

.hf-page #product_category_div .tw-dw-menu .category_heading,
.hf-page #product_category_div .tw-dw-menu h3,
.hf-page #product_category_div .tw-dw-menu h4,
.hf-page #product_category_div .tw-dw-menu .tw-dw-card-body,
.hf-page #product_category_div .tw-dw-menu .tw-dw-card-body * {
    color: rgba(255, 255, 255, 0.95) !important;
}

.hf-page #product_category_div .tw-dw-menu .category-back,
.hf-page #product_category_div .tw-dw-menu .close-side-bar-category,
.hf-page #product_category_div .tw-dw-menu .main-category {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.hf-page #product_category_div .tw-dw-menu .category-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hf-page #product_category_div .tw-dw-menu .category-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    font-weight: 600;
    line-height: 1;
}

.hf-page #product_category_div .tw-dw-menu .category-all-btn .fa {
    font-size: 12px;
}

.hf-page #product_category_div .tw-dw-menu .category-all-btn span {
    font-size: 12px;
    letter-spacing: 0.2px;
}

.hf-page #product_category_div .tw-dw-menu .category-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 10px !important;
}

.hf-page #product_category_div .tw-dw-menu .category-close-btn .fa {
    font-size: 14px;
}

.hf-page #product_category_div .tw-dw-menu .category-back:hover,
.hf-page #product_category_div .tw-dw-menu .close-side-bar-category:hover,
.hf-page #product_category_div .tw-dw-menu .main-category:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Category drawer layout polish: reduce compaction and improve readability */
.hf-page #product_category_div .tw-dw-menu {
    width: var(--pos-category-drawer-width) !important;
    min-width: 0;
    max-width: calc(100vw - 16px);
    padding: 20px 22px !important;
    overflow-x: hidden;
    overflow-y: hidden;
}

.hf-page #product_category_div .tw-dw-menu .tw-flex.tw-items-center.tw-mb-16 {
    margin-bottom: 16px !important;
    gap: 10px;
}

.hf-page #product_category_div .tw-dw-menu .category_heading {
    letter-spacing: 0.2px;
    font-size: 1.08rem !important;
    line-height: 1.2;
}

.hf-page #product_category_div .tw-dw-menu .row.tw-mr-5 {
    display: flex;
    flex-wrap: wrap;
    row-gap: 24px;
    margin: 0 !important;
    padding: 4px 2px 10px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.hf-page #product_category_div .tw-dw-menu .row.tw-mr-5::-webkit-scrollbar {
    width: 8px;
}

.hf-page #product_category_div .tw-dw-menu .row.tw-mr-5::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.hf-page #product_category_div .tw-dw-menu .row.tw-mr-5::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
}

.hf-page #product_category_div .tw-dw-menu .row.tw-mr-5::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.hf-page #product_category_div .tw-dw-menu .main-category-div,
.hf-page #product_category_div .tw-dw-menu .product_category {
    width: 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
    float: none !important;
    height: auto !important;
    padding: 0 8px !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

.hf-page #product_category_div .tw-dw-menu .all-sub-category {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 24px;
    margin: 0;
    padding: 0;
}

.hf-page #product_category_div .tw-dw-menu .all-sub-category .product_category {
    float: none !important;
}

.hf-page #product_category_div .tw-dw-menu .tw-dw-card {
    width: 100% !important;
    min-height: 138px;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 16px 26px rgba(8, 18, 40, 0.26) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hf-page #product_category_div .tw-dw-menu .main-category-div:hover .tw-dw-card,
.hf-page #product_category_div .tw-dw-menu .product_category:hover .tw-dw-card {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.44) !important;
    box-shadow: 0 20px 32px rgba(8, 18, 40, 0.32) !important;
}

.hf-page #product_category_div .tw-dw-menu .tw-dw-card-body,
.hf-page #product_category_div .tw-dw-menu .hf-card-body-tight {
    margin-bottom: 0 !important;
    padding: 16px 14px 10px !important;
}

.hf-page #product_category_div .tw-dw-menu .hf-card-title-reset {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}

.hf-page #product_category_div .tw-dw-menu .tw-dw-card-actions {
    margin-top: auto;
    padding: 0 10px 10px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.hf-page #product_category_div .tw-dw-menu .tw-dw-card-actions .main-category {
    flex: 1 1 0;
    min-width: 96px;
    margin-bottom: 0 !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    font-size: 12px;
    line-height: 1.2;
}

@media (max-width: 991px) {
    .hf-page #product_category_div .tw-dw-menu {
        width: min(92vw, 640px) !important;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .hf-page #product_category_div .tw-dw-menu {
        width: 100vw !important;
        padding: 16px 14px !important;
    }

    .hf-page #product_category_div .tw-dw-menu .main-category-div,
    .hf-page #product_category_div .tw-dw-menu .product_category {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 2px !important;
        margin-bottom: 14px !important;
    }

    .hf-page #product_category_div .tw-dw-menu .tw-dw-card {
        min-height: 104px;
    }
}

.hf-modal .form-control,
.hf-modal textarea.form-control,
.hf-modal select.form-control,
.hf-modal .input-group-addon {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.hf-modal .form-control:focus,
.hf-modal textarea.form-control:focus,
.hf-modal select.form-control:focus {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: none !important;
}

.hf-modal .form-control::placeholder,
.hf-modal textarea.form-control::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

.hf-modal label,
.hf-modal .control-label,
.hf-modal .form-group > label,
.hf-modal .modal-body h4,
.hf-modal .modal-body h5,
.hf-modal .modal-body strong {
    color: rgba(255, 255, 255, 0.96) !important;
}

.hf-modal .help-block,
.hf-modal small,
.hf-modal .text-muted,
.hf-modal p {
    color: rgba(255, 255, 255, 0.82) !important;
}

.hf-modal .text-primary,
.hf-modal .label-primary,
.hf-modal .badge-primary {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.hf-modal .input-group-addon i,
.hf-modal .input-group-addon .fa,
.hf-modal .input-group-addon .fas {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Final contrast pass: discount/shipping modal controls */
#posEditDiscountModal .form-control,
#posEditDiscountModal input[type='number'],
#posEditDiscountModal input[type='text'],
#posShippingModal .form-control,
#posShippingModal input[type='number'],
#posShippingModal input[type='text'],
#posShippingModal textarea,
#posShippingModal select {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

#posEditDiscountModal .form-control:focus,
#posEditDiscountModal input[type='number']:focus,
#posEditDiscountModal input[type='text']:focus,
#posShippingModal .form-control:focus,
#posShippingModal input[type='number']:focus,
#posShippingModal input[type='text']:focus,
#posShippingModal textarea:focus,
#posShippingModal select:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.46) !important;
    box-shadow: none !important;
}

#posEditDiscountModal .form-control[disabled],
#posEditDiscountModal .form-control[readonly],
#posShippingModal .form-control[disabled],
#posShippingModal .form-control[readonly],
#posShippingModal textarea[disabled],
#posShippingModal textarea[readonly],
#posShippingModal select[disabled] {
    color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    opacity: 1 !important;
}

#posEditDiscountModal .select2-container--default .select2-selection--single,
#posEditDiscountModal .select2-container--default .select2-selection--multiple,
#posShippingModal .select2-container--default .select2-selection--single,
#posShippingModal .select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

#posEditDiscountModal .select2-container--default .select2-selection__rendered,
#posShippingModal .select2-container--default .select2-selection__rendered {
    color: #fff !important;
}

#posEditDiscountModal .select2-container--default .select2-selection--single .select2-selection__placeholder,
#posShippingModal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.62) !important;
}

#posEditDiscountModal .select2-container--default.select2-container--disabled .select2-selection--single,
#posEditDiscountModal .select2-container--default.select2-container--disabled .select2-selection--multiple,
#posShippingModal .select2-container--default.select2-container--disabled .select2-selection--single,
#posShippingModal .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

#posEditDiscountModal .select2-container--default.select2-container--disabled .select2-selection__rendered,
#posShippingModal .select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: rgba(255, 255, 255, 0.75) !important;
}

#posEditDiscountModal .select2-results__option[aria-selected='true'],
#posShippingModal .select2-results__option[aria-selected='true'] {
    background: rgba(255, 255, 255, 0.26) !important;
    color: #fff !important;
}

/* Served/Suspended tables modal white header override */
.view_modal .modal-header,
.view_modal.hf-modal .modal-header {
    background: rgba(255, 255, 255, 0.14) !important;
    border-radius: 4px 4px 0 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.view_modal .modal-header .modal-title,
.view_modal.hf-modal .modal-header .modal-title,
.view_modal .modal-header .close,
.view_modal.hf-modal .modal-header .close {
    color: #fff !important;
    text-shadow: none !important;
}

.view_modal #suspended-count-badge {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Recent/Saved tables rendered content contrast */
.hf-modal #tab_draft .hf-recent-table,
.hf-modal #tab_draft .hf-recent-table td {
    color: rgba(255, 255, 255, 0.95) !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.hf-modal #tab_draft .hf-recent-row:hover td {
    background: rgba(255, 255, 255, 0.08) !important;
}

.hf-modal #tab_draft .hf-recent-name {
    color: #fff !important;
    font-weight: 700;
}

.hf-modal #tab_draft .display_currency {
    color: rgba(255, 255, 255, 0.96) !important;
    font-weight: 700;
}

.hf-modal #tab_draft .hf-recent-btn {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
}

.hf-modal #tab_draft .hf-recent-btn:hover,
.hf-modal #tab_draft .hf-recent-btn:focus {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.48) !important;
    color: #fff !important;
}

.hf-modal #tab_draft .hf-recent-icon,
.hf-modal #tab_draft .hf-recent-btn .fa,
.hf-modal #tab_draft .hf-recent-btn .fas {
    color: rgba(255, 255, 255, 0.95) !important;
}

.hf-modal .select2-container--default .select2-selection--single,
.hf-modal .select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.hf-modal .select2-dropdown {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

.hf-modal .select2-container--default .select2-results__option,
.hf-modal .select2-container--default .select2-results__option[aria-selected='true'] {
    color: #fff !important;
    background: transparent !important;
}

.hf-modal .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.hf-modal .tw-dw-btn-primary,
.hf-modal button.tw-dw-btn-primary,
.hf-modal .btn-primary {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    color: #fff !important;
}

.hf-modal .tw-dw-btn-primary:hover,
.hf-modal button.tw-dw-btn-primary:hover,
.hf-modal .btn-primary:hover {
    background: rgba(255, 255, 255, 0.26) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.hf-pos-product-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.hf-hotel-modal-header {
    background: linear-gradient(135deg, #0d3b66, #1a7a9a) !important;
}

.hf-hotel-modal-close {
    color: #fff !important;
    opacity: 0.8;
}

.hf-hotel-modal-title {
    color: #fff !important;
    font-weight: 600;
}

.hf-hotel-help-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 4px;
}

.hf-hotel-action-btn {
    background: #0d3b66 !important;
    border-color: #0d3b66 !important;
}

.hf-pos-quick-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    border-radius: 8px !important;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.hf-pos-quick-btn:hover,
.hf-pos-quick-btn:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}

.hf-pos-quick-icon {
    color: rgba(255, 255, 255, 0.88) !important;
}

.hf-modal-body-compact {
    padding-bottom: 0 !important;
}

.hf-modal-footer-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.hf-hidden {
    display: none;
}

.hf-z-4000 {
    z-index: 4000;
}

.hf-heading-tight {
    margin-bottom: 0 !important;
    margin-top: 5px !important;
}

.hf-card-title-reset {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-size: inherit;
    font-weight: inherit;
}

.hf-card-body-tight {
    margin-bottom: -20px;
}

.hf-select-full {
    width: 100% !important;
}

.hf-select-45 {
    width: 45% !important;
}

.hf-featured-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ── Bootstrap Popover Glass Styling (Calculator, Form Popovers) ────────────── */
.popover {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    z-index: 1070 !important;
}

.popover.top,
.popover.right,
.popover.bottom,
.popover.left {
    z-index: 1070 !important;
}

.popover-title {
    background: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
}

.popover-content {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 12px 16px;
}

.popover-content table {
    width: 100%;
}

.popover-content table input,
.popover-content table button,
.popover-content input,
.popover-content button {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Popover variant with terminal switcher blue background */
.popover.hf-terminal-popover {
    background: rgba(8, 20, 48, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.popover.hf-terminal-popover .popover-title {
    background: rgba(8, 20, 48, 0.92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.popover.hf-terminal-popover .popover-content {
    color: rgba(255, 255, 255, 0.92) !important;
}

.popover.hf-terminal-popover.bottom > .arrow {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.popover.hf-terminal-popover.bottom > .arrow:after {
    border-bottom-color: rgba(8, 20, 48, 0.92) !important;
}

.popover-content table input:focus,
.popover-content table button:focus,
.popover-content input:focus,
.popover-content button:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    outline: none !important;
}

.popover-content table button:hover,
.popover-content button:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Calculator-specific popover styling */
.popover-content table.table {
    margin-bottom: 0;
}

.popover-content table.table th,
.popover-content table.table td {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Enhanced Terminal Switcher Glass Styling ──────────────────────────────── */
.hf-pos-topbar-terminal {
    position: relative !important;
    z-index: 1050 !important;
    overflow: visible !important;
}

.hf-pos-topbar .terminal-switcher {
    position: relative;
    z-index: 1050;
    overflow: visible;
}

.hf-pos-topbar .terminal-switcher summary,
.hf-pos-topbar .terminal-switcher > button {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    position: relative;
    z-index: 1050 !important;
}

.hf-pos-topbar .terminal-switcher summary:hover,
.hf-pos-topbar .terminal-switcher > button:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Terminal dropdown panel — enhanced glass with absolute positioning */
.hf-pos-topbar .terminal-switcher ul {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: rgba(8, 20, 48, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 10px !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    margin-top: 8px !important;
}

/* Ensure details element doesn't clip dropdown */
.hf-pos-topbar details.terminal-switcher {
    overflow: visible !important;
}

.hf-pos-topbar .terminal-switcher ul li {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.hf-pos-topbar .terminal-switcher ul li:last-child {
    border-bottom: none !important;
}

.hf-pos-topbar .terminal-switcher ul li a {
    background: transparent !important;
    transition: background 0.15s ease !important;
}

.hf-pos-topbar .terminal-switcher ul li a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
}

.hf-pos-topbar .terminal-switcher ul p,
.hf-pos-topbar .terminal-switcher ul a,
.hf-pos-topbar .terminal-switcher .terminal-code-text,
.hf-pos-topbar .terminal-switcher .terminal-name-text {
    color: rgba(255, 255, 255, 0.92) !important;
}

.hf-pos-topbar .terminal-switcher svg {
    color: rgba(255, 255, 255, 0.7) !important;
}

.hf-pos-topbar .terminal-switcher ul li a:hover svg {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .hf-page {
        padding: 10px 8px 24px;
    }
    .hf-back-btn {
        margin-bottom: 8px;
        padding: 6px 14px;
        font-size: 12px;
    }
}

/* ── Terminal switch confirm + success feedback (SweetAlert + Toastr) ────── */
.swal-overlay {
    z-index: 11000 !important;
}

.swal-modal.hf-terminal-swal {
    background: rgba(8, 20, 48, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.35) !important;
}

.swal-modal.hf-terminal-swal .swal-title,
.swal-modal.hf-terminal-swal .swal-text {
    color: rgba(255, 255, 255, 0.94) !important;
}

.swal-modal.hf-terminal-swal .swal-text {
    line-height: 1.55 !important;
}

.swal-modal.hf-terminal-swal .swal-button {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.swal-modal.hf-terminal-swal .swal-button:hover,
.swal-modal.hf-terminal-swal .swal-button:focus {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.48) !important;
}

.swal-modal.hf-terminal-swal .swal-button--cancel {
    color: rgba(255, 255, 255, 0.9) !important;
}

.swal-modal.hf-terminal-swal .swal-button--confirm {
    border-color: rgba(137, 241, 185, 0.52) !important;
}

#toast-container {
    z-index: 11100 !important;
}

#toast-container > .toast {
    background-color: rgba(8, 20, 48, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28) !important;
    color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    padding: 14px 16px 14px 56px !important;
    line-height: 1.45 !important;
    opacity: 1 !important;
}

#toast-container > .toast-success {
    border-color: rgba(137, 241, 185, 0.48) !important;
}

#toast-container > .toast-info {
    border-color: rgba(126, 196, 255, 0.5) !important;
}

#toast-container > .toast-warning {
    border-color: rgba(255, 214, 140, 0.55) !important;
}

#toast-container > .toast-error {
    border-color: rgba(255, 152, 164, 0.55) !important;
}

#toast-container > .toast .toast-title,
#toast-container > .toast .toast-message {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

#toast-container > .toast .toast-title {
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-bottom: 2px !important;
}

#toast-container > .toast .toast-message {
    font-weight: 600 !important;
    font-size: 13px !important;
}

#toast-container > .toast .toast-close-button {
    color: #ffffff !important;
    opacity: 0.9 !important;
    text-shadow: none !important;
}

#toast-container > .toast .toast-close-button:hover {
    opacity: 1 !important;
}

.swal-modal.hf-eis-processing-swal {
    background: rgba(8, 20, 48, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.35) !important;
}

/* ── Global glass fallback ─────────────────────────────────────────────────
   Many pages render .box/.box-primary/.box-solid content without an
   ancestor .hf-page wrapper (a gap that exists in the reference project
   too), so the scoped ".hf-page .box..." rules above never fire and the
   card/table/filter renders as opaque white. These unscoped duplicates
   apply the same glass treatment everywhere as a safety net, regardless
   of whether the page opted into .hf-page. */
.box,
.box-solid,
.box-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

.box > .box-header,
.box-solid > .box-header,
.box-primary > .box-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.box > .box-body,
.box-solid > .box-body,
.box-primary > .box-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.box .form-control,
.box-solid .form-control,
.box-primary .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

.box .form-control:focus,
.box-solid .form-control:focus,
.box-primary .form-control:focus {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: none !important;
}

.box .form-control::placeholder,
.box-solid .form-control::placeholder,
.box-primary .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.box h1, .box h2, .box h3, .box h4, .box h5, .box h6,
.box-solid h1, .box-solid h2, .box-solid h3, .box-solid h4, .box-solid h5, .box-solid h6,
.box-primary h1, .box-primary h2, .box-primary h3, .box-primary h4, .box-primary h5, .box-primary h6,
.box .box-title, .box-solid .box-title, .box-primary .box-title {
    color: #fff !important;
}

.box p, .box span, .box label, .box .control-label, .box .help-block, .box strong, .box b, .box small, .box li, .box a:not(.btn):not(.hf-pill-btn),
.box-solid p, .box-solid span, .box-solid label, .box-solid .control-label, .box-solid .help-block, .box-solid strong, .box-solid b, .box-solid small, .box-solid li, .box-solid a:not(.btn):not(.hf-pill-btn),
.box-primary p, .box-primary span, .box-primary label, .box-primary .control-label, .box-primary .help-block, .box-primary strong, .box-primary b, .box-primary small, .box-primary li, .box-primary a:not(.btn):not(.hf-pill-btn) {
    color: rgba(255, 255, 255, 0.85) !important;
}

.dataTables_wrapper,
table.dataTable {
    background: transparent !important;
}

table.dataTable thead th {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    color: #fff !important;
}

table.dataTable tbody td {
    color: rgba(255, 255, 255, 0.88) !important;
}

table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

table.dataTable.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    color: rgba(255, 255, 255, 0.85) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

/* DataTables' Bootstrap integration renders pagination as a real Bootstrap
   ".pagination > li > a" list (the "paginate_button" class sits on the <li>,
   not the visible <a>), so vendor.css's ".pagination>li>a{background:#fff}"
   was the actual source of the solid white pill segments — the .paginate_button
   rules alone (li background) never touched it. Restyled to match the
   dt-buttons glass-pill look used by Export CSV/Excel/Print/etc.
   Also applied to any plain Bootstrap ".pagination" outside a DataTable
   (Laravel's own paginator: the POS product-list paginator in
   sale_pos/partials/product_list_paginator.blade.php and
   contact/partials/contact_payments_tab.blade.php's {{ $payments->links() }})
   which renders the same markup with no ".dataTables_wrapper" ancestor. */
.dataTables_wrapper .dataTables_paginate .pagination,
ul.pagination {
    display: inline-flex !important;
    gap: 6px !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .pagination > li,
ul.pagination > li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span,
ul.pagination > li > a,
ul.pagination > li > span {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    padding: 6px 14px !important;
    transition: all 0.18s ease;
}

.dataTables_wrapper .dataTables_paginate .pagination > .disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > .disabled > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > .disabled > span,
.dataTables_wrapper .dataTables_paginate .pagination > .disabled > span:hover,
ul.pagination > .disabled > a,
ul.pagination > .disabled > a:hover,
ul.pagination > .disabled > span,
ul.pagination > .disabled > span:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > .active > a,
.dataTables_wrapper .dataTables_paginate .pagination > .active > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > .active > a:focus,
.dataTables_wrapper .dataTables_paginate .pagination > .active > span,
ul.pagination > .active > a,
ul.pagination > .active > a:hover,
ul.pagination > .active > a:focus,
ul.pagination > .active > span {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li > a:focus,
ul.pagination > li > a:hover,
ul.pagination > li > a:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    outline: none !important;
}

/* DataTables row hover — Bootstrap's ".table-hover>tbody>tr:hover{background-color:#f5f5f5}"
   (vendor.css) paints the <tr> itself opaque white; overriding only the <td>/<th>
   backgrounds on top of that still leaves a solid white row showing through. */
.table-hover > tbody > tr:hover,
table.dataTable.table-hover > tbody > tr:hover,
table.dataTable.hover > tbody > tr:hover,
.dataTables_wrapper table.dataTable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

table.dataTable.table-hover > tbody > tr:hover > td,
table.dataTable.table-hover > tbody > tr:hover > th,
table.dataTable.hover > tbody > tr:hover > td,
.dataTables_wrapper table.dataTable tbody tr:hover > td,
.dataTables_wrapper table.dataTable tbody tr:hover > th {
    background-color: transparent !important;
    color: #fff !important;
}

.dataTables_wrapper table.dataTable tfoot th,
.dataTables_wrapper table.dataTable tfoot td {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

/* vendor.css sets ".panel-body{color:#444}" which stays dark against the
   glass background since nothing here ever targeted .panel/.panel-body. */
.panel > .panel-body,
.panel-default > .panel-body {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Plain (non-DataTables) Bootstrap tables ──────────────────────────────
   Bootstrap's own .table-striped/.table-bordered paint an opaque white
   zebra stripe that nothing above overrides unless DataTables JS has
   added the ".dataTable" class. Static tables (instructions, previews,
   etc.) never get that class, so they render as white strips against the
   glass background. This covers every plain Bootstrap table site-wide. */
.table,
.table-striped,
.table-bordered {
    background: transparent !important;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table-striped > thead > tr > th,
.table-striped > tbody > tr > td,
.table-striped > tbody > tr > th,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th {
    color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: transparent !important;
}

.table > thead > tr > th,
.table-striped > thead > tr > th,
.table-bordered > thead > tr > th {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.table-striped > tbody > tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: transparent !important;
}

.table > tbody > tr:hover > td,
.table-striped > tbody > tr:hover > td,
.table-bordered > tbody > tr:hover > td {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Nav-tab report cards (global fallback) ───────────────────────────────
   Report pages wrap their tabbed content in .nav-tabs-custom. Glass rules
   for it previously only applied on pages that opted in via the
   custom-blur-bg partial; most report pages never included it, so the
   card rendered as opaque white. Making this global covers every report
   tab card site-wide without hunting down each page's css section. */
.nav-tabs-custom {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

.nav-tabs-custom > .tab-content {
    background: transparent !important;
}

.nav-tabs-custom > .nav-tabs {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
    color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.nav-tabs-custom p, .nav-tabs-custom span, .nav-tabs-custom label,
.nav-tabs-custom strong, .nav-tabs-custom b, .nav-tabs-custom small,
.nav-tabs-custom li, .nav-tabs-custom h1, .nav-tabs-custom h2,
.nav-tabs-custom h3, .nav-tabs-custom h4, .nav-tabs-custom .box-title {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* ── components.widget bare fallback ──────────────────────────────────────
   resources/views/components/widget.blade.php always renders its wrapper
   with a hardcoded "tw-bg-white", regardless of the $class prop passed in.
   Pages that call @component('components.widget') with no class at all
   (no box/box-primary/box-solid) have nothing to override it, so the card
   renders opaque white. Target the component's unique class signature
   directly so every such card gets the glass treatment without needing
   $class to be set on every call site. */
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .box-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .box-title,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 h1,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 h2,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 h3,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 h4 {
    color: #fff !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 p,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 span,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 label,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 strong,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 small,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 li,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .box-body,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 div {
    color: rgba(255, 255, 255, 0.85) !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .form-control:focus {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .help-block,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .control-label,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 code {
    color: rgba(255, 255, 255, 0.75) !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .select2-container--default .select2-selection--single,
.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
}

.tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1.tw-ring-gray-200 .select2-selection__rendered {
    color: #fff !important;
}

/* ── Page heading fallback ─────────────────────────────────────────────────
   Some page headings (e.g. report/contact.blade.php) are a bare <h1> with
   no tw-text-white class, so they inherit AdminLTE's dark navy default —
   unreadable against the dark glass background. This gap exists in the
   reference project too. Default every content-header heading to white;
   pages that already set tw-text-white are unaffected. */
.content-header h1,
.content-header h1 small {
    color: #fff !important;
}

/* Same gap, one level down: bare <h3>/<h4> sub-headings inside .content
   with no color class (e.g. restaurant/kitchen/index.blade.php's "All
   orders - Kitchen" heading) inherit AdminLTE's dark navy default. Scoped
   to un-classed headings only, so purpose-built colored headings (e.g.
   inside white modals/cards) are unaffected. */
.content > h3,
.content > .row > div > h3,
.content h3:not([class]),
.content h4:not([class]) {
    color: #fff !important;
}

/* ── POS product/cart card ─────────────────────────────────────────────────
   sale_pos/create.blade.php and sale_pos/edit.blade.php wrap the product
   search box and cart totals in a plain tw-rounded-2xl.tw-bg-white card
   instead of .box/.box-solid, so it falls outside every glass rule above.
   Ultimate-POS's equivalent card is a .box.box-solid, which the global
   .box fallback already converts to glass — this brings bstar's
   differently-classed card in line with the same result. */
.tw-rounded-2xl.tw-bg-white.tw-mb-2,
.tw-rounded-2xl.tw-bg-white.tw-mb-2 * {
    box-sizing: border-box;
}

.tw-rounded-2xl.tw-bg-white.tw-mb-2 {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.tw-rounded-2xl.tw-bg-white.tw-mb-2 .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.tw-rounded-2xl.tw-bg-white.tw-mb-2 p,
.tw-rounded-2xl.tw-bg-white.tw-mb-2 span,
.tw-rounded-2xl.tw-bg-white.tw-mb-2 label,
.tw-rounded-2xl.tw-bg-white.tw-mb-2 strong,
.tw-rounded-2xl.tw-bg-white.tw-mb-2 h3,
.tw-rounded-2xl.tw-bg-white.tw-mb-2 h4,
.tw-rounded-2xl.tw-bg-white.tw-mb-2 td,
.tw-rounded-2xl.tw-bg-white.tw-mb-2 th,
.tw-rounded-2xl.tw-bg-white.tw-mb-2 a:not(.btn) {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hf-pos-quick-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    border-radius: 8px !important;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.hf-pos-quick-btn:hover,
.hf-pos-quick-btn:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}

.hf-pos-quick-icon {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* ── Bootstrap .well ──────────────────────────────────────────────────────
   vendor.css: ".well{background-color:#f5f5f5;border:1px solid #e3e3e3}"
   with plain dark body text. Used unmodified (no bg-*/hf-glass class) on
   sell/create.blade.php, sell/edit.blade.php and the payment-row partials,
   so it renders as an opaque light-gray block against the dark background. */
.well {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.well label,
.well .control-label,
.well .help-block,
.well p,
.well span,
.well strong,
.well b,
.well small {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Generic Bootstrap .list-group-item ──────────────────────────────────
   vendor.css: ".list-group-item{background-color:#fff;color:#555}" with no
   generic override (only the business-settings-scoped .settings-nav variant
   was fixed). Used as-is by superadmin settings' side nav and other plain
   list groups without any glass class, so it renders as solid white rows. */
.list-group-item {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

/* ── Bootstrap .thumbnail ─────────────────────────────────────────────────
   vendor.css: ".thumbnail{background-color:#fff;border:1px solid #ddd}".
   Used for product image previews on the Add/Edit Product screens; renders
   as a solid white frame around the image against the dark background. */
.thumbnail {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.thumbnail .caption {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Bootstrap .dropdown-header ───────────────────────────────────────────
   vendor.css sets low-contrast "color:#777" meant for a white dropdown
   menu; unreadable on the dark glass dropdown menus used in this app. */
.dropdown-header {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ── Bootstrap table row-state classes (success/warning/danger/info/active) ─
   vendor.css paints light pastel td/th backgrounds for these on both base
   and :hover (e.g. success #dff0d8/#d0e9c6, danger #f2dede/#ebcccc). Used as
   literal <tr class="success">/<tr class="danger"> rows on the Cash Register
   payment-details / product-details modals (POS register close-out flow),
   rendering as bright pastel patches against the dark glass table. */
.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr.success:hover > th {
    background-color: rgba(46, 204, 113, 0.18) !important;
    color: #fff !important;
}

.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr.danger:hover > th {
    background-color: rgba(231, 76, 60, 0.2) !important;
    color: #fff !important;
}

.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr.warning:hover > th {
    background-color: rgba(241, 196, 15, 0.2) !important;
    color: #fff !important;
}

.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr.info:hover > th {
    background-color: rgba(52, 152, 219, 0.2) !important;
    color: #fff !important;
}

.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr.active:hover > th {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

/* ── DataTables scrollY header/body wrappers ─────────────────────────────
   Pages using `scrollY` (product list, sell list, purchase order/requisition
   list, home dashboard widgets) get DataTables' own .dataTables_scrollHead /
   .dataTables_scrollBody wrapper divs, which carry no background of their
   own in vendor.css but let the frozen header's white <thead> show through
   as a bright bar above the dark scrolling body. */
.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.dataTables_scrollBody {
    background: transparent !important;
}

.dataTables_scrollHead table.dataTable thead th {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    color: #fff !important;
}

/* ── Generic .form-control[readonly]/[disabled] ──────────────────────────
   vendor.css forces "background-color:#eee;opacity:1" on readonly/disabled
   inputs — was only overridden inside a couple of POS modals. Readonly date
   fields (transaction_date, dob) and disabled selects appear on nearly
   every purchase/contact/expense/product create+edit form, rendering as a
   pale gray box against the dark theme. */
.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* ── Generic .input-group-addon ───────────────────────────────────────────
   vendor.css's base rule tints it green (color:#3c763d;background:#dff0d8)
   before Bootstrap's own gray default kicks in; only .hf-page/.hf-modal/
   modal-scoped contexts were overridden, leaving plain report/list filter
   forms with a light box around the icon/text. */
.input-group-addon {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Generic .btn-default ─────────────────────────────────────────────────
   Bootstrap's plain white/dark-text default button — only the POS
   #pos_table-scoped variant was themed. Hits product list/create/edit,
   contact ledger tab, dashboard configurator, and similar pages. */
.btn-default {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
}

/* ── DataTables controls row: length / buttons / filter overlap ──────────
   public/js/common.js sets the shared dom template
   '<"row..."<"col-sm-1"l><"col-sm-8"B><"col-sm-3"f> r>tip' — col-sm-1 (~8%
   width) is too narrow for "Show 25 entries", so it visually overflows
   into the buttons column next to it on every DataTables listing page
   (customers, customer groups, variations, sales commission agents, etc).
   Override the rigid Bootstrap grid split with a wrapping flex row so each
   control sizes to its own content instead of a fixed fraction. */
.dataTables_wrapper > .row.margin-bottom-20 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"] {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Give the search box (last column, "f") first claim on the leftover row
   space instead of shrinking to zero and wrapping onto its own line. */
.dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"]:last-child {
    flex: 1 1 220px !important;
}

.dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* On desktop-width screens, force length/buttons/search onto a single row
   instead of letting flex-wrap push search onto its own line — there's
   enough room once the search box is allowed to shrink below 220px. */
@media (min-width: 1200px) {
    .dataTables_wrapper > .row.margin-bottom-20 {
        flex-wrap: nowrap !important;
    }

    .dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"]:last-child {
        flex: 0 1 200px !important;
        min-width: 140px !important;
    }

    .dataTables_wrapper .dt-buttons {
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }
}

.dataTables_wrapper .dataTables_length {
    white-space: nowrap !important;
}

/* ── POS product-search / customer / table / staff row spacing ──────────
   pos_form.blade.php's icon + select + button groups are plain Bootstrap
   ".input-group" (display:table), meant to look seamlessly joined. Since
   the glass theme gives the icon addon, the pill select, and the round
   button each their own independent border-radius/border, the seamless
   join now reads as three separate floating pieces crowded together with
   no breathing room.
   Two earlier attempts both regressed: switching .input-group to flex
   broke select2's width calc and the Bootstrap column layout (search box
   overlapped the customer column); adding a transparent border-left to
   the pill/select2 elements to fake a gap corrupted their border-radius
   (the curve renders against the border box, so the rounded corner came
   out lopsided). border-spacing is the correct table-layout primitive for
   this — it puts real gaps between table-cells without touching any
   cell's own box or border-radius, and .input-group is still `display:
   table` (untouched), so column widths / select2 sizing stay exactly as
   Bootstrap intended. */
#add_pos_sell_form .input-group,
#edit_pos_sell_form .input-group {
    border-collapse: separate !important;
    border-spacing: 8px 0 !important;
}

#add_pos_sell_form .input-group > .input-group-addon,
#edit_pos_sell_form .input-group > .input-group-addon {
    border-radius: 50% !important;
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    text-align: center;
}

#add_pos_sell_form .input-group > .input-group-btn > .btn + .btn,
#edit_pos_sell_form .input-group > .input-group-btn > .btn + .btn {
    margin-left: 8px !important;
}

/* ── POS "Kitchen order" checkbox + tooltip icon ─────────────────────────
   The info-icon (@show_tooltip) is a plain inline sibling after the
   checkbox <label>; in the narrow col-md-3 column it wraps onto its own
   line below-left instead of sitting next to the label. Keep them as one
   flex row so the icon stays inline with a small gap. */
#add_pos_sell_form .checkbox,
#edit_pos_sell_form .checkbox {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: max-content !important;
    max-width: none !important;
}

#add_pos_sell_form .checkbox label,
#edit_pos_sell_form .checkbox label {
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

#add_pos_sell_form .checkbox .hover-q,
#edit_pos_sell_form .checkbox .hover-q {
    flex-shrink: 0 !important;
}

/* ── .bg-gray inside glass panels ─────────────────────────────────────────
   vendor.css: ".bg-gray{color:#000;background-color:#d2d6de!important}" —
   used on summary/total ".well"/"table" boxes on stock transfer, stock
   adjustment, and expense show/print pages. Text stays legible (black on
   light gray) but it renders as a flat opaque island inconsistent with
   the rest of the dark glass theme. */
.well.bg-gray,
table.bg-gray,
.bg-gray {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

table.bg-gray > tbody > tr > td,
table.bg-gray > tbody > tr > th {
    color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}