/* ========================================================================== AIO ERP — Dropdown Consistency Layer -------------------------------------------------------------------------- Single source of truth for the look, stacking, and behaviour of every dropdown-style control (select2, Bootstrap .dropdown-menu, date/range pickers, jQuery-UI autocomplete). Loaded LAST so it overrides the built CSS bundles without needing a bundle rebuild. PHASE 1: Unified z-index scale. Previously stacking was a free-for-all: .select2-container--open used z-index:9999999, datepicker 10000, daterangepicker 3005 (inline), some table menus 2000 — none related to the modal layer (1200). That made pickers hide behind select2 inside modals and table menus clip. The scale below sits every popup just above the modal layer and below toasts/tooltips, so popups are always visible (even when attached to ) yet never cover transient notifications. ========================================================================== */ :root { /* Anchored to the app's REAL modal stack (header 1100 / backdrop 1150 / modal 1200), not the aspirational --z-* tokens which the app never actually used. */ --aio-z-app-header: 1100; --aio-z-modal-backdrop: 1150; --aio-z-modal: 1200; /* All transient popups sit just above the modal so they remain visible whether select2/picker is attached inside the modal (dropdownParent) or to . Kept below toasts/tooltips. */ --aio-z-dropdown: 1300; /* select2, .dropdown-menu, autocomplete */ --aio-z-picker: 1310; /* datepicker / daterangepicker */ --aio-z-toast: 1400; --aio-z-tooltip: 1500; --aio-datepicker-cell: 36px; --aio-datepicker-grid: 252px; } /* -------------------------------------------------------------------------- select2 Selectors deliberately match the high-specificity rules in the built bundles (`body.premium-ui …`, `html[data-theme] …`) which set z-index:9999999. Same specificity + later load order = these win. NOTE: the POS-scoped `#add_pos_sell_form .select2-*` rule is intentionally left untouched — POS is a fullscreen context with no modal stacking. -------------------------------------------------------------------------- */ /* Literal values are used in the z-index declarations below (not the vars above) because var() in a high-!important z-index can be dropped as "invalid at computed-value time" in this cascade. The vars document the scale; the literals must stay in sync with them. */ body.premium-ui .select2-container--open, body.premium-ui .select2-dropdown, html[data-theme] .select2-container--open, html[data-theme] .select2-dropdown, .select2-container--open, .select2-dropdown { z-index: 1300 !important; /* --aio-z-dropdown */ } /* NOTE: dropdown panel WIDTH is handled in JS (repairSelect2DropdownPosition in app.js) which sizes the panel to the field via setProperty(..., 'important'). We intentionally do NOT force width here in CSS — a blanket `.select2-dropdown { width:100% }` collapses panels on pages that load this stylesheet but NOT app.js (e.g. the standalone register page), so width is left to the JS that only runs where the repair is available. */ /* -------------------------------------------------------------------------- Bootstrap dropdown menus (table "Actions", btn-group menus) An open menu inside a scrollable table needs to clear sibling rows. -------------------------------------------------------------------------- */ body.premium-ui .open > .dropdown-menu, .open > .dropdown-menu, .btn-group.open > .dropdown-menu, .dropdown.open > .dropdown-menu { z-index: 1300 !important; /* --aio-z-dropdown */ } /* DataTable action menus: fixed positioning escapes scrollBody overflow without forcing overflow:visible on the scroll container (which stretches scrollX tables outside their panel). common.js sets top/left on open. */ body.premium-ui table.dataTable .btn-group .dropdown-menu { position: fixed !important; transition: none !important; animation: none !important; } /* -------------------------------------------------------------------------- Date / range pickers (slightly above select2 so a date field's picker wins over an adjacent open select2). Overrides daterangepicker's inline z-index. -------------------------------------------------------------------------- */ body.premium-ui .datepicker, body.premium-ui .daterangepicker, body.premium-ui .bootstrap-datetimepicker-widget, .datepicker.dropdown-menu, .datepicker, .bootstrap-datetimepicker-widget, .daterangepicker { z-index: 1310 !important; /* --aio-z-picker */ } body.premium-ui .bootstrap-datetimepicker-widget.dropdown-menu, .bootstrap-datetimepicker-widget.dropdown-menu, body.premium-ui .modal ~ .datepicker, body.premium-ui .datepicker.datepicker-dropdown, .datepicker.datepicker-dropdown { z-index: 3065 !important; width: auto !important; min-width: 274px !important; max-width: calc(100vw - 24px) ; padding: 10px !important; overflow: visible !important; } body.premium-ui .bootstrap-datetimepicker-widget.dropdown-menu { border: 1px solid var(--border-color) !important; border-radius: 8px !important; box-shadow: var(--shadow-lg) !important; } body.premium-ui .bootstrap-datetimepicker-widget .datepicker, .bootstrap-datetimepicker-widget .datepicker, body.premium-ui .bootstrap-datetimepicker-widget .datepicker-days, .bootstrap-datetimepicker-widget .datepicker-days { width: var(--aio-datepicker-grid) !important; min-width: var(--aio-datepicker-grid) !important; } body.premium-ui .bootstrap-datetimepicker-widget table, .bootstrap-datetimepicker-widget table, body.premium-ui .datepicker table, .datepicker.datepicker-dropdown table { table-layout: fixed !important; width: var(--aio-datepicker-grid) !important; min-width: var(--aio-datepicker-grid) !important; border-collapse: separate !important; border-spacing: 0 !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr td, body.premium-ui .bootstrap-datetimepicker-widget table tr th, .bootstrap-datetimepicker-widget table tr td, .bootstrap-datetimepicker-widget table tr th, body.premium-ui .datepicker table tr td, body.premium-ui .datepicker table tr th, .datepicker.datepicker-dropdown table tr td, .datepicker.datepicker-dropdown table tr th { box-sizing: border-box ; width: var(--aio-datepicker-cell) !important; min-width: var(--aio-datepicker-cell) !important; max-width: var(--aio-datepicker-cell) !important; height: var(--aio-datepicker-cell) !important; line-height: var(--aio-datepicker-cell) !important; padding: 0 !important; display: table-cell !important; text-align: center !important; vertical-align: middle !important; white-space: nowrap !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr th.prev, body.premium-ui .bootstrap-datetimepicker-widget table tr th.next, .bootstrap-datetimepicker-widget table tr th.prev, .bootstrap-datetimepicker-widget table tr th.next, body.premium-ui .datepicker table tr th.prev, body.premium-ui .datepicker table tr th.next, .datepicker.datepicker-dropdown table tr th.prev, .datepicker.datepicker-dropdown table tr th.next { width: var(--aio-datepicker-cell) !important; min-width: var(--aio-datepicker-cell) !important; max-width: var(--aio-datepicker-cell) !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr th.prev, body.premium-ui .bootstrap-datetimepicker-widget table tr th.next, body.premium-ui .bootstrap-datetimepicker-widget table tr th.picker-switch, .bootstrap-datetimepicker-widget table tr th.prev, .bootstrap-datetimepicker-widget table tr th.next, .bootstrap-datetimepicker-widget table tr th.picker-switch { background: transparent !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr th.prev:hover, body.premium-ui .bootstrap-datetimepicker-widget table tr th.next:hover, body.premium-ui .bootstrap-datetimepicker-widget table tr th.picker-switch:hover, .bootstrap-datetimepicker-widget table tr th.prev:hover, .bootstrap-datetimepicker-widget table tr th.next:hover, .bootstrap-datetimepicker-widget table tr th.picker-switch:hover { background: var(--surface-muted, #f1f5f9) !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr th.picker-switch, .bootstrap-datetimepicker-widget table tr th.picker-switch, body.premium-ui .datepicker table tr th.datepicker-switch, .datepicker.datepicker-dropdown table tr th.datepicker-switch { width: auto !important; min-width: 0 !important; max-width: none !important; font-weight: 700 !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr th.dow, .bootstrap-datetimepicker-widget table tr th.dow, body.premium-ui .datepicker table tr th.dow, .datepicker.datepicker-dropdown table tr th.dow { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--text-muted, #64748b) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr td.day, .bootstrap-datetimepicker-widget table tr td.day, body.premium-ui .datepicker table tr td.day, .datepicker.datepicker-dropdown table tr td.day { border-radius: 8px !important; color: var(--text-main, #111827) !important; font-weight: 500 !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr td.day:hover, .bootstrap-datetimepicker-widget table tr td.day:hover, body.premium-ui .datepicker table tr td.day:hover, .datepicker.datepicker-dropdown table tr td.day:hover, body.premium-ui .bootstrap-datetimepicker-widget table tr td span:hover, .bootstrap-datetimepicker-widget table tr td span:hover, body.premium-ui .datepicker table tr td span:hover, .datepicker.datepicker-dropdown table tr td span:hover { background: var(--surface-muted, #f1f5f9) !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr td.active, body.premium-ui .bootstrap-datetimepicker-widget table tr td.active:hover, .bootstrap-datetimepicker-widget table tr td.active, .bootstrap-datetimepicker-widget table tr td.active:hover, body.premium-ui .datepicker table tr td.active, body.premium-ui .datepicker table tr td.active:hover, .datepicker.datepicker-dropdown table tr td.active, .datepicker.datepicker-dropdown table tr td.active:hover { background: var(--primary, #203f7c) !important; color: #fff !important; text-shadow: none !important; box-shadow: 0 6px 14px rgba(32, 63, 124, .22) !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr td.today:not(.active), .bootstrap-datetimepicker-widget table tr td.today:not(.active), body.premium-ui .datepicker table tr td.today:not(.active), .datepicker.datepicker-dropdown table tr td.today:not(.active) { background: color-mix(in srgb, var(--primary, #203f7c) 10%, transparent) !important; color: var(--primary, #203f7c) !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr td.old, body.premium-ui .bootstrap-datetimepicker-widget table tr td.new, .bootstrap-datetimepicker-widget table tr td.old, .bootstrap-datetimepicker-widget table tr td.new, body.premium-ui .datepicker table tr td.old, body.premium-ui .datepicker table tr td.new, .datepicker.datepicker-dropdown table tr td.old, .datepicker.datepicker-dropdown table tr td.new { color: var(--text-muted, #94a3b8) !important; opacity: .78 !important; } body.premium-ui .bootstrap-datetimepicker-widget table tr td span, .bootstrap-datetimepicker-widget table tr td span, body.premium-ui .datepicker table tr td span, .datepicker.datepicker-dropdown table tr td span { width: 62px !important; height: 42px !important; line-height: 42px !important; margin: 2px !important; } /* -------------------------------------------------------------------------- jQuery-UI autocomplete (product / contact search typeaheads) -------------------------------------------------------------------------- */ body.premium-ui .ui-autocomplete, .ui-autocomplete.ui-front, .ui-autocomplete { z-index: 1300 !important; /* --aio-z-dropdown */ } /* -------------------------------------------------------------------------- SEARCH-RESULTS HEIGHT (product / contact typeaheads) The jQuery-UI menu shipped with no height cap, so a long result set — e.g. a variable product whose many variations each render as their own row — ran off the bottom of the screen and, when the box sat low in the viewport, the overflowing list covered the search input itself. Cap the menu to a share of the viewport height (responsive per screen size) and let it scroll internally; `overscroll-behavior: contain` stops that scroll from chaining out to the page. Every variation stays reachable inside the dropdown. -------------------------------------------------------------------------- */ body.premium-ui .ui-autocomplete, .ui-autocomplete.ui-front, .ui-autocomplete { max-height: min(60vh, 460px) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; } @media (max-width: 575.98px) { body.premium-ui .ui-autocomplete, .ui-autocomplete.ui-front, .ui-autocomplete { max-height: 50vh !important; } } /* ========================================================================== MOBILE MODAL SCROLLING On phones a tall modal could not be scrolled: the dialog overflowed the viewport while inner `.modal-body { max-height; overflow }` rules and the fixed `.modal` fought each other, leaving the lower fields unreachable. On small screens, let the whole `.modal` be the single touch scroller and stop the inner body from trapping the scroll. ========================================================================== */ @media (max-width: 767.98px) { .modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */ } /* Let the dialog flow naturally and scroll as one unit. */ .modal .modal-dialog { margin: 10px auto; } /* Remove desktop inner-scroll caps so content isn't clipped/untouchable. */ .modal .modal-body, .view_modal .modal-body { max-height: none !important; overflow: visible !important; } } /* ========================================================================== MODAL SCROLL CONTAINMENT (all screen sizes) Symptom: opening a modal and scrolling inside it scrolled the page BEHIND the (position:fixed) modal instead of the modal content. Two gaps caused it: 1. Bootstrap locks `body` via `.modal-open{overflow:hidden}`, but the root `html` element was never locked, so wheel/touch scroll fell through to the document. 2. Inner `.modal-body { overflow:auto }` scrollers chain their scroll to the page once they hit their top/bottom bound. Lock the document while a modal is open and contain inner overscroll so the modal is the only thing that moves. ========================================================================== */ body.modal-open { overflow: hidden !important; /* Stop iOS rubber-banding the page under the modal. */ overscroll-behavior: none; } /* Lock the root element too (supported browsers) — belt and braces for layouts where the scroll happens on rather than . */ html:has(body.modal-open) { overflow: hidden !important; } /* The modal is the single scroller; its body must not chain scroll outward. */ .modal { overscroll-behavior: contain; } .modal .modal-body, .view_modal .modal-body { overscroll-behavior: contain; } /* The premium/shadcn theme sets `.modal{overflow:visible}` (so select2/dropdowns inside a modal aren't clipped). That defeats Bootstrap's own `.modal-open .modal{overflow-y:auto}`, so a modal taller than the viewport could not be scrolled — its footer/Save button was unreachable. Force the OPEN modal to be the scroller again (modal-body stays visible for dropdowns). bundle-shell.css loads after bundle-shadcn.css, so this wins. */ .modal-open .modal, .modal.in, .modal.show { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------------------------- POS PRODUCT-SEARCH RESULTS — pin the dropdown directly below the search box. The jQuery-UI menu is appended inside #search_product_input_group and only gets an inline width from the widget, so it fell back to CSS `top:0;left:0` and rendered ON TOP of the search input, hiding it. Anchor it to the bottom of the input group at full width so results always sit just below the box. -------------------------------------------------------------------------- */ #search_product_input_group { position: relative; } #search_product_input_group > ul.ui-autocomplete { top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; margin-top: 2px; } /* -------------------------------------------------------------------------- INPUT-GROUPS ON SMALL SCREENS The bundles' `@media (max-width:420px)` rule forces every `.input-group-addon` / `.input-group-btn` to `flex: 1 0 100%` (a full-width row) on the assumption the group wraps — but the group is actually `flex-wrap: nowrap`, so the addon ate the whole row and the field (text input OR select2) was squeezed to ~1px and overflowed off-screen. Restore normal input-group behaviour on small screens: icon-sized addon, field/select2 fills the remaining space. -------------------------------------------------------------------------- */ @media (max-width: 575.98px) { body.premium-ui .input-group, .input-group { flex-wrap: nowrap !important; } /* Addons & buttons hug their content (the icon), not the whole row. */ body.premium-ui .input-group > .input-group-addon, body.premium-ui .input-group > .input-group-btn, body.premium-ui .input-group > .input-group-prepend, body.premium-ui .input-group > .input-group-append, .input-group > .input-group-addon, .input-group > .input-group-btn, .input-group > .input-group-prepend, .input-group > .input-group-append { flex: 0 0 auto !important; width: auto !important; margin-bottom: 0 !important; } /* The field and the select2 control fill whatever space is left. */ body.premium-ui .input-group > .form-control, body.premium-ui .input-group > .select2-container, .input-group > .form-control, .input-group > .select2-container { flex: 1 1 auto !important; width: 1% !important; /* with flex-grow, fills the remaining width */ min-width: 0 !important; } } /* ========================================================================== PHASE 3 — VISUAL UNIFICATION (conservative) The "premium" theme (html[data-theme] …) already gives select2 and .dropdown-menu a consistent radius/shadow/surface, so we deliberately do NOT override those. We only normalise the genuine, theme-independent gaps so the look is fully consistent without fighting the theme. ========================================================================== */ /* 1. Placeholder colour — select2's placeholder was a lighter shade than the native input placeholder; align them. Selectors match the theme's specificity so this actually applies. */ html[data-theme] .select2-selection__placeholder, body.premium-ui .select2-selection__placeholder, .select2-selection__placeholder { color: var(--muted-foreground, var(--text-muted, #64748b)) !important; opacity: 1 !important; } .select2-search__field::placeholder { color: var(--muted-foreground, var(--text-muted, #64748b)) !important; opacity: 1 !important; } /* 2. Multi-select tags — reference design tokens instead of hardcoded hex (keeps the current look, but consistent with the palette). */ html[data-theme] .select2-selection--multiple .select2-selection__choice, body.premium-ui .select2-selection--multiple .select2-selection__choice, .select2-selection--multiple .select2-selection__choice { background-color: var(--primary-light, #e0f2fe) !important; border-color: var(--primary-light, #bae6fd) !important; color: var(--primary-dark, #0e5a8a) !important; } /* 3. Dark mode — give the result panel the same dark surface as the inputs it belongs to (it previously read as a slightly different shade). */ html.dark-mode .select2-dropdown, html[data-color-mode="dark"] .select2-dropdown, body.dark-mode .select2-dropdown { background-color: var(--card, #0f172a) !important; border-color: var(--border, rgba(148, 163, 184, 0.18)) !important; } /* ========================================================================== INPUT-GROUP BORDER-RADIUS CORRECTIONS ========================================================================== */ /* 1. Product search bar: text input sits between two .input-group-btn elements; all four corners must be flat. */ #search_product_input_group #search_product { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* 2. Payment Terms: body.premium-ui applies TR:8px via adjacent-sibling selector (.input-group-addon + .form-control) with specificity (0,4,1). Use an ID selector (specificity 1,1,0) to override. */ #add_sell_form [name="pay_term_number"] { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* 3. Quick Add (+) button: jQuery UI autocomplete appends a UL after the span.input-group-btn, making it NOT :last-child. The middle-element rule sets all corners to 0. Use ID specificity to restore the right rounding. */ #search_product_input_group .pos_add_quick_product { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 9px !important; border-bottom-right-radius: 9px !important; } /* 4. Textarea icon addon: stretch to match textarea height. bundle-shadcn sets body.premium-ui .input-group:has(textarea) { align-items: flex-start } at specificity (0,2,2). We match that specificity here (loads later = wins). */ body.premium-ui .input-group:has(textarea.form-control), .input-group:has(textarea.form-control) { display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; } body.premium-ui .input-group:has(textarea.form-control) > .input-group-addon, .input-group:has(textarea.form-control) > .input-group-addon { display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: unset !important; align-self: stretch !important; } body.premium-ui .input-group:has(textarea.form-control) > textarea.form-control, .input-group:has(textarea.form-control) > textarea.form-control { flex: 1 1 auto !important; width: 1% !important; min-width: 0 !important; } /* Quantity input (between +/- buttons) — all corners flat */ .input-group.input-number > .form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Products table: smart column widths */ #pos_table .col-product { width: 38%; min-width: 160px; } #pos_table .col-qty { width: 12%; min-width: 90px; } #pos_table .col-price { width: 18%; min-width: 100px; } #pos_table .col-total { width: 18%; min-width: 100px; } #pos_table .col-action { width: 5%; min-width: 36px; } /* Products table tfoot: ensure gray fills all cells */ #pos_table tfoot > tr > td { background-color: #f9f9f9 !important; } /* ========================================================================== APP-WIDE UPLOAD + RICH TEXT FIELD NORMALIZATION ========================================================================== */ body.premium-ui .input-group:has(.file-input) { display: block !important; } body.premium-ui .input-group:has(.file-input) > .input-group-addon { display: none !important; } body.premium-ui .input-group:has(.file-input) > .file-input, body.premium-ui .form-group > .file-input { width: 100% !important; } body.premium-ui .file-input .input-group { min-height: var(--input-height, 2.375rem) !important; } body.premium-ui .file-input .btn-file, body.premium-ui .file-input .fileinput-remove-button, body.premium-ui .file-input .aio-file-upload-state { min-width: 3rem !important; } body.premium-ui .file-input .file-caption.kv-fileinput-caption, body.premium-ui .file-input .kv-fileinput-caption { min-height: var(--input-height, 2.375rem) !important; } body.premium-ui .aio-rich-text-field { width: 100%; } body.premium-ui .aio-rich-text-field > textarea.aio-tinymce-source, body.premium-ui textarea.form-control.aio-tinymce-source, .aio-rich-text-field > textarea.aio-tinymce-source { display: none !important; } body.premium-ui .aio-rich-text-field .tox-tinymce { border: 1px solid var(--border-color, #e2e8f0) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--bg-surface, #fff) !important; } body.premium-ui .tox:not(.tox-tinymce-inline) .tox-editor-header, body.premium-ui .tox:not(.tox-tinymce-inline) .tox-toolbar-overlord, body.premium-ui .tox:not(.tox-tinymce-inline) .tox-toolbar, body.premium-ui .tox:not(.tox-tinymce-inline) .tox-toolbar__primary, body.premium-ui .tox:not(.tox-tinymce-inline) .tox-menubar, body.premium-ui .tox:not(.tox-tinymce-inline) .tox-statusbar { background: var(--bg-surface, #fff) !important; border-color: var(--border-color, #e2e8f0) !important; color: var(--text-main, #111827) !important; } body.premium-ui .tox:not(.tox-tinymce-inline) .tox-edit-area__iframe { background: var(--bg-surface, #fff) !important; } /* ========================================================================== CONTACT / CUSTOMER SELECT2 RESULT ROWS (sell, purchase, POS) ========================================================================== */ .pos-balance-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; font-size: 0.625rem; font-weight: 700; line-height: 1.4; border-radius: 4px; white-space: nowrap; color: #fff; } .pos-balance-badge--debit { background: var(--danger, #DC2626); } .pos-balance-badge--credit { background: var(--badge-success-text, #15803D); } .pos-customer-result { display: flex; align-items: center; min-width: min(100%, 320px); min-height: 52px; padding: 0.35rem 0.25rem; line-height: 1.25; } .pos-customer-result__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 2rem; width: 2rem; height: 2rem; margin-right: 0.65rem; border-radius: var(--radius-full, 9999px); background: rgba(20, 124, 187, 0.10); color: var(--primary, #147cbb); } .pos-customer-result__icon--business { background: rgba(10, 23, 51, 0.08); color: var(--muted-foreground, #3D4D6B); } .pos-customer-result__body { flex: 1 1 auto; min-width: 0; } .pos-customer-result__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm, 0.875rem); font-weight: 700; color: var(--foreground, #333); } .pos-customer-result__mobile, .pos-customer-result__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; min-height: 1.1rem; margin-top: 0.1rem; color: var(--muted-foreground, #777); font-size: var(--font-size-xs, 0.75rem); } .pos-customer-result__reward { color: var(--highlight, #D4A24C); font-weight: 700; white-space: nowrap; } .pos-customer-due__amount--debit { color: var(--danger, #DC2626); font-weight: 700; } .pos-customer-due__amount--credit { color: var(--badge-success-text, #15803D); font-weight: 700; } /* Rich customer rows: keep layout when highlighted */ .select2-results__option--highlighted .pos-customer-result__name, .select2-results__option--highlighted .pos-customer-result__mobile, .select2-results__option--highlighted .pos-customer-result__meta { color: inherit; } .select2-results__option--highlighted .pos-balance-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } /* AJAX contact selects always show the search field */ .select2-container--open .select2-search--dropdown { display: block !important; } /* ========================================================================== DATETIMEPICKER FOOTER — align with daterangepicker buttons ========================================================================== */ .bootstrap-datetimepicker-widget .picker-switch, .bootstrap-datetimepicker-widget a[data-action="togglePicker"], .bootstrap-datetimepicker-widget a[data-action="today"], .bootstrap-datetimepicker-widget a[data-action="clear"] { border-radius: var(--radius-md, 6px) !important; font-weight: 600 !important; } .bootstrap-datetimepicker-widget a[data-action="today"] { background: var(--primary, #147cbb) !important; color: #fff !important; } .bootstrap-datetimepicker-widget a[data-action="clear"] { background: var(--bg-body, #f3f4f6) !important; color: var(--foreground, #111827) !important; border: 1px solid var(--border-color, #e2e8f0) !important; } /* ========================================================================== TRANSACTION SUMMARY ROWS (sell / purchase create-edit) ========================================================================== */ .aio-summary-row { display: flex; flex-wrap: wrap; align-items: center; margin-left: 0; margin-right: 0; } .aio-summary-row::before, .aio-summary-row::after { display: none; } .aio-summary-row > [class*="col-"] { float: none; flex: 0 0 auto; } @media (max-width: 767.98px) { .aio-summary-row > .col-xs-6:first-child { flex: 1 1 50%; } .aio-summary-row > .col-xs-4 { flex: 1 1 40%; text-align: right !important; } .aio-summary-row > .col-xs-2 { flex: 0 0 10%; text-align: center !important; } }