/* ========================================================================== 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 { /* The z-index scale itself now lives in tokens.css's --z-* variables (--z-app-header/--z-modal-backdrop/--z-modal/--z-dropdown/--z-picker/ --z-toast/--z-tooltip), which were rewritten to match this file's real 1100-1500 contract as part of the B12 cleanup — this file used to carry its own parallel --aio-z-* scale since tokens.css's old --z-* values were unused/aspirational; that duplication is gone now. */ /* Mid density — aligned with aio-pickers.css (--aio-picker-day). */ --aio-datepicker-cell: 2rem; --aio-datepicker-grid: calc(2rem * 7); } /* -------------------------------------------------------------------------- DataTables Buttons collection (Column visibility, export menus) Vendor sets background z-index 2001 and collection 2002. Dark-mode/B12 overrides only lowered the *collection* to --z-dropdown (1300), so the full-screen .dt-button-background sat above the menu and swallowed every click — toolbar Print/CSV/Excel and table Actions looked dead until refresh. Keep both on the dropdown tier with collection strictly above background. -------------------------------------------------------------------------- */ div.dt-button-background, .dt-button-background { z-index: 1290 !important; /* Transparent click-catcher; vendor fades opacity which looked like a modal dim */ background: transparent !important; opacity: 1 !important; } ul.dt-button-collection, ul.dt-button-collection.dropdown-menu, div.dt-button-collection, .dt-button-collection { z-index: var(--z-dropdown, 1300) !important; } /* -------------------------------------------------------------------------- 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: POS used to force Select2 to --z-max in pos-redesign.css; that broke date/datetime pickers. POS now uses the same --z-dropdown / --z-picker contract as the rest of the app (see pos-redesign.css). -------------------------------------------------------------------------- */ 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: var(--z-dropdown, 1300) !important; } /* 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: var(--z-dropdown, 1300) !important; } /* 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: var(--z-picker, 1310) !important; } 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: var(--z-picker, 1310) !important; /* same picker layer as the rule above, normalized from a stray 3065 (B12 cleanup) */ width: auto !important; min-width: 274px !important; max-width: calc(100vw - 24px) ; padding: var(--space-3, 12px) !important; overflow: visible !important; } body.premium-ui .bootstrap-datetimepicker-widget.dropdown-menu { border: 1px solid var(--border-color) !important; border-radius: var(--radius-md, 8px) !important; box-shadow: var(--shadow-lg) !important; /* Vendor often paints inset:36px; JS re-anchors, but keep panel measurable. */ max-width: min(360px, calc(100vw - 16px)) !important; /* Room so edge day cells are not flush against the outer card border. */ padding: 0.5rem 0.625rem !important; overflow: visible !important; } /* Nested .datepicker inside datetimepicker: no second card chrome (border/shadow). */ body.premium-ui .bootstrap-datetimepicker-widget .datepicker, .bootstrap-datetimepicker-widget .datepicker, body.premium-ui .bootstrap-datetimepicker-widget > ul .datepicker { border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !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; /* Type size owned by aio-pickers.css (--aio-picker-fs-sm) */ } /* Daterange type/density owned by aio-pickers.css (do not force 0.75rem here). */ 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: var(--z-dropdown, 1300) !important; } /* -------------------------------------------------------------------------- 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; } } /* ========================================================================== TALL MODAL CONTAINMENT (all viewports) — 2026-07-30 P1 Problem: create/show modals (product-show, sell-show, contact-create, …) grew taller than the viewport with `.modal-body { overflow: visible }`, so footer Save/Close and lower fields sat below the fold (especially mobile). Approach: cap `.modal-dialog` / `.modal-content` to the viewport and make `.modal-body` the vertical scroller; pin header + footer. Select2 stays usable because `aioInitSelect2` attaches dropdowns to `.modal` / body when possible (see app.js getSelect2DropdownParent) and open menus use z-index above the modal. ========================================================================== */ .modal .modal-dialog { margin: var(--space-4, 16px) auto; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; } .modal .modal-content { display: flex !important; flex-direction: column !important; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); min-height: 0; width: 100%; /* overflow:hidden already set in components.css — keeps radius clip */ } .modal .modal-header, .modal .modal-footer, .view_modal .modal-header, .view_modal .modal-footer { flex-shrink: 0 !important; } .modal .modal-body, .view_modal .modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* -------------------------------------------------------------------------- FORM WRAPPER FLEX BRIDGE Fleet (and many create/edit modals) nest structure as: .modal-content > form > .modal-header + .modal-body + .modal-footer Without this bridge, the form is the only flex child of .modal-content, so .modal-body never gets a height budget and tall forms clip with no scroll. Does not change Option B chrome, colors, or button API — scroll only. Select2 in modals must use getSelect2DropdownParent → document.body (app.js); do not use overflow:visible on .modal-body to “fix” Select2. -------------------------------------------------------------------------- */ .modal .modal-content > form, .modal .modal-content > form.form-horizontal, .view_modal .modal-content > form, .view_modal .modal-content > form.form-horizontal { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; margin: 0; } .modal .modal-content > form > .modal-header, .modal .modal-content > form > .modal-footer, .view_modal .modal-content > form > .modal-header, .view_modal .modal-content > form > .modal-footer { flex-shrink: 0 !important; } .modal .modal-content > form > .modal-body, .view_modal .modal-content > form > .modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } @media (max-width: 767.98px) { .modal .modal-dialog { margin: var(--space-2, 8px) auto; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); width: calc(100% - 16px); } .modal .modal-content { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); } /* Keep body as the touch scroller on phones (not the fixed .modal shell). */ .modal .modal-body, .view_modal .modal-body { overflow-y: auto !important; overflow-x: hidden !important; max-height: none !important; /* flex child fills remaining height */ } } /* ========================================================================== 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. 1. Bootstrap locks `body` via `.modal-open{overflow:hidden}`, but the root `html` element was never locked. 2. Overscroll chaining from inner scrollers to the document. Lock the document while a modal is open; body is the in-modal scroller. ========================================================================== */ body.modal-open { overflow: hidden !important; overscroll-behavior: none; } html:has(body.modal-open) { overflow: hidden !important; } .modal { overscroll-behavior: contain; } /* Fixed overlay can still scroll as a safety net if content exceeds dialog max-height in edge browsers; prefer body scroll via flex rules above. */ .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, #0A1733) !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(30, 58, 111, 0.10); color: var(--primary, #1E3A6F); } .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, #1E3A6F) !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; } } /* ========================================================================== RESPONSIVE DATE-PICKER + SELECT2 BREAKPOINTS ========================================================================== */ /* Tablet + phone: stack daterange ranges above calendars so dual months don't clip */ @media (max-width: 767.98px) { .daterangepicker, .daterangepicker.aio-drp-compact { max-width: calc(100vw - 16px) !important; width: calc(100vw - 16px) !important; box-sizing: border-box !important; } .daterangepicker .ranges, .daterangepicker.aio-drp-compact .ranges { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 0 8px 0 !important; text-align: left !important; } .daterangepicker .ranges ul { width: 100% !important; display: flex ; flex-wrap: wrap ; gap: 4px ; max-height: 9.5rem ; overflow-y: auto ; } .daterangepicker .ranges li { flex: 1 1 auto ; min-width: 42% ; text-align: center ; margin: 0 !important; } .daterangepicker .drp-calendar, .daterangepicker .drp-calendar.left, .daterangepicker .drp-calendar.right { float: none !important; max-width: 100% !important; width: 100% !important; margin: 0 0 8px 0 !important; } .daterangepicker .drp-calendar.right { padding-left: 0 !important; } .daterangepicker .calendar-table { width: 100% !important; } } @media (max-width: 575px) { /* Date-picker / datetimepicker: shrink cells and clamp width on phones. Daterange uses max-width only (not forced width) so calendars can stack. */ .datepicker, .bootstrap-datetimepicker-widget { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; font-size: 0.8125rem !important; } .daterangepicker { max-width: calc(100vw - 16px) !important; font-size: 0.8125rem !important; } .datepicker table td, .datepicker table th, .daterangepicker .calendar-table td, .daterangepicker .calendar-table th, .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th { width: 32px !important; height: 32px !important; line-height: 32px !important; } /* Select2: reduce padding and minimum dropdown width for small screens */ .select2-container--open .select2-dropdown { min-width: 140px !important; font-size: 0.875rem !important; } .select2-search--dropdown .select2-search__field { padding: 6px 8px !important; font-size: 0.875rem !important; } .select2-results__option { padding: 6px 10px !important; font-size: 0.875rem !important; } }