/* Static merged css: shared-tail-8acff57bf939. Source order is preserved. */ /* source: cssjs/Shared/usability/screen-canvas.css; sha256: 1da3269fee05bc9a154b0ab03284bf49c36dbcd294fae87f49bd2bd1512a7559 */ /* الخلفية الخارجية فقط: نفس اللون السادة لمساحة جدول الفاتورة الفارغة. لا تستهدف هذه القواعد البطاقات أو الأزرار أو الخلايا أو قوائم النوافذ. The opt-in belongs to screen-layout; marketing, embedded print documents and printed pages retain their existing design. */ html[data-screen-canvas="flat"] { --alfares-screen-canvas: #edf4f8; } @media screen { html[data-screen-canvas="flat"], html[data-screen-canvas="flat"] body, html[data-screen-canvas="flat"] :is( .my-slider-shell, .my-slider-workspace, .my-slider-content, .my-slider-screen, .my-slider-home, .my-shortcat-page, .my-shortcat-page-shell, .my-document-page, .my-report-page, .data-system-screen, .section-dashboard, .home-dashboard, .items-match, #OprAccounts_Page, #OprItems_Page, .options-page, .permissions-page, .tarefat-page, .hr-visual-page, .hrp-page, .pos2-restaurant-document, .config-setup-page, .auth-shell, .auth-form-panel ):not(.quick-entry-card-root):not([data-quick-entry-mode="true"]) { /* Some legacy root skins use !important or are linked in RenderBody. Restrict the override to these named canvases, never their children. */ background-color: var(--alfares-screen-canvas) !important; background-image: none !important; } /* This is a decorative full-page grid, not a field/card decoration. */ html[data-screen-canvas="flat"] .auth-form-panel::before { background-image: none !important; } } /* source: cssjs/Myshar/css/document-mobile-usability.css; sha256: f195b28fdd9dbefce905d20442b4879f5927c25776bacbcfd2ec48be5b121c10 */ /* Physical phones/tablets only. Desktop sizing, permission visibility and native document events remain owned by their existing components. */ @media screen { /* A wide iPad also scrolls rows, totals and checkout in the same page flow. */ html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]:has([data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) { height: auto; min-height: 100dvh; max-height: none; overflow: visible; } html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]:has([data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) .my-slider-workspace { height: auto; min-height: 0; max-height: none; grid-template-rows: max-content max-content; align-content: start; overflow: visible; } html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]:has([data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) :is(.my-slider-content, .my-slider-screen) { height: auto; min-height: 0; max-height: none; overflow: visible; } html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"] [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]), html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"] [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) > .my-document-shell { height: auto !important; min-height: 0 !important; max-height: none; overflow: visible; } html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"] [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) :is(#tabContent, [data-erp-tab-exclusive], #divOpr, [data-erp-explicit-tab-pane], .sales-invoice-editor-surface, .my-document-main, #divOprInnerTabsContent, #divOprSalesTabPane, [data-document-pane="items"], [data-document-pane="accounts"], [data-document-pane="raw-materials"]) { flex: 0 0 auto; height: auto !important; min-height: 0 !important; max-height: none; overflow: visible; } html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"] [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .sales-invoice-editor-surface:is(.is-totals-bottom, .is-totals-side) { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; } html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"] [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .sales-invoice-editor-surface :is([data-document-pane="items"], [data-document-pane="accounts"], [data-document-pane="raw-materials"]) > :is(.erp-invoice-detail-table-scroll-x, .entag11-table-frame) { flex: 0 0 auto; height: auto !important; min-height: 120px !important; max-height: none !important; } /* The absolute empty state cannot size its frame; reserve its message, hint and add action. */ html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"] [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .sales-invoice-editor-surface :is([data-document-pane="items"], [data-document-pane="accounts"]) > .invoice-lines-table.invoice-lines-is-empty { min-height: 168px !important; } html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-lines-table .my-document-empty-lines:not([hidden]) { inset: 50px 8px 6px !important; gap: 6px !important; padding: 4px !important; } html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-lines-table .my-document-empty-lines .invoice-empty-icon { display: none !important; } html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-lines-table .my-document-empty-lines small { display: block !important; } html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"] [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) :is(.my-document-totals-host, .my-document-totals) { height: auto !important; min-height: 0; max-height: none; overflow: visible; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) { container: document-touch / inline-size; min-width: 0; max-width: 100%; box-sizing: border-box; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-layout, .my-document-layout.is-totals-side, .my-document-main) { grid-template-columns: minmax(0, 1fr) !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-shell, .my-document-panel, .my-document-workspace-tools, .my-document-identity-grid, .my-document-item-search-card, #tabContent, #divOpr, #divOprInnerTabsContent, #divOprSalesTabPane, #divOprTotalsHost, .my-document-totals, .invoice-totals-card) { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .sales-invoice-editor-surface.is-totals-side { height: auto !important; grid-template-rows: auto !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .sales-invoice-editor-surface.is-totals-side :is(.my-document-main, #divOprInnerTabsContent, .my-document-totals-host) { grid-column: 1 !important; grid-row: auto !important; height: auto !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .sales-invoice-editor-surface.is-totals-side > .my-document-main { display: grid !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .sales-invoice-editor-surface.is-totals-side .my-document-totals { height: auto !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .invoice-head-panel .my-document-identity-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important; gap: 8px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-field-grid, .my-document-field-grid.is-compact, .my-document-payment-grid) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-field, .my-document-inline-control, .invoice-party-field-shell, .my-document-workspace-tabs, .my-document-payment-methods) { min-width: 0 !important; max-width: 100%; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-field > span:first-child, .invoice-data-field > span:first-child) { white-space: normal; line-height: 1.4 !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([readonly]):not([disabled]), select:not([disabled]), textarea:not([readonly]):not([disabled])) { font-size: 16px !important; line-height: 1.35 !important; min-height: 44px !important; box-sizing: border-box; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-button, .my-document-icon-button, .my-document-workspace-tabs > button, .my-document-payment-methods > button, .opr-detail-quantity-step, .my-document-context-menu > button, .erp-search-action-menu > button, [data-delete-button]) { min-height: 44px !important; height: auto !important; line-height: 1.35; touch-action: manipulation; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-icon-button, .erp-document-search-button, .opr-detail-quantity-step, [data-delete-button]) { min-width: 44px !important; width: 44px !important; flex-shrink: 0; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .my-document-line-table td:has(> [data-delete-button]) { min-width: 52px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-context-menu, .erp-search-action-menu) > button { font-size: 14px !important; white-space: normal; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-command-strip, .my-document-command-actions, .invoice-totals-actions-host) { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 6px; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .my-document-command-actions > .my-document-button { max-width: 100%; white-space: normal; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-inline-control:has(> #Ser), .voucher-identity-field .erp-document-number-shell, .invoice-head-panel .my-document-inline-control:has(> [data-erp-document-search])) { grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important; grid-template-rows: 44px !important; height: auto !important; min-height: 52px !important; } /* The saved-document report menu is the fifth control of every document number. */ html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-inline-control:has(> #Ser), .erp-document-number-shell):has(> .af-document-report-slot) { grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .invoice-head-panel .invoice-party-field-shell { grid-template-columns: 44px 44px minmax(0, 1fr) 44px !important; grid-template-rows: 44px !important; height: auto !important; min-height: 52px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-date-shell, .af-date-field-shell) { grid-template-columns: minmax(0, 1fr) 44px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .my-document-item-search-card .my-document-search-input-shell { grid-template-columns: 44px minmax(0, 1fr) 44px !important; grid-template-rows: 44px !important; min-height: 52px !important; height: auto !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .my-document-item-search-card .my-document-search-input-shell.barcode-camera-input-shell { grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.my-document-table-wrap, .erp-invoice-detail-table-scroll-x) { min-width: 0 !important; max-width: 100% !important; overflow: auto; touch-action: pan-x pan-y; overscroll-behavior-inline: contain; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(#divOprInnerTabsContent, #divOprSalesTabPane:not([hidden]):not(.d-none).active) { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) #tblOprDetail .opr-detail-quantity-control { grid-template-columns: 44px minmax(76px, 1fr) 44px !important; min-width: 176px !important; gap: 4px; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) #tblOprDetail .opr-detail-quantity-control[data-quantity-step-editable="false"] { grid-template-columns: minmax(76px, 1fr) !important; min-width: 76px !important; } /* The shared row-number layer owns important sizes and grid order. Override its physical and logical tracks in that same layer, on mobile devices only. */ @layer alfares-row-number-more { html[data-mobile-document-device="true"] body [data-document-root] .my-document-line-table :is(.invoice-line-context-trigger[data-row-more-trigger], .voucher-line-context-button) { width: 44px !important; inline-size: 44px !important; min-width: 44px !important; min-inline-size: 44px !important; max-width: 44px !important; max-inline-size: 44px !important; height: 44px !important; block-size: 44px !important; min-height: 44px !important; min-block-size: 44px !important; max-height: 44px !important; max-block-size: 44px !important; flex: 0 0 44px !important; padding: 0 !important; touch-action: manipulation; } html[data-mobile-document-device="true"] body [data-document-root] .my-document-line-table :is(.erp-invoice-row-number-actions, .voucher-line-row-head):not([hidden]):not(.d-none):not([aria-hidden="true"]) { grid-template-columns: minmax(28px, 1fr) 44px !important; gap: 4px !important; min-width: 76px !important; min-inline-size: 76px !important; min-height: 44px !important; min-block-size: 44px !important; height: auto !important; block-size: auto !important; max-height: none !important; max-block-size: none !important; } html[data-mobile-document-device="true"] body [data-document-root] .my-document-line-table :is([data-row-number-more-cell], [data-column-key="idx"], .col-no) { min-width: 88px !important; min-inline-size: 88px !important; } /* The heading column-settings menu and row-number sort share the row touch tracks. */ html[data-mobile-document-device="true"] body [data-document-root] .my-document-line-table thead .invoice-column-settings-header-button[data-header-more-trigger] { width: 44px !important; inline-size: 44px !important; min-width: 44px !important; min-inline-size: 44px !important; max-width: 44px !important; max-inline-size: 44px !important; height: 40px !important; block-size: 40px !important; min-height: 40px !important; min-block-size: 40px !important; flex: 0 0 44px !important; touch-action: manipulation; } html[data-mobile-document-device="true"] body [data-document-root] .my-document-line-table thead .alfares-row-number-more { grid-template-columns: minmax(28px, 1fr) 44px !important; gap: 4px !important; min-height: 40px !important; min-block-size: 40px !important; } html[data-mobile-document-device="true"] body [data-document-root] .my-document-line-table thead [data-row-number] { height: 40px !important; block-size: 40px !important; min-height: 40px !important; line-height: 40px !important; } html[data-mobile-document-device="true"] body [data-document-root] .my-document-line-table thead [data-row-number] > button { min-width: 28px !important; height: 40px !important; min-height: 40px !important; line-height: 40px !important; touch-action: manipulation; } } /* Payment completion: the party buttons use the same 44px touch tracks, so the label takes its own row instead of floating over them. */ html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell[data-invoice-payment-ui="premium"]:not(.pos2-restaurant-document) .opr2-payment-dialog .opr2-payment-party-field { grid-template-rows: auto auto !important; row-gap: 3px !important; } html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell[data-invoice-payment-ui="premium"]:not(.pos2-restaurant-document) .opr2-payment-dialog .opr2-payment-party-field > span:first-child { position: static !important; padding-inline: 4px; font-size: 12px; line-height: 1.4; } html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell[data-invoice-payment-ui="premium"]:not(.pos2-restaurant-document) .opr2-payment-dialog .opr2-payment-party-field-shell { grid-template-columns: 44px 44px minmax(0, 1fr) 44px !important; grid-template-rows: 44px !important; padding-top: 3px !important; } html[data-mobile-document-device="true"] body [data-document-root] :is(.my-document-totals-host, [data-testid="totals-panel"], [data-testid="totals-card"], [data-testid="totals-card-peek"]) { position: static !important; inset: auto !important; transform: none !important; z-index: auto !important; } html[data-mobile-document-device="true"] body [data-document-root] :is([data-opr2-summary-placement], [data-testid="totals-placement-toggle-button"], .invoice-summary-pin-button) { display: none !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .my-document-totals .invoice-actions-grid:not([hidden]):not(.d-none) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important; gap: 6px; width: 100%; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) .my-document-totals .invoice-actions-grid > .my-document-button { width: 100% !important; min-width: 0 !important; min-height: 44px !important; height: auto !important; padding: 8px !important; white-space: normal; font-size: 13px; } html[data-mobile-document-device="true"] body [data-document-root] .my-document-totals .invoice-actions-grid > .my-document-button kbd { display: none; } /* The same native search input is raised with its results, including wide iPad. */ html[data-mobile-document-device="true"] body :is([data-document-root], [data-report-root]) .is-mobile-lookup-source { position: fixed !important; inset: auto !important; left: var(--lookup-source-left, 10px) !important; top: var(--lookup-source-top, 10px) !important; width: var(--lookup-source-width, calc(100vw - 20px)) !important; inline-size: var(--lookup-source-width, calc(100vw - 20px)) !important; min-inline-size: 0 !important; max-inline-size: var(--lookup-source-width, calc(100vw - 20px)) !important; height: var(--lookup-source-height, 44px) !important; min-height: 0 !important; box-sizing: border-box !important; margin: 0 !important; transform: none !important; overflow: visible !important; z-index: 1300 !important; background: var(--my-doc-surface, #fff); border-radius: 12px; box-shadow: 0 3px 12px rgba(20, 45, 80, .1); } html[data-mobile-document-device="true"] body :is([data-document-root], [data-report-root]) .is-mobile-lookup-source::backdrop { background: transparent !important; pointer-events: none !important; } html[data-mobile-document-device="true"] body :is([data-document-root], [data-report-root]) .document-lookup-source-slot { pointer-events: none; visibility: hidden; } html[data-mobile-document-device="true"] body [data-voucher-account-search-host].is-mobile-lookup-source { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; padding: 0 !important; border: 0 !important; } html[data-mobile-document-device="true"] body [data-voucher-account-search-host].is-mobile-lookup-source > .item-search-field { width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; grid-template-rows: minmax(0, 1fr) !important; } html[data-mobile-document-device="true"] body [data-voucher-account-search-host].is-mobile-lookup-source .my-document-search-input-shell { width: 100% !important; height: 100% !important; min-height: 44px !important; padding: 3px !important; box-sizing: border-box; align-items: center; } html[data-mobile-document-device="true"] body [data-voucher-account-search-host].is-mobile-lookup-source input[data-voucher-account-search-input] { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 44px !important; } /* A filtered ancestor shifts fixed descendants out of the visual viewport. */ html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Keep the original raised input; its hidden mirror still drives native queries. */ html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source) #VoucherAccountSearchModal#VoucherAccountSearchModal .voucher-account-menu-search { display: none !important; } html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source) #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-voucher-account-search-premium-box { grid-template-rows: minmax(0, 1fr) !important; } html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source) #VoucherAccountSearchModal#VoucherAccountSearchModal .voucher-account-menu-toolbar { position: absolute; inset-block-start: 8px; inset-inline-end: 10px; z-index: 6; width: 44px; height: 44px; padding: 0 !important; } html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source) #VoucherAccountSearchModal#VoucherAccountSearchModal [data-voucher-account-search-close] { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; touch-action: manipulation; } html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source) #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-toolbar { padding-inline-end: 58px !important; grid-template-columns: 78px minmax(0, 1fr) 44px 96px !important; } html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal :is(.erp-item-search-view-button, .erp-item-search-density-toggle) { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-view-switch { width: 96px !important; grid-template-columns: repeat(2, 44px) !important; } html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-filter .my-report-select-combobox.my-document-select-combobox > button.my-report-select-button { min-height: 44px !important; height: 44px !important; font-size: 16px !important; } html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-filter .my-report-select-button > .my-report-select-value { display: block !important; } /* Native keyboard mode hides filters; reserve the close row above the table. */ html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source) #VoucherAccountSearchModal#VoucherAccountSearchModal[data-account-search-keyboard="true"] .erp-voucher-account-search-premium-box { grid-template-rows: 52px minmax(0, 1fr) !important; } html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source) #VoucherAccountSearchModal#VoucherAccountSearchModal[data-account-search-keyboard="true"] .voucher-account-menu-toolbar { position: static; inset: auto; width: 100%; height: 52px; padding: 4px 10px !important; box-sizing: border-box; justify-content: flex-end; } html[data-mobile-document-device="true"] body .pos2-restaurant-document .restaurant-categories-panel .category-strip button:is(.is-active, .myButton_custom_Cat_clicked) { background: var(--my-doc-chip-bg, #e8f1f5) !important; background-image: none !important; border-color: var(--my-doc-primary, #123f60) !important; color: var(--my-doc-primary, #123f60) !important; } html[data-mobile-document-device="true"] body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage :is(.cart-order-type-strip, .invoice-action-order-types) .workspace-order-type[data-pos2-order-type] { background: var(--my-doc-chip-bg, #e8f1f5) !important; background-image: none !important; border-color: var(--my-doc-primary, #123f60) !important; color: var(--my-doc-primary, #123f60) !important; } html[data-mobile-document-device="true"] body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage :is(.cart-order-type-strip, .invoice-action-order-types) .workspace-order-type[data-pos2-order-type].is-active { background: var(--my-doc-primary, #123f60) !important; background-image: none !important; color: #fff !important; } @media (max-width: 620px) { html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source) #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-toolbar { padding-inline-end: 7px !important; grid-template-columns: minmax(68px, 1fr) 44px 96px !important; } html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source) #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-filter { padding-inline-end: 52px !important; } } /* Dialogs retain their native visibility and scroll owners while the keyboard opens. */ html[data-mobile-document-device="true"]:has([data-document-root]) [data-alfares-mobile-overlay], html[data-mobile-document-device="true"] .alfares-quick-entry-frame [data-alfares-mobile-overlay] { max-block-size: calc(var(--alfares-visual-viewport-height) - var(--alfares-safe-area-top) - var(--alfares-safe-area-bottom) - 12px); } html[data-mobile-document-device="true"]:has([data-document-root]) [data-alfares-mobile-overlay] [data-alfares-overlay-header] { position: sticky; inset-block-start: 0; z-index: 6; } html[data-mobile-document-device="true"]:has([data-document-root]) [data-alfares-mobile-overlay] [data-alfares-overlay-footer] { position: sticky; inset-block-end: 0; z-index: 5; padding-block-end: max(8px, var(--alfares-safe-area-bottom)); } html[data-mobile-document-device="true"]:has([data-document-root]) .modal[data-alfares-mobile-overlay] { position: fixed; top: var(--alfares-visual-viewport-offset-top, 0px); right: auto; bottom: auto; left: var(--alfares-visual-viewport-offset-left, 0px); width: var(--alfares-visual-viewport-width, 100vw); inline-size: var(--alfares-visual-viewport-width, 100vw); block-size: var(--alfares-visual-viewport-height); max-inline-size: none; max-block-size: none; padding-block-start: var(--alfares-safe-area-top); padding-block-end: var(--alfares-safe-area-bottom); } html[data-mobile-document-device="true"]:has([data-document-root]) .modal[data-alfares-mobile-overlay] .modal-dialog { max-block-size: calc(var(--alfares-visual-viewport-height) - var(--alfares-safe-area-top) - var(--alfares-safe-area-bottom) - 16px); margin-block: 8px; } html[data-mobile-document-device="true"]:has([data-document-root]) .modal[data-alfares-mobile-overlay] .modal-content { max-block-size: inherit; overflow: hidden; } html[data-mobile-document-device="true"] body.alfares-quick-entry-frame :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([readonly]):not([disabled]), select:not([disabled]), textarea:not([readonly]):not([disabled])), html[data-mobile-document-device="true"] body.alfares-quick-entry-frame :is(#OprItems_Page, #OprAccounts_Page, #OprUnites_Page, #OprMsader_Page, #OprMrTklfa_Page, #OprBarcode_Page, [data-categories-root], [data-activities-root]) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([readonly]):not([disabled]), select:not([disabled]), textarea:not([readonly]):not([disabled])) { font-size: 16px !important; min-height: 44px !important; } html[data-mobile-document-device="true"] body.alfares-quick-entry-frame :is(#OprItems_Page, #OprAccounts_Page, #OprUnites_Page, #OprMsader_Page, #OprMrTklfa_Page, #OprBarcode_Page, [data-categories-root], [data-activities-root]) :is(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) { min-width: 44px !important; min-height: 44px !important; height: auto !important; touch-action: manipulation; } html[data-mobile-document-device="true"].alfares-keyboard-open:has([data-document-root]) :is([data-alfares-overlay-scroll], .my-slider-screen, .my-slider-content) { scroll-padding-block-start: calc(var(--alfares-safe-area-top) + 12px); scroll-padding-block-end: calc(var(--alfares-safe-area-bottom) + 20px); } @container document-touch (max-width: 560px) { html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) :is(.invoice-head-panel .my-document-identity-grid, .my-document-workspace-tools) { grid-template-columns: minmax(0, 1fr) !important; } } } /* source: cssjs/Shared/usability/touch-compat.css; sha256: 08aa4f6cca4ef95ff4c7ece0699767eb4d0416dd9ac988f2a8d9471c757c1fdc */ /* System touch layer for phones and tablets. Desktop pointers keep every existing size. */ @media screen and (pointer: coarse) { /* A scrolled list must not pull the whole screen into a reload or a bounce. */ html, body { overscroll-behavior-y: contain; } /* Application controls do not show the grey tap flash or the long-press sheet. */ :where(button, [role="button"], [role="menuitem"], [role="tab"], a[href], label, summary) { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { -webkit-tap-highlight-color: transparent; } } /* Row menus of reports and setup grids share the document-line touch size. Document line tables already carry their own 44px tracks. */ @layer alfares-row-number-more { html[data-mobile-document-device="true"] :is(.my-report-data-table, .my-report-html-mini-table, .sellers-table, .units-table, .fp-table, .items-units-detail-table) :is(.report-row-menu-trigger, .report-row-bulk-trigger, .sellers-row-select, .unit-settings-trigger, .items-row-action, [data-row-more-trigger], [data-header-more-trigger]) { width: 36px !important; inline-size: 36px !important; min-width: 36px !important; min-inline-size: 36px !important; max-width: 36px !important; max-inline-size: 36px !important; height: 36px !important; block-size: 36px !important; min-height: 36px !important; min-block-size: 36px !important; flex: 0 0 36px !important; touch-action: manipulation; } html[data-mobile-document-device="true"] :is(.my-report-data-table, .my-report-html-mini-table, .sellers-table, .units-table, .fp-table, .items-units-detail-table) :is(.alfares-row-number-more, .report-row-number-actions-group, .opr-unit-row-anchor) { grid-template-columns: minmax(0, 1fr) 36px !important; min-height: 36px !important; } html[data-mobile-document-device="true"] :is(.my-report-data-table, .my-report-html-mini-table, .sellers-table, .units-table, .fp-table, .items-units-detail-table) :is([data-row-number], [data-business-number]) { height: 36px !important; block-size: 36px !important; min-height: 36px !important; line-height: 36px !important; } html[data-mobile-document-device="true"] :is([data-row-more-trigger], [data-header-more-trigger], .erp-invoice-row-number-actions > .erp-detail-row-toggle, .voucher-line-context-button, .opr-unit-row-anchor > .items-row-action, .unit-settings-trigger, .my-document-line-table .invoice-column-settings-header-button) svg { width: 16px !important; height: 16px !important; } /* POS phone line-table header: the same 32px tracks as the phone sales-invoice header. */ @media screen and (max-width: 767px) { html[data-mobile-document-device="true"] body #OprDocumentRoot.pos2-restaurant-document .my-document-line-table thead .invoice-column-settings-header-button[data-header-more-trigger] { width: 26px !important; inline-size: 26px !important; min-width: 26px !important; min-inline-size: 26px !important; max-width: 26px !important; max-inline-size: 26px !important; height: 32px !important; block-size: 32px !important; min-height: 32px !important; min-block-size: 32px !important; flex: 0 0 26px !important; } html[data-mobile-document-device="true"] body #OprDocumentRoot.pos2-restaurant-document .my-document-line-table thead .alfares-row-number-more { grid-template-columns: minmax(24px, 1fr) 26px !important; gap: 2px !important; min-height: 32px !important; min-block-size: 32px !important; } html[data-mobile-document-device="true"] body #OprDocumentRoot.pos2-restaurant-document .my-document-line-table thead [data-row-number] { height: 32px !important; block-size: 32px !important; min-height: 32px !important; line-height: 32px !important; } html[data-mobile-document-device="true"] body #OprDocumentRoot.pos2-restaurant-document .my-document-line-table thead [data-row-number] > button { min-width: 24px !important; height: 32px !important; min-height: 32px !important; line-height: 32px !important; } } } /* Phone documents keep their compact chrome, with topbar controls at the touch minimum. */ @media screen and (max-width: 767px) and (pointer: coarse) { html[data-mobile-document-device="true"] body .my-slider-shell:has(:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) { --my-shell-topbar-h: calc(42px + var(--alfares-safe-area-top, 0px)); } html[data-mobile-document-device="true"] body .my-slider-shell:has(:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) #MySalahReport_Navbar :is(.my-slider-icon-button, .my-nav-action:not(.my-nav-upgrade-cta), .my-nav-user) { width: 36px !important; min-width: 36px !important; min-inline-size: 36px !important; height: 36px !important; min-height: 36px !important; min-block-size: 36px !important; border-radius: 7px !important; } html[data-mobile-document-device="true"] body .my-slider-shell:has(:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) #MySalahReport_Navbar .my-nav-upgrade-cta { height: 36px !important; min-height: 36px !important; min-block-size: 36px !important; font-size: 9px; } html[data-mobile-document-device="true"] body .my-slider-shell:has(:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) #MySalahReport_Navbar :is(.my-slider-icon-button, .my-nav-action, .my-nav-user) > svg { width: 16px !important; height: 16px !important; } html[data-mobile-document-device="true"] body .my-slider-shell:has(:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) #MySalahReport_Navbar .my-nav-user > span { width: 24px; height: 24px; font-size: 12px; } html[data-mobile-document-device="true"] body .my-slider-shell:has(:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) #MySalahReport_Navbar .af-ui-language-trigger { grid-template-rows: 15px 12px; } html[data-mobile-document-device="true"] body .my-slider-shell:has(:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) #MySalahReport_Navbar .af-ui-language-trigger > span { font-size: 11px !important; } } /* Readable text and icons on touch devices. Each rule only raises a size below 11px or an icon below 16px; laptops keep the original values. */ /* Shell topbar */ html[data-mobile-document-device="true"] .my-nav-clock-day { font-size: 11px; } html[data-mobile-document-device="true"] .my-nav-clock-period { font-size: 11px; } html[data-mobile-document-device="true"] .my-nav-clock-copy small { font-size: 11px; } html[data-mobile-document-device="true"] .af-ui-language-trigger span, html[data-mobile-document-device="true"] #MySalahReport_Navbar .af-ui-language-trigger span { font-size: 11px; } html[data-mobile-document-device="true"] .my-footer-status b { white-space: normal; overflow: visible; text-overflow: clip; } /* Dashboards */ html[data-mobile-document-device="true"] .section-dashboard .section-finance-tabs { min-height: 44px; } html[data-mobile-document-device="true"] .section-dashboard .section-finance-tab { min-height: 36px; gap: 6px; padding: 5px 11px; font-size: 11.5px; } html[data-mobile-document-device="true"] .section-dashboard .section-finance-tab__icon { width: 22px; height: 22px; flex-basis: 22px; } html[data-mobile-document-device="true"] .section-dashboard .section-finance-tab__icon svg { width: 16px; height: 16px; } html[data-mobile-document-device="true"] .section-dashboard-premium .dashboard-card-deck__tab { min-height: 34px; padding: 4px 10px; font-size: 11px; } html[data-mobile-document-device="true"] .section-dashboard-premium .dashboard-card-deck__title { max-width: 128px; font-size: 11.5px; } html[data-mobile-document-device="true"] .section-dashboard-premium .dashboard-card-deck__icon svg { width: 16px; height: 16px; } html[data-mobile-document-device="true"] .section-dashboard-premium .dashboard-chart-tabs__tab { min-height: 36px; padding: 4px 9px; font-size: 11px; white-space: normal; text-align: center; } html[data-mobile-document-device="true"] .section-dashboard-premium .dashboard-chart-tabs__rank { min-width: 22px; height: 22px; font-size: 11px; } html[data-mobile-document-device="true"] .section-dashboard-premium .dashboard-chart-tabs__label { max-width: none; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; } /* Phones: chart tabs keep one line each and the row scrolls sideways. */ @media (max-width: 767px) { html[data-mobile-document-device="true"] .section-dashboard-premium .dashboard-chart-tabs__list { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; } html[data-mobile-document-device="true"] .section-dashboard-premium .dashboard-chart-tabs__tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; } html[data-mobile-document-device="true"] .section-dashboard-premium .dashboard-chart-tabs__label { white-space: nowrap; } } html[data-mobile-document-device="true"] .section-dashboard-premium .section-summary-card__lines:not([data-operation-ledger="true"]) :is(dt, dd) { font-size: 11px; } html[data-mobile-document-device="true"] .section-dashboard-premium :is(.section-summary-visual__legend-item, .section-summary-visual__legend-label) { font-size: 11.5px; } html[data-mobile-document-device="true"] .dashboard-premium-tooltip__item { font-size: 11.5px; } html[data-mobile-document-device="true"] .section-dashboard-premium .section-summary-card__trend, html[data-mobile-document-device="true"] .section-dashboard-premium .section-summary-card.dashboard-runtime-card .section-summary-card__value-row > .section-summary-card__trend { min-height: 20px; font-size: 11px; } html[data-mobile-document-device="true"] .section-dashboard-premium .section-summary-visual__axis { font-size: 9px; } html[data-mobile-document-device="true"] .section-dashboard-premium .section-summary-visual__zero-note { font-size: 11px; } html[data-mobile-document-device="true"] .section-dashboard-premium .section-summary-visual__empty small { font-size: 11px; } html[data-mobile-document-device="true"] .section-dashboard-premium .section-summary-visual__insight { font-size: 11px; } html[data-mobile-document-device="true"] .section-dashboard-premium .section-summary-visual__insight > strong { font-size: 12px; } html[data-mobile-document-device="true"] .dashboard-switcher-trigger__cue span { font-size: 11px; } html[data-mobile-document-device="true"] .dashboard-runtime__status { font-size: 11px; } html[data-mobile-document-device="true"] .section-dashboard-filter__date-trigger svg { width: 17px; height: 17px; } html[data-mobile-document-device="true"] .section-dashboard-filter__date-field > span { font-size: 11px; } html[data-mobile-document-device="true"] .dashboard-runtime__refresh { min-height: 36px; font-size: 11px; } html[data-mobile-document-device="true"] .dashboard-runtime__refresh svg { width: 16px; height: 16px; } html[data-mobile-document-device="true"] .my-footer-brand strong { font-size: 11px; } /* Reports */ html[data-mobile-document-device="true"] .my-report-actions-band :is(.my-report-button, .my-report-primary-button, .my-report-filter-button) > svg { flex-basis: 16px; width: 16px; height: 16px; } html[data-mobile-document-device="true"] .my-report-actions-band .my-report-date-field button svg, html[data-mobile-document-device="true"] .my-report-date-input-shell button svg { width: 16px; height: 16px; } html[data-mobile-document-device="true"] .my-report-html-kpi span { font-size: 11px; } html[data-mobile-document-device="true"] .my-report-sort-mark { font-size: 11px; } html[data-mobile-document-device="true"] .my-report-html-sort-mark { font-size: 11px; } html[data-mobile-document-device="true"] .my-report-label { font-size: 11px; } html[data-mobile-document-device="true"] .my-document-line-table thead th { font-size: 11px; } html[data-mobile-document-device="true"] .my-document-line-table thead th [data-invoice-sort-mark] { font-size: 11px; } html[data-mobile-document-device="true"] .af-map-toolbar-metric { font-size: 11px; } html[data-mobile-document-device="true"] .af-map-button svg { width: 16px; height: 16px; } html[data-mobile-document-device="true"] .af-premium-map-root .af-premium-map--report .af-map-status, html[data-mobile-document-device="true"] .af-premium-map-root .af-premium-map--editor .af-map-status { font-size: 11px; white-space: normal; overflow: visible; text-overflow: clip; } html[data-mobile-document-device="true"] .party-map-page__field > :is(label, span) { font-size: 11px; } html[data-mobile-document-device="true"] .price-name-cell small { font-size: 11px; } html[data-mobile-document-device="true"] .price-status { font-size: 11px; } html[data-mobile-document-device="true"] .price-row-open { width: 36px; height: 36px; } html[data-mobile-document-device="true"] .price-row-open svg { width: 16px; height: 16px; } html[data-mobile-document-device="true"] .price-payment-group span { min-height: 40px; font-size: 11px; } html[data-mobile-document-device="true"] .price-compact-field span { font-size: 11px; } html[data-mobile-document-device="true"] .party-map-report-tab { min-height: 36px; } html[data-mobile-document-device="true"] .template-entry-meta { font-size: 11.5px; } /* Setup screens */ html[data-mobile-document-device="true"] :is(.activities-field, .categories-field, .barcode-field) > span:first-child { font-size: 11px; } html[data-mobile-document-device="true"] .barcode-position-row strong { font-size: 11px; } html[data-mobile-document-device="true"] .barcode-position-head :is(span, th) { font-size: 11px; } html[data-mobile-document-device="true"] .barcode-toggle { font-size: 11px; } html[data-mobile-document-device="true"] .barcode-panel-title > div > span { font-size: 11px; } html[data-mobile-document-device="true"] .barcode-preview-meta dt { font-size: 10.5px; } html[data-mobile-document-device="true"] .barcode-preview-meta dd { font-size: 11px; } html[data-mobile-document-device="true"] :is(.units-table, .sellers-table, .sources-table, .akdband-table, .activities-table, .categories-table, .locations-table) th { font-size: 11px; } html[data-mobile-document-device="true"] :is(.units-mode-badge, .units-list-count, .sellers-mode-badge, .sellers-list-count, .sources-mode-badge, .sources-list-count, .akdband-mode-badge, .akdband-list-count, .locations-mode-badge, .categories-list-count, .categories-mode-badge, .price-mode-badge, .price-list-count) { font-size: 11px; } html[data-mobile-document-device="true"] .sellers-control-suffix { font-size: 11px; } html[data-mobile-document-device="true"] .sellers-map-tab span { font-size: 11px; } html[data-mobile-document-device="true"] .sellers-map-tab small { font-size: 10px; } html[data-mobile-document-device="true"] .tax-identity-field-hint { font-size: 11px; } html[data-mobile-document-device="true"] .options-panel-heading span { font-size: 11px; } html[data-mobile-document-device="true"] .options-card-heading p { font-size: 11px; } html[data-mobile-document-device="true"] .cost-centers-field > span:first-child, html[data-mobile-document-device="true"] .cost-centers-field--activity > span:first-child, html[data-mobile-document-device="true"] .cost-centers-filter > span { font-size: 11px; } html[data-mobile-document-device="true"] .cost-centers-field small { font-size: 10.5px; } html[data-mobile-document-device="true"] .cost-centers-table th { font-size: 11px; } html[data-mobile-document-device="true"] .tarefat-tab small { font-size: 11px; } html[data-mobile-document-device="true"] #OprAccounts_Page .accounts-typed-records-table th { font-size: 11px; } html[data-mobile-document-device="true"] .branches-maintenance-tools button { font-size: 11px; } html[data-mobile-document-device="true"] .branches-row-provision .is-on { font-size: 10.5px; } html[data-mobile-document-device="true"] .bot-settings-toggle-row small { font-size: 10.5px; } html[data-mobile-document-device="true"] .hri-summary :is(span, small) { font-size: 11px; } html[data-mobile-document-device="true"] .alfares-support-city, html[data-mobile-document-device="true"] .alfares-support-menu .alfares-support-city { font-size: 11px; } html[data-mobile-document-device="true"] #OprItems_Page .items-editor-tab svg { width: 16px !important; height: 16px !important; } @media (max-width: 640px) { /* Cost centers page grows with its editor like the other setup screens. */ html[data-mobile-document-device="true"] .cost-centers-page { height: auto; min-height: 0; max-height: none; overflow: visible; } html[data-mobile-document-device="true"] .cost-centers-workspace { height: auto; grid-template-rows: auto auto; } html[data-mobile-document-device="true"] .cost-centers-form { overflow: visible; } html[data-mobile-document-device="true"] .cost-centers-form-scroll { overflow-y: visible; } html[data-mobile-document-device="true"] .cost-centers-list { min-block-size: 280px; } html[data-mobile-document-device="true"] .cost-centers-list-body { min-height: 200px; } html[data-mobile-document-device="true"] .cost-centers-table-viewport { height: auto; min-height: 200px; max-height: 70dvh; } } html[data-mobile-document-device="true"] :is(.units-button, .sellers-button, .sources-button, .akdband-button, .activities-button, .categories-button, .locations-button) svg { inline-size: 16px; block-size: 16px; } html[data-mobile-document-device="true"] :is(.units-record-nav, .sellers-record-nav, .sources-record-nav, .akdband-record-nav, .locations-record-nav, .categories-record-nav, .activities-record-nav, .price-record-nav) button { inline-size: 36px; block-size: 34px; } html[data-mobile-document-device="true"] :is(.units-record-nav, .sellers-record-nav, .sources-record-nav, .akdband-record-nav, .locations-record-nav, .categories-record-nav, .activities-record-nav, .price-record-nav) button svg { inline-size: 16px; block-size: 16px; width: 16px; height: 16px; } html[data-mobile-document-device="true"] .akdband-move-button { inline-size: 36px; block-size: 32px; } html[data-mobile-document-device="true"] .akdband-move-button svg { inline-size: 16px; block-size: 16px; width: 16px; height: 16px; } html[data-mobile-document-device="true"] .options-tab-count { font-size: 11px; } html[data-mobile-document-device="true"] .options-tab b { font-size: 12px; } html[data-mobile-document-device="true"] .options-subtab svg { width: 16px; height: 16px; } html[data-mobile-document-device="true"] #OprAccounts_Page .accounts-editor-tabs .items-editor-tab { font-size: 11px; } html[data-mobile-document-device="true"] #OprAccounts_Page .accounts-editor-tabs .items-editor-tab svg { width: 14px; height: 14px; flex-basis: 14px; } @media (max-width: 640px) { html[data-mobile-document-device="true"] :is(.units-field, .sellers-field, .sources-field, .akdband-field) > span:first-child { font-size: 11px; } html[data-mobile-document-device="true"] :is(.units-control, .sellers-control, .sources-control, .akdband-control) { min-block-size: 38px; } html[data-mobile-document-device="true"] :is(.units-control, .sellers-control, .sources-control, .akdband-control) :is(input, select, textarea) { min-block-size: 36px; font-size: 11.5px; } html[data-mobile-document-device="true"] :is(.units-control, .sellers-control, .sources-control, .akdband-control) > svg { inline-size: 16px; block-size: 16px; } } /* Permissions */ html[data-mobile-document-device="true"] .permissions-tab b { font-size: 12px; } html[data-mobile-document-device="true"] .permissions-tab em { min-width: 30px; height: 22px; font-size: 11px; } html[data-mobile-document-device="true"] .permissions-functional-tabs-shell { height: 48px; } html[data-mobile-document-device="true"] .permissions-functional-tabs { height: 40px; } html[data-mobile-document-device="true"] .permissions-functional-tab { height: 38px; font-size: 11px; } html[data-mobile-document-device="true"] .permissions-functional-tab output { font-size: 11px; } html[data-mobile-document-device="true"] .permission-row-copy b { font-size: 11.5px; } html[data-mobile-document-device="true"] :is(.permission-role-label, .permission-risk-label) { font-size: 10px; } html[data-mobile-document-device="true"] .permissions-table-head > span { font-size: 10px; } html[data-mobile-document-device="true"] .permissions-grade-trigger small { font-size: 9.5px; } html[data-mobile-document-device="true"] .permissions-grade-trigger b { font-size: 11px; } html[data-mobile-document-device="true"] .permissions-current-user-copy strong { font-size: 11.5px; } html[data-mobile-document-device="true"] .permissions-footer-actions button { min-height: 36px; font-size: 11px; } /* Human resources: readable labels, codes and names that wrap instead of clipping, with a code column wide enough for one-line codes on tablets and content-sized on phones. */ html[data-mobile-document-device="true"] .hrw-status { font-size: 11px; } html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page .hrw-stat-strip small, html[data-mobile-document-device="true"] .hrw-stat-strip small { font-size: 11.5px; } html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page .hr-visual-summary-card small { font-size: 11px; } html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page .hr-visual-panel-head small { font-size: 11px; } html[data-mobile-document-device="true"] .hrw-tabs b { font-size: 11px; } html[data-mobile-document-device="true"] .hrw-kicker { font-size: 11px; } html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page :is(.hr-visual-kicker, .hr-visual-title-meta) { height: 20px; font-size: 10.5px; } html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page :is(.hr-visual-field > span, .hr-visual-field-label) { font-size: 11px; line-height: 13px; } html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hrshift-page .hrshift-filter-band .hr-visual-check { font-size: 11px; } html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page .hr-table-column-head { font-size: 11px; } html[data-mobile-document-device="true"] .hrw-shift-code { padding: 4px 5px; font-size: 11px; line-height: 1.2; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; } html[data-mobile-document-device="true"] .hrw-master-copy strong { line-height: 1.25; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; } html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page :is(.hrlt-entitlement-cell, .hrlt-paid-cell, .hrshift-period-count, .hrshift-duration, .hrlt-master-item > .hrw-status, .hrshift-directory-card .hrw-master-item > .hr-visual-status) { font-size: 11px; white-space: normal; overflow: visible; text-overflow: clip; } html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hrlt-page .hrlt-master-item, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hrlt-page.hrlt-page.hr-table-first-page .hrlt-master-item, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hrshift-page .hrshift-directory-card .hrw-master-item { height: auto; } @media (min-width: 1181px) { html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page .hrlt-column-head, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page .hrlt-master-item, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page .hrshift-column-head, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page .hrshift-directory-card .hrw-master-item { grid-template-columns: 104px minmax(96px, 1fr) 76px 78px 70px; } } @media (min-width: 601px) and (max-width: 1180px) { html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page .hrlt-column-head, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page .hrlt-master-item, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page .hrshift-column-head, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page .hrshift-directory-card .hrw-master-item { grid-template-columns: 104px minmax(84px, 1fr) 70px 68px; } } @media (max-width: 600px) { html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hr-table-first-page :is(.hrlt-master-item, .hrshift-directory-card .hrw-master-item), html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hrlt-page.hrlt-page.hr-table-first-page .hrlt-master-item, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hrlt-page .hrlt-master-item, html[data-mobile-document-device="true"] .hr-visual-page.hr-visual-page.hrshift-page .hrshift-directory-card .hrw-master-item { grid-template-columns: max-content minmax(0, 1fr) auto; flex: 0 0 auto; min-width: min(210px, 72vw); } html[data-mobile-document-device="true"] .hr-visual-page .hrw-shift-code { white-space: nowrap; overflow-wrap: normal; } } @media (max-width: 520px) { html[data-mobile-document-device="true"] :is(.hrlt-page .hrlt-master-item, .hrshift-page .hrshift-directory-card .hrw-master-item) .hrw-master-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Documents on tablets keep the full layout with 16px command icons. */ @media (min-width: 768px) { html[data-mobile-document-device="true"] body :is(.my-document-button, .my-document-icon-button) svg { width: 16px !important; height: 16px !important; } } /* Phone documents: 34px inputs, 36px controls, 38px lines, 11px labels, 13px values. The shared field-icon sheet sizes field actions and their glyphs through these variables. */ @media screen and (max-width: 767px) { html[data-mobile-document-device="true"] { --alfares-mobile-field-action: 36px; --alfares-mobile-field-glyph: 16px; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot).erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) { --phone-document-control: 36px; --phone-document-input: 34px; --phone-document-row: 38px; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-command-actions > .my-document-button:not([hidden]):not(.d-none) { font-size: 10px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .document-phone-tab > b { min-width: 15px; height: 15px; font-size: 10px; line-height: 15px; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel .my-document-field:not(.my-document-party-field):not(:dir(ltr)) { grid-template-columns: 60px minmax(0, 1fr); } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel .my-document-field > span:first-child { font-size: 11px !important; line-height: 1.2; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel :is(input:not([type="hidden"]), select:not(.is-enhanced)) { font-size: 13px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel :is(.my-document-inline-control, .erp-document-number-shell) { grid-template-columns: 36px minmax(0, 1fr) 36px 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel :is(.my-document-inline-control, .erp-document-number-shell):has(> .af-document-report-slot) { grid-template-columns: 36px 36px minmax(0, 1fr) 36px 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel .invoice-party-field-shell { grid-template-columns: 36px 36px minmax(0, 1fr) 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel :is(.my-document-date-shell, .af-date-field-shell) { grid-template-columns: minmax(0, 1fr) 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) :is(.invoice-head-panel, .my-document-item-search-card) .my-document-icon-button { min-width: 36px !important; width: 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) :is(.invoice-head-panel, .my-document-item-search-card) .my-document-icon-button svg { width: 16px !important; height: 16px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-payment-methods > button { font-size: 11px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-payment-methods svg { width: 16px !important; height: 16px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-item-search-card .my-document-search-input-shell { grid-template-columns: 36px minmax(0, 1fr) 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-item-search-card .my-document-search-input-shell.barcode-camera-input-shell { grid-template-columns: 36px minmax(0, 1fr) 36px 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-item-search-card input { font-size: 13px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-item-search-card input::placeholder { font-size: 11px; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail { font-size: 12px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail :is(th, td)[data-column-key="quantity"] { min-width: 90px !important; width: 90px !important; } html[data-mobile-document-device="true"] body [data-document-root]#SndatDocumentRoot #tblOprDetail :is(th, td)[data-column-key="branch"] { min-width: 132px !important; width: 132px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) :is(#tblOprDetail, .my-document-line-table) tbody :is(button:not(.opr-detail-quantity-step):not(:where([role="menu"] *)), .erp-detail-row-actions) { height: 28px !important; min-height: 28px !important; max-height: 28px !important; block-size: 28px !important; min-block-size: 28px !important; max-block-size: 28px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail :is(input:not([type="hidden"]), select, textarea) { min-height: 28px !important; height: 28px !important; font-size: 12px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail :is(input[readonly], [data-item-name], [data-account-name], [data-code-input]) { font-size: 12px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail thead th { height: 34px !important; font-size: 11px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail thead button { min-height: 32px !important; font-size: 11px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail .opr-detail-quantity-control { height: 30px !important; grid-template-columns: 24px minmax(26px, 1fr) 24px !important; min-width: 76px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail .opr-detail-quantity-step { min-width: 24px !important; width: 24px !important; min-height: 28px !important; height: 28px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) :is(.my-document-command-actions, .invoice-actions-grid) > .my-document-button > svg { width: 16px !important; height: 16px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-totals .invoice-actions-grid > .my-document-button:not([hidden]):not(.d-none) { font-size: 10px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-totals [data-summary-kind="net"] { padding-inline-end: 76px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-summary-action-controls { inset-block-start: 3px; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-summary-action-controls > .my-document-icon-button:not(.document-phone-totals-toggle):not(.invoice-summary-pin-button):not([data-opr2-summary-placement]):not([data-testid="totals-placement-toggle-button"]):not([hidden]):not(.d-none), html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-totals:has([data-summary-kind="net"]) .invoice-summary-action-controls > .document-phone-totals-toggle:not([hidden]):not(.d-none) { min-height: 32px !important; height: 32px !important; min-width: 32px !important; width: 32px !important; } /* Notices */ html[data-mobile-document-device="true"] body [data-document-root]#AccountingNoticeDocumentRoot .my-document-workspace-tabs > button { font-size: 11px !important; } html[data-mobile-document-device="true"] body [data-document-root]#AccountingNoticeDocumentRoot .my-document-workspace-tabs > button > svg { width: 16px !important; height: 16px !important; } html[data-mobile-document-device="true"] body [data-document-root]#AccountingNoticeDocumentRoot .my-document-line-table { font-size: 12px !important; } html[data-mobile-document-device="true"] body [data-document-root]#AccountingNoticeDocumentRoot .my-document-line-table :is(th, td) { height: 30px !important; } html[data-mobile-document-device="true"] body [data-document-root]#AccountingNoticeDocumentRoot .my-document-line-table thead th { height: 26px !important; font-size: 10px !important; } html[data-mobile-document-device="true"] body [data-document-root]#AccountingNoticeDocumentRoot .my-document-line-table .af-notice-name-shell { grid-template-columns: minmax(0, 1fr) 28px !important; min-height: 28px !important; height: 28px !important; } @layer alfares-phone-document-controls { html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel .af-document-number-report-field:has(> .af-document-report-slot) { grid-template-columns: 36px 36px minmax(0, 1fr) 36px 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel .af-document-report-slot { inline-size: 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel .af-document-report-toggle { min-inline-size: 34px !important; inline-size: 34px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel :is(.my-report-select-button, .my-report-select-value) { font-size: 13px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel .invoice-party-field-shell:dir(ltr) { grid-template-columns: 36px minmax(0, 1fr) 36px 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-head-panel :is(input:not([type="hidden"]), select:not(.is-enhanced)) { font-size: 13px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-item-search-card input { font-size: 13px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail :is(input:not([type="hidden"]), select, textarea) { min-height: 28px !important; height: 28px !important; font-size: 12px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail :is(input[readonly], [data-item-name], [data-account-name], [data-code-input]) { font-size: 12px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) :is(.invoice-head-panel, .my-document-item-search-card) .my-document-icon-button { min-width: 36px !important; width: 36px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-payment-methods > button { font-size: 11px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail .opr-detail-quantity-step { min-width: 24px !important; width: 24px !important; min-height: 28px !important; height: 28px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail .opr-detail-quantity-control input { min-height: 26px !important; height: 26px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .invoice-summary-action-controls > :is(.my-document-icon-button, .document-phone-totals-toggle) { min-width: 32px !important; width: 32px !important; min-height: 32px !important; height: 32px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-totals [data-summary-kind="net"] > span:nth-child(2) { font-size: 11px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-totals [data-summary-kind="net"] .my-document-money-control, html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) .my-document-totals [data-summary-kind="net"] .my-document-money-control input { min-height: 28px !important; height: 28px !important; line-height: 28px !important; } html[data-mobile-document-device="true"] body [data-document-root]#AccountingNoticeDocumentRoot .my-document-line-table :is(input:not([type="hidden"]), select, textarea) { min-height: 26px !important; height: 26px !important; font-size: 12px !important; } html[data-mobile-document-device="true"] body [data-document-root]#AccountingNoticeDocumentRoot .my-document-line-table .my-document-icon-button { width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; } } @layer alfares-row-number-more { html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail :is([data-row-number-more-cell], [data-column-key="idx"], .col-no) { min-width: 40px !important; min-inline-size: 40px !important; width: 40px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail :is(.erp-invoice-row-number-actions, .voucher-line-row-head, .alfares-row-number-more):not([hidden]):not(.d-none) { grid-template-columns: minmax(12px, 1fr) 26px !important; min-width: 38px !important; min-inline-size: 38px !important; min-height: 28px !important; min-block-size: 28px !important; height: 28px !important; block-size: 28px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail :is(.invoice-line-context-trigger[data-row-more-trigger], .voucher-line-context-button, .invoice-column-settings-header-button[data-header-more-trigger]) { width: 26px !important; inline-size: 26px !important; min-width: 26px !important; min-inline-size: 26px !important; max-width: 26px !important; max-inline-size: 26px !important; height: 28px !important; block-size: 28px !important; min-height: 28px !important; min-block-size: 28px !important; max-height: 28px !important; max-block-size: 28px !important; flex: 0 0 26px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail thead [data-row-number] { min-height: 32px !important; min-block-size: 32px !important; height: 32px !important; block-size: 32px !important; line-height: 32px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail thead [data-row-number] > button { min-width: 24px !important; min-height: 32px !important; height: 32px !important; line-height: 32px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail thead :is(.erp-invoice-row-number-actions, .alfares-row-number-more):not([hidden]):not(.d-none) { height: 32px !important; block-size: 32px !important; min-height: 32px !important; min-block-size: 32px !important; } html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, #AccountingNoticeDocumentRoot):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) #tblOprDetail thead .invoice-column-settings-header-button[data-header-more-trigger] { height: 32px !important; block-size: 32px !important; min-height: 32px !important; min-block-size: 32px !important; max-height: 32px !important; max-block-size: 32px !important; } } } /* source: cssjs/Shared/usability/dropdown-fields.css; sha256: 8c5dcf023ed88177b09682dca4adea7bbeb96d3ac632701e8713a6ccaeede084 */ /* Shared by full screens and quick-entry frames. Register before the control interaction layer so pressed selections retain readable black text. */ @layer alfares-dropdown-fields { :is(.my-report-select-options, .alfares-catalog-select-options, .auth-select-options) { overflow-y: scroll !important; scrollbar-gutter: stable !important; scrollbar-width: auto !important; scrollbar-color: #6b8eae #edf3f8 !important; } :is(.my-report-select-options, .alfares-catalog-select-options, .auth-select-options)::-webkit-scrollbar { width: 10px !important; } :is(.my-report-select-options, .alfares-catalog-select-options, .auth-select-options)::-webkit-scrollbar-track { border-radius: 8px !important; background: #edf3f8 !important; } :is(.my-report-select-options, .alfares-catalog-select-options, .auth-select-options)::-webkit-scrollbar-thumb { min-height: 28px !important; border: 2px solid #edf3f8 !important; border-radius: 8px !important; background: #6b8eae !important; } @supports selector(::-webkit-scrollbar) { :is(.my-report-select-options, .alfares-catalog-select-options, .auth-select-options) { scrollbar-color: auto !important; } } :is(select, option, optgroup, .my-report-select-button, .my-report-select-value, .my-report-select-option, .alfares-catalog-select-trigger, .alfares-catalog-select-value, .alfares-catalog-select-option, .auth-select-trigger, .auth-select-trigger > span, .auth-select-option, .my-report-select-search, .alfares-catalog-select-search, .auth-select-search input, .account-lookup-picker, [data-account-selected-text]) { color: #000 !important; -webkit-text-fill-color: #000 !important; } /* These are selection surfaces only; semantic add/delete actions and balance indicators keep their own colors. Portalled option lists are included. */ :is(select, option, optgroup) { background-color: #fff !important; } :is(.my-report-select-button, .my-report-select-panel, .alfares-catalog-select-trigger, .alfares-catalog-select-menu, .auth-select-trigger, .auth-select-panel, .auth-select-search, .my-report-select-search, .alfares-catalog-select-search, .account-lookup-picker) { background-color: #fff !important; background-image: none !important; } :is(.my-report-select-option, .alfares-catalog-select-option, .auth-select-option) { background-color: #fff !important; background-image: none !important; box-shadow: none !important; } :is(.my-report-select-option, .alfares-catalog-select-option, .auth-select-option) :is(span, strong, small, b) { color: #000 !important; -webkit-text-fill-color: #000 !important; } :is(.my-report-select-option, .alfares-catalog-select-option, .auth-select-option) :is(svg, i) { -webkit-text-fill-color: currentColor !important; } :is(.my-report-select-option, .alfares-catalog-select-option, .auth-select-option):is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: .58; } :is(.my-report-select-option, .alfares-catalog-select-option, .auth-select-option):is( :hover, :focus-visible, :active, .is-active, [aria-selected="true"]) { background-color: #edf3f8 !important; background-image: none !important; border-color: #9eafc0 !important; box-shadow: none !important; } :is(.my-report-select-button, .alfares-catalog-select-trigger, .auth-select-trigger, .account-lookup-picker):active { background-color: #edf3f8 !important; border-color: #9eafc0 !important; box-shadow: none !important; } :is(.my-report-select-button, .alfares-catalog-select-trigger, .auth-select-trigger, .account-lookup-picker):is(:disabled, [aria-disabled="true"]), select:disabled { background-color: #f0f2f4 !important; } /* The existing reference controls share a single border. No DOM relocation, event replacement, or change to the native select's value is needed. */ .tarefat-account-picker { direction: inherit !important; } :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: center !important; gap: 0 !important; min-width: 0 !important; width: 100%; padding: 2px !important; border: 1px solid #c6d4e0 !important; border-radius: 9px !important; background: #fff !important; box-shadow: none !important; } :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker):focus-within { border-color: #657b91 !important; outline: 1px solid #657b91; outline-offset: 1px; } :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker):has(> :is(.alfares-quick-entry-field-menu-trigger, .items-reference-menu-trigger, .accounts-reference-menu-trigger, .cost-centers-inline-button, .account-lookup-more, .tarefat-account-picker__actions):not([hidden], .d-none, [aria-hidden="true"])) { grid-template-columns: auto minmax(0, 1fr) !important; } /* An enhanced select stays a 1px absolute element behind its combobox; a layered 100% width would stretch it across the screen and add a scrollbar. */ :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker) > :is(select:not(.is-enhanced), .my-document-select-combobox, .my-report-select-combobox, .alfares-catalog-select, .cost-centers-control--select, .account-lookup-picker) { grid-column: -2 / -1 !important; grid-row: 1 !important; min-width: 0 !important; width: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 6px !important; background-color: transparent !important; box-shadow: none !important; } :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field) :is(.my-report-select-button, .alfares-catalog-select-trigger, .cost-centers-control--select > select) { border: 0 !important; border-radius: 6px !important; box-shadow: none !important; } :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker) select:disabled { background-color: #f0f2f4 !important; cursor: not-allowed; } :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker) > :is(.alfares-quick-entry-field-menu-trigger, .items-reference-menu-trigger, .accounts-reference-menu-trigger, .cost-centers-inline-button, .account-lookup-more, .tarefat-account-picker__actions):not([hidden], .d-none, [aria-hidden="true"]) { grid-column: 1 !important; grid-row: 1 !important; position: relative !important; inset: auto !important; display: inline-grid !important; place-items: center !important; align-self: stretch !important; width: 32px !important; min-width: 32px !important; height: auto !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: #f5f7f9 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; box-shadow: none !important; cursor: pointer; touch-action: manipulation; } /* Keep the action physically on the right for both document directions. */ :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker):dir(ltr):has(> :is(.alfares-quick-entry-field-menu-trigger, .items-reference-menu-trigger, .accounts-reference-menu-trigger, .cost-centers-inline-button, .account-lookup-more, .tarefat-account-picker__actions):not([hidden], .d-none, [aria-hidden="true"])) { grid-template-columns: minmax(0, 1fr) auto !important; } :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker):dir(ltr) > :is(select, .my-document-select-combobox, .my-report-select-combobox, .alfares-catalog-select, .cost-centers-control--select, .account-lookup-picker) { grid-column: 1 !important; } :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker):dir(ltr) > :is(.alfares-quick-entry-field-menu-trigger, .items-reference-menu-trigger, .accounts-reference-menu-trigger, .cost-centers-inline-button, .account-lookup-more, .tarefat-account-picker__actions):not([hidden], .d-none, [aria-hidden="true"]) { grid-column: 2 !important; } :is(.alfares-quick-entry-field-menu-trigger, .items-reference-menu-trigger, .accounts-reference-menu-trigger, .cost-centers-inline-button, .account-lookup-more, .tarefat-account-picker__actions):focus-visible { outline: 2px solid #657b91 !important; outline-offset: -2px !important; } :is(.alfares-quick-entry-field-menu-trigger, .items-reference-menu-trigger, .accounts-reference-menu-trigger, .cost-centers-inline-button, .account-lookup-more, .tarefat-account-picker__actions):disabled { opacity: .55; cursor: not-allowed; } /* Customer/supplier fields already have a shared frame and extra detail controls. Swap only the two edge actions, retaining their existing tracks. */ .invoice-party-field-shell:has(> .invoice-party-menu-trigger:not([hidden], .d-none, [aria-hidden="true"])) > .invoice-party-menu-trigger { grid-column: 1 !important; grid-row: 1 !important; } .invoice-party-field-shell:has(> .invoice-party-menu-trigger:not([hidden], .d-none, [aria-hidden="true"])) > :is(.invoice-party-field-icon:not(.invoice-party-detail-field-trigger), [data-party-search-menu-button]) { grid-column: -2 / -1 !important; grid-row: 1 !important; } .invoice-party-field-shell:dir(ltr):has(> .invoice-party-menu-trigger:not([hidden], .d-none, [aria-hidden="true"])) > .invoice-party-menu-trigger { grid-column: -2 / -1 !important; } .invoice-party-field-shell:dir(ltr):has(> .invoice-party-menu-trigger:not([hidden], .d-none, [aria-hidden="true"])) > :is(.invoice-party-field-icon:not(.invoice-party-detail-field-trigger), [data-party-search-menu-button]) { grid-column: 1 !important; } :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker):is([hidden], .d-none, [aria-hidden="true"]), :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker) > :is(.alfares-quick-entry-field-menu-trigger, .items-reference-menu-trigger, .accounts-reference-menu-trigger, .cost-centers-inline-button, .account-lookup-more, .tarefat-account-picker__actions):is([hidden], .d-none, [aria-hidden="true"]) { display: none !important; } @media (max-width: 1199px), (pointer: coarse) { :is(.alfares-quick-entry-field-control, .alfares-unified-reference-field, .account-lookup-control, .tarefat-account-picker) > :is(.alfares-quick-entry-field-menu-trigger, .items-reference-menu-trigger, .accounts-reference-menu-trigger, .cost-centers-inline-button, .account-lookup-more, .tarefat-account-picker__actions):not([hidden], .d-none, [aria-hidden="true"]) { width: 44px !important; min-width: 44px !important; min-height: 44px !important; } } } /* source: cssjs/Shared/usability/row-number-more.css; sha256: e257783ad79e3edcd2c3047454cfb3ff2f14a0b94af1cef18434da8a052032a9 */ /* A row number and its existing action share one intrinsic table track. */ @layer alfares-row-number-more { :is(table:has(> thead [data-row-number-more-cell]), .my-report-data-table, .my-report-html-mini-table, .my-document-line-table, .fp-table, .items-units-detail-table, .units-table, .sellers-table) { table-layout: auto !important; } :is(.erp-invoice-detail-table-scroll-x, .item-pricing-table-scroll):has(> table > thead [data-row-number-more-cell]) { scrollbar-gutter: auto !important; } :is([data-row-number-more-cell], .col-row-number, .my-document-line-table .col-no, .my-document-line-table [data-column-key="idx"], .unit-col-row, .fp-col-no, .units-col-id, .units-row-serial) { width: 1% !important; inline-size: 1% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: none !important; max-inline-size: none !important; padding-inline: 4px !important; white-space: nowrap !important; text-align: end !important; } :is(.alfares-row-number-more, .erp-invoice-row-number-actions, .voucher-line-row-head, .opr-unit-row-anchor, .report-row-number-actions-group) { display: grid !important; grid-template-columns: minmax(0, 1fr) 16px !important; align-items: center !important; justify-content: end !important; gap: 2px !important; width: 100% !important; inline-size: 100% !important; min-width: max-content !important; min-inline-size: max-content !important; min-height: 24px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :is([data-row-number], [data-business-number], .erp-invoice-row-number-input, .voucher-line-row-head > input[readonly], .opr-unit-row-anchor > .is-index, .invoice-row-order) { field-sizing: content !important; width: auto !important; inline-size: auto !important; min-width: 1ch !important; min-inline-size: 1ch !important; max-width: none !important; max-inline-size: none !important; height: 24px !important; block-size: 24px !important; min-height: 24px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; font: inherit !important; font-size: 12px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; line-height: 24px !important; text-align: end !important; white-space: nowrap !important; justify-self: end !important; grid-column: 1 !important; grid-row: 1 !important; appearance: textfield; } :is([data-row-number], .erp-invoice-row-number-input)::-webkit-inner-spin-button, :is([data-row-number], .erp-invoice-row-number-input)::-webkit-outer-spin-button { appearance: none; margin: 0; } td[data-row-number] { width: 1% !important; inline-size: 1% !important; min-width: 0 !important; min-inline-size: 0 !important; padding-inline: 4px !important; } [data-row-number] > button { width: auto !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; font: inherit !important; line-height: 24px !important; transform: none !important; transition: none !important; } [data-row-number] > button > span { color: inherit !important; -webkit-text-fill-color: currentColor !important; } :is([data-row-more-trigger], [data-header-more-trigger], .report-row-menu-trigger, .report-row-number-actions-group > .report-row-bulk-trigger, .erp-invoice-row-number-actions > .erp-detail-row-toggle, .voucher-line-context-button, .opr-unit-row-anchor > .items-row-action, .unit-settings-trigger, .my-document-line-table .invoice-column-settings-header-button) { display: inline-grid !important; place-content: center !important; place-items: center !important; width: 16px !important; inline-size: 16px !important; min-width: 16px !important; min-inline-size: 16px !important; max-width: 16px !important; max-inline-size: 16px !important; height: 24px !important; block-size: 24px !important; min-height: 24px !important; min-block-size: 24px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: 16px !important; line-height: 1 !important; transform: none !important; translate: none !important; scale: none !important; transition: none !important; flex: 0 0 16px !important; grid-column: 2 !important; grid-row: 1 !important; cursor: pointer; } :is([data-row-more-trigger], [data-header-more-trigger], .report-row-menu-trigger, .report-row-number-actions-group > .report-row-bulk-trigger, .erp-invoice-row-number-actions > .erp-detail-row-toggle, .voucher-line-context-button, .opr-unit-row-anchor > .items-row-action, .unit-settings-trigger, .my-document-line-table .invoice-column-settings-header-button) :is(svg, i, span) { color: inherit !important; -webkit-text-fill-color: currentColor !important; transform: none !important; translate: none !important; scale: none !important; box-shadow: none !important; transition: none !important; } :is([data-row-more-trigger], [data-header-more-trigger], .erp-invoice-row-number-actions > .erp-detail-row-toggle, .voucher-line-context-button, .opr-unit-row-anchor > .items-row-action, .unit-settings-trigger, .my-document-line-table .invoice-column-settings-header-button) svg { width: 14px !important; height: 14px !important; } .report-row-menu-trigger { grid-template-columns: 3px !important; grid-template-rows: repeat(3, 3px) !important; row-gap: 2px !important; } .report-row-number-actions-group > .report-row-bulk-trigger::before { content: "" !important; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } .report-row-number-actions-group > .report-row-bulk-trigger > span { display: none !important; } .report-row-number-actions-group > .report-row-bulk-trigger > b { display: none !important; } :is(.report-row-selection-heading, .report-row-selection-cell, .report-row-selection-actions-heading, .report-row-selection-actions-cell, .report-row-selection-actions-footer):not([data-row-number-more-cell]) { width: 1% !important; inline-size: 1% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: none !important; max-inline-size: none !important; padding-inline: 4px !important; } .report-row-selection-actions-group:not(.report-row-number-actions-group) { min-width: 0 !important; min-inline-size: 0 !important; gap: 0 !important; } .report-row-selection-actions-group.report-row-selection-number-group { display: grid !important; grid-template-columns: max-content minmax(max-content, 1fr) !important; gap: 4px !important; width: 100% !important; min-width: max-content !important; min-inline-size: max-content !important; } /* The ordinal pin follows the entire checkbox hit area, not its glyph. */ .my-report-data-table:has(> thead tr > th:first-child [data-select-page]) { --alfares-row-selection-track: 33px; } .my-report-data-table:has(> thead tr > th:first-child [data-select-page]) :is(.report-row-selection-actions-heading, .report-row-selection-actions-cell, .report-row-selection-actions-footer) { box-sizing: border-box !important; width: var(--alfares-row-selection-track) !important; inline-size: var(--alfares-row-selection-track) !important; min-width: var(--alfares-row-selection-track) !important; min-inline-size: var(--alfares-row-selection-track) !important; max-width: var(--alfares-row-selection-track) !important; max-inline-size: var(--alfares-row-selection-track) !important; } .my-report-data-table:has(> thead tr > th:first-child [data-select-page]) :is(th, td).col-row-number { position: sticky !important; left: auto !important; right: auto !important; inset-inline-end: auto !important; inset-inline-start: var(--alfares-row-selection-track) !important; z-index: 6 !important; } .my-report-data-table:has(> thead tr > th:first-child [data-select-page]) tbody td.report-row-selection-actions-cell { z-index: 7 !important; } /* Shared unpinned headings use 12 and footers use 11. */ .my-report-data-table:has(> thead tr > th:first-child [data-select-page]) thead th.col-row-number { z-index: 13 !important; } .my-report-data-table:has(> thead tr > th:first-child [data-select-page]) thead th.report-row-selection-actions-heading { z-index: 14 !important; } .my-report-data-table:has(> thead tr > th:first-child [data-select-page]) tfoot td.col-row-number { z-index: 12 !important; } .my-report-data-table:has(> thead tr > th:first-child [data-select-page]) tfoot td.report-row-selection-actions-footer { z-index: 13 !important; } @media (pointer: coarse) { .my-report-data-table:has(> thead tr > th:first-child [data-select-page]) { --alfares-row-selection-track: 45px; } } } /* source: cssjs/Shared/usability/action-column-fit.css; sha256: 383d7b4d9842ea3b7c65bea41c48abe30044837efc138ac41a5829f18beab9fd */ /* Action tracks use the same intrinsic sizing as row-number-more.css. */ @layer alfares-table-actions { table:has(> :is(thead, tbody, tfoot) > tr > :is(th, td):is([data-table-action-cell], [data-column-key="actions"], [data-col="actions"], [data-unit-price-column="actions"], .my-document-line-table .col-action, .unit-col-actions, .unit-col-delete, .items-units-detail-table .col-delete, .units-col-action, .locations-col-action, .branches-col-action, .categories-col-action, .activities-col-action, .sources-col-action, .cost-centers-col-action, .sellers-col-action, .price-col-action, [data-price-level-table] [data-column-key="action"], .units-row-action, .locations-row-action, .branches-row-action, .categories-row-action, .activities-row-action, .sources-row-action, .cost-centers-row-action, .sellers-row-action, .price-row-action)), table:has(> tbody > tr > td > :is(.erp-detail-row-actions, .voucher-line-delete-stack, .opr-unit-menu-anchor, .unit-actions-head, .hrp-finance-actions, .hrp-table-action, .account-sessions__row-action, .myauth-table-action, .config-license-payment-complete-action, [data-recipe-remove])), table:has(> tbody > tr > td > form > .hrp-table-action) { table-layout: auto !important; } :is(th, td):is([data-table-action-cell], [data-column-key="actions"], [data-col="actions"], [data-unit-price-column="actions"], .my-document-line-table .col-action, .unit-col-actions, .unit-col-delete, .items-units-detail-table .col-delete, .units-col-action, .locations-col-action, .branches-col-action, .categories-col-action, .activities-col-action, .sources-col-action, .cost-centers-col-action, .sellers-col-action, .price-col-action, [data-price-level-table] [data-column-key="action"], .units-row-action, .locations-row-action, .branches-row-action, .categories-row-action, .activities-row-action, .sources-row-action, .cost-centers-row-action, .sellers-row-action, .price-row-action), td:has(> :is(.erp-detail-row-actions, .voucher-line-delete-stack, .opr-unit-menu-anchor, .unit-actions-head, .hrp-finance-actions, .hrp-table-action, .account-sessions__row-action, .myauth-table-action, .config-license-payment-complete-action, [data-recipe-remove])), td:has(> form > .hrp-table-action) { width: 1% !important; inline-size: 1% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: none !important; max-inline-size: none !important; padding-inline: 4px !important; white-space: nowrap !important; text-align: center !important; } :is(th, td) > :is(.erp-detail-row-actions, .voucher-line-delete-stack, .opr-unit-menu-anchor, .unit-actions-head, .hrp-finance-actions):not([hidden]):not([aria-hidden="true"]) { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: max-content !important; inline-size: max-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: none !important; max-inline-size: none !important; white-space: nowrap !important; } :is(th, td) > :is(.erp-detail-row-actions, .voucher-line-delete-stack, .opr-unit-menu-anchor, .unit-actions-head, .hrp-finance-actions) > :is(button, a, input, form) { flex: 0 0 auto !important; } } /* Keep normal flow below hidden classes and inline display rules. */ [data-price-level-table] td[data-column-key="action"] > .price-row-open:not([hidden]):not([aria-hidden="true"]) { display: inline-grid; vertical-align: middle; } /* source: cssjs/Shared/usability/system-control-interactions.css; sha256: 5321fa4283849254813f241ac48b88cb5872de808cdbc4364bfe85b6fd703c58 */ /* Keep interaction paint separate from layout transforms, state arrows and loading animations. Important rules in this layer also cover later skins. */ @layer alfares-control-interactions { :root { --alfares-control-on-primary: #fff; --alfares-control-palette-primary: var(--my-shell-primary, var(--auth-primary, var(--p-blue, var(--blue-700, #2563eb)))); } :is(body[data-auth-screen="login"], body.mysite-register-body) { --alfares-control-palette-primary: var(--auth-primary, var(--my-shell-primary, var(--p-blue, var(--blue-700, #2563eb)))); } html[data-my-theme="green"] :is(body[data-auth-screen="login"], body.mysite-register-body), html[data-my-theme="dark"] :is(body[data-auth-screen="login"], body.mysite-register-body), html[data-my-theme="orange"] :is(body[data-auth-screen="login"], body.mysite-register-body) { --alfares-control-on-primary: #071423; } :is( button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row, .my-report-summary-icon, .my-document-money-icon, .icon, .fa, .fas, .far, .bi ) { --alfares-control-primary: var(--alfares-control-palette-primary); transition-property: box-shadow, background-color, color, border-color !important; transition-duration: .12s !important; transition-timing-function: ease-out !important; } :is( button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row, .my-report-summary-icon, .my-document-money-icon, .icon, .fa, .fas, .far, .bi ):hover:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) { box-shadow: none !important; } :is( button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row, .my-report-summary-icon, .my-document-money-icon, .icon, .fa, .fas, .far, .bi ):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) { background-color: var(--alfares-control-primary) !important; background-image: none !important; border-color: var(--alfares-control-primary) !important; color: var(--alfares-control-on-primary) !important; -webkit-text-fill-color: var(--alfares-control-on-primary) !important; box-shadow: none !important; } :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row) :is(.icon, .fa, .fas, .far, .bi):hover { box-shadow: none !important; } :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row) :is(i, svg, span, strong, small, label) { transition-property: color, fill, stroke !important; } :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) :is(i, svg, span, strong, small, label):not(.preview-mini-pill, .template-badge, .template-tag, .dashboard-switcher__current-badge):not(:is(.preview-mini-pill, .template-badge, .template-tag, .dashboard-switcher__current-badge, .template-entry-preview-canvas, .template-entry-content) *) { color: inherit !important; -webkit-text-fill-color: inherit !important; } /* Badges keep their own contrasting foreground and painted surface. */ :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) :is(.preview-mini-pill, .template-badge, .template-tag, .dashboard-switcher__current-badge), :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) :is(.preview-mini-pill, .template-badge, .template-tag, .dashboard-switcher__current-badge) * { -webkit-text-fill-color: currentColor !important; } /* A miniature report and its white caption surface retain their own paint. */ :is(.template-entry, .mng-template-card):active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) :is(.template-entry-preview-canvas, .template-entry-content), :is(.template-entry, .mng-template-card):active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) :is(.template-entry-preview-canvas, .template-entry-content) * { -webkit-text-fill-color: currentColor !important; } :is(.surface-summary-row, .template-entry, .mng-template-card):active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) button:not(:active) { -webkit-text-fill-color: currentColor !important; } :is(.template-entry, .mng-template-card):active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) :is(.template-entry-content .mng-template-card__meta, .template-entry-content .mng-template-card__meta span) { color: var(--template-ink, #172033) !important; -webkit-text-fill-color: currentColor !important; } .surface-summary-row:active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) :is(.surface-summary-title, .surface-summary-sub) { color: var(--alfares-control-on-primary) !important; -webkit-text-fill-color: var(--alfares-control-on-primary) !important; } /* Known painted icon surfaces share the pressed control's contrast palette. */ :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) :is(.business-type-card__label, .auth-advanced-icon, .report-owned-menu__icon, .nav-popover__icon, .official-action__icon, .mng-right-toolbelt-action__icon) { background-color: var(--alfares-control-primary) !important; background-image: none !important; color: var(--alfares-control-on-primary) !important; -webkit-text-fill-color: var(--alfares-control-on-primary) !important; } :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) svg:not(.template-entry-preview-canvas *) :is([fill]:not([fill="none"]):not([fill^="url("])) { fill: currentColor !important; } :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) svg:not(.template-entry-preview-canvas *) :is([stroke]:not([stroke="none"]):not([stroke^="url("])) { stroke: currentColor !important; } :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row) :is(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):hover, :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):is(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):hover, [aria-busy="true"] :is(button, a[href], [role="button"], .btn):hover { box-shadow: none !important; } /* Pointer tilt used to move controls together with their parent card. */ [data-tilt] { --tilt-x: 0deg !important; --tilt-y: 0deg !important; } } /* source: cssjs/Shared/usability/refresh-button.css; sha256: 3353db5f527b78eb7adf2af168f4db06948bcaaefcfdc99da9c9deda5ee0764d */ /* Native refresh controls retain their own dimensions and request lifecycle. */ @layer alfares-control-interactions { :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) { --alfares-refresh-green: #198344; --alfares-refresh-pressed: #187b3e; background-color: var(--alfares-refresh-green) !important; background-image: none !important; border-color: var(--alfares-refresh-green) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: none !important; opacity: 1 !important; transition-property: box-shadow, background-color !important; transition-duration: .12s !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) :is(svg, i, span, strong, small) { color: inherit !important; -webkit-text-fill-color: inherit !important; box-shadow: none !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) :is(.report-owned-menu__icon, .ico) { background: transparent !important; } .alfares-refresh-icon { inline-size: 18px; block-size: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-inline-end: 4px; } [data-mng-report-preview-retry] { position: relative; padding-inline-end: 38px !important; } [data-mng-report-preview-retry]::after { content: ""; position: absolute; inline-size: 18px; block-size: 18px; inset-inline-end: 12px; inset-block-start: 50%; translate: 0 -50%; box-sizing: border-box; border: 2px solid rgb(255 255 255 / 45%); border-block-start-color: #fff; border-radius: 50%; visibility: hidden; pointer-events: none; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):hover :not(svg) { box-shadow: none !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):hover:not(:active):not([aria-busy="true"], .is-loading):not(:is([aria-busy="true"], [data-loading="true"]) *) :is(svg, i) { animation: none !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):hover:not(:active):not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) { box-shadow: none !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) { background-color: var(--alfares-refresh-pressed) !important; border-color: var(--alfares-refresh-pressed) !important; box-shadow: none !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):focus-visible { outline: 2px solid #2586c9 !important; outline-offset: 2px !important; transform: none !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled) { opacity: .38 !important; cursor: not-allowed; box-shadow: none !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is([aria-busy="true"], .is-loading), :is([aria-busy="true"], [data-loading="true"]) :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) { background-color: var(--alfares-refresh-green) !important; border-color: var(--alfares-refresh-green) !important; opacity: 1 !important; cursor: progress; box-shadow: none !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is([aria-busy="true"], .is-loading) svg, :is([aria-busy="true"], [data-loading="true"]) :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) svg { border: 0 !important; animation: none !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is([aria-busy="true"], .is-loading) svg > *, :is([aria-busy="true"], [data-loading="true"]) :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) svg > * { visibility: visible; } [data-mng-report-preview-retry]:is([aria-busy="true"], .is-loading)::after, :is([aria-busy="true"], [data-loading="true"]) [data-mng-report-preview-retry]::after { visibility: visible; animation: none !important; } @keyframes alfares-refresh-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) { transition-duration: 0s !important; } :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]):is([aria-busy="true"], .is-loading) svg, :is([aria-busy="true"], [data-loading="true"]) :is([data-refresh-control], #oprFilter_Refresh_data, [data-mng-report-preview-retry]) svg, [data-mng-report-preview-retry]:is([aria-busy="true"], .is-loading)::after, :is([aria-busy="true"], [data-loading="true"]) [data-mng-report-preview-retry]::after { animation-duration: 1.7s !important; } } } /* source: cssjs/Shared/usability/default-blue-theme.css; sha256: 19bc80148a92130d6fd41c1e358f6dd61d391e535072d71626cb58450a16bb43 */ /* Shared screen-only flat themes. The historical asset URL is retained for all existing screen entry points. Registration's explicit theme takes precedence over an absent shell preference; obsolete or missing preferences use navy. */ @media screen { html:root { --my-shell-primary: #123f61; --my-shell-primary-strong: #0d304b; --my-shell-primary-soft: #edf3f7; --my-shell-bg: #eef4f8; --my-shell-surface: #fff; --my-shell-surface-soft: #f8fbfd; --my-shell-ink: #0f172a; --my-shell-muted: #64748b; --my-shell-line: #d8e4ed; } html:root[data-my-theme="blue"]:not([data-register-theme]), html:root[data-register-theme="blue"] { --my-shell-primary: #495aa3; --my-shell-primary-strong: #323f7c; --my-shell-primary-soft: #eef0f8; } html:root[data-my-theme="green"]:not([data-register-theme]), html:root[data-register-theme="green"] { --my-shell-primary: #0f766e; --my-shell-primary-strong: #115e59; --my-shell-primary-soft: #eaf5f3; } html:root[data-my-theme="dark"]:not([data-register-theme]), html:root[data-register-theme="dark"] { --my-shell-primary: #334155; --my-shell-primary-strong: #0f172a; --my-shell-primary-soft: #e8edf3; --my-shell-bg: #e7edf5; } html:root { --my-shell-sidebar-deep: var(--my-shell-primary); --my-shell-sidebar-mid: var(--my-shell-primary); --my-shell-sidebar-low: var(--my-shell-primary); --alfares-focus-ring: var(--my-shell-primary); --auth-primary: var(--my-shell-primary); --auth-primary-deep: var(--my-shell-primary-strong); --auth-primary-soft: var(--my-shell-primary-soft); --register-primary: var(--my-shell-primary); --register-primary-deep: var(--my-shell-primary-strong); --register-primary-soft: var(--my-shell-primary-soft); --invoice-detail-head-start: var(--my-shell-primary); --invoice-detail-head-end: var(--my-shell-primary); --invoice-detail-head-ink: #fff; --invoice-detail-head-line: color-mix(in srgb, var(--my-shell-primary) 45%, #fff); --invoice-detail-head-accent: color-mix(in srgb, var(--my-shell-primary) 24%, #fff); } /* branches */ html:root .branches-page { --branches-blue: var(--my-shell-primary); --branches-blue-dark: var(--my-shell-primary-strong); } /* locations */ html:root .locations-page { --locations-primary: var(--my-shell-primary); --locations-primary-dark: var(--my-shell-primary-strong); } /* units */ html:root .units-page { --units-primary: var(--my-shell-primary); --units-primary-dark: var(--my-shell-primary-strong); } /* categories */ html:root .categories-page { --categories-primary: var(--my-shell-primary); --categories-primary-dark: var(--my-shell-primary-strong); } /* activities */ html:root .activities-page { --activities-primary: var(--my-shell-primary); --activities-primary-dark: var(--my-shell-primary-strong); } /* sources */ html:root .sources-page { --sources-primary: var(--my-shell-primary); --sources-primary-dark: var(--my-shell-primary-strong); } /* sellers */ html:root .sellers-page { --sellers-primary: var(--my-shell-primary); --sellers-primary-dark: var(--my-shell-primary-strong); } /* cost centers */ html:root .cost-centers-page { --cc-blue-950: var(--my-shell-primary-strong); --cc-blue-900: var(--my-shell-primary-strong); --cc-blue-800: var(--my-shell-primary-strong); --cc-blue-700: var(--my-shell-primary); --cc-blue-600: var(--my-shell-primary); } /* accounts */ html:root #OprAccounts_Page { --accounts-primary: var(--my-shell-primary); --accounts-primary-strong: var(--my-shell-primary-strong); } /* accounts modern */ html:root #OprAccounts_Page { --accounts-modern-primary: var(--my-shell-primary); --accounts-modern-primary-strong: var(--my-shell-primary-strong); --accounts-modern-table-head: var(--my-shell-primary); --accounts-modern-focus: color-mix(in srgb, var(--my-shell-primary) 16%, transparent); } /* items */ html:root #OprItems_Page { --items-blue: var(--my-shell-primary); --items-blue-dark: var(--my-shell-primary-strong); --items-header: var(--my-shell-primary); } /* items modern */ html:root #OprItems_Page { --items-modern-primary: var(--my-shell-primary); --items-modern-primary-hover: var(--my-shell-primary-strong); --items-modern-table-head: var(--my-shell-primary); --items-modern-focus: var(--my-shell-primary); } /* permissions */ html:root .permissions-page { --slh-blue: var(--my-shell-primary); --slh-blue-strong: var(--my-shell-primary-strong); } /* options */ html:root .options-page { --options-primary: var(--my-shell-primary); --options-primary-strong: var(--my-shell-primary-strong); } /* account bindings */ html:root .tarefat-page { --tarefat-primary: var(--my-shell-primary); --tarefat-primary-strong: var(--my-shell-primary-strong); } /* database settings */ html:root .config-db-page { --config-db-primary: var(--my-shell-primary); --config-db-primary-dark: var(--my-shell-primary-strong); } /* HR */ html:root .hr-visual-page.hr-visual-page { --hr-visual-blue: var(--my-shell-primary); --hr-visual-accent: var(--my-shell-primary); --hr-visual-accent-soft: color-mix(in srgb, var(--my-shell-primary) 10%, #fff); } /* payroll */ html:root .hrp-page { --hrp-blue: var(--my-shell-primary); --hrp-blue-deep: var(--my-shell-primary-strong); } /* fast production */ html:root .fp-page { --fp-blue: var(--my-shell-primary); --fp-blue-deep: var(--my-shell-primary-strong); } /* reports */ html:root .my-report-page { --my-report-blue: var(--my-shell-primary); --my-report-accent: var(--my-shell-primary); --my-report-accent-soft: color-mix(in srgb, var(--my-shell-primary) 10%, #fff); } /* document blue actions */ html:root :is(.erp-opr-invoice-shell, .erp-opr-sndat-shell) { --my-doc-blue: var(--my-shell-primary); --my-doc-action: var(--my-shell-primary); --my-doc-action-hover: var(--my-shell-primary-strong); --my-doc-edit: var(--my-shell-primary); --my-doc-edit-hover: var(--my-shell-primary-strong); } /* invoice/voucher detail and lookup identity */ html:root :is(.erp-opr-invoice-shell, .erp-opr-sndat-shell) { --invoice-detail-head-start: var(--my-shell-primary); --invoice-detail-head-end: var(--my-shell-primary); --invoice-detail-head-accent: color-mix(in srgb, var(--my-shell-primary) 24%, #fff); --invoice-detail-head-line: color-mix(in srgb, var(--my-shell-primary) 45%, #fff); } /* POS blue accent */ html:root .pos2-restaurant-document { --pos2-accent: var(--my-shell-primary); --pos2-product-blue: var(--my-shell-primary); } /* POS legacy blue actions */ html:root .pos2-restaurant-document .pos2-legacy-stage { --pos2-sales-blue: var(--my-shell-primary); --pos2-action-blue: var(--my-shell-primary); --pos2-action-blue-dark: var(--my-shell-primary-strong); } /* Legacy directory headers keep their existing size and behavior. */ html:root :is( .branches-page .branches-table, .locations-page .locations-table, .units-page .units-table, .categories-page .categories-table, .activities-page .activities-table, .sources-page .sources-table, .sellers-page .sellers-table, .cost-centers-page .cost-centers-table, .fp-page .fp-table ) thead th { background: var(--my-shell-primary); color: #fff; } /* Draft/edit uses the same blue in its normal, hover and focus states. */ html:root :is(.erp-opr-invoice-shell, .erp-opr-sndat-shell) .invoice-draft-button { --doc-button-tone: var(--my-shell-primary); --doc-button-hover: var(--my-shell-primary-strong); --doc-button-bg: var(--my-shell-primary); --doc-button-bg-hover: var(--my-shell-primary-strong); } /* Common document surfaces consume flat values instead of private gradients. Product photos, charts, content fields and print remain module-owned. */ html:root body :is(.erp-opr-invoice-shell, .erp-opr-sndat-shell) { --invoice-shell-surface: var(--my-shell-bg) !important; --invoice-surface-command: var(--my-shell-surface) !important; --invoice-surface-identity: var(--my-shell-surface) !important; --invoice-surface-workspace: var(--my-shell-surface-soft) !important; --invoice-surface-items: var(--my-shell-surface) !important; --invoice-surface-totals: var(--my-shell-surface-soft) !important; --invoice-premium-soft-head-bg: var(--my-shell-surface-soft) !important; --invoice-premium-card-head-bg: var(--my-shell-primary) !important; } /* Only gradient-valued button tokens are flattened. Existing flat report, cancel and destructive button fills keep their own foreground contract. */ html:root body .kt-invoice-extension .kt-tailoring-print-button.is-general { --doc-button-bg: #285fc2 !important; --doc-button-bg-hover: #1e4fae !important; } html:root body .erp-opr-invoice-shell .invoice-workshop-save-button { --doc-button-bg: #168058 !important; --doc-button-bg-hover: #116746 !important; } html:root body .erp-opr-invoice-shell .my-document-button[data-command-kind="new"] { --doc-button-bg: var(--my-doc-new) !important; --doc-button-bg-hover: var(--my-doc-new-hover) !important; } html:root body .erp-opr-invoice-shell .my-document-button[data-command-kind="reports"] { --doc-button-bg: #566b7c !important; --doc-button-bg-hover: #435666 !important; } html:root body .erp-opr-invoice-shell .my-document-button[data-command-kind="return"] { --doc-button-bg: var(--my-doc-return) !important; --doc-button-bg-hover: var(--my-doc-return-hover) !important; } html:root body .erp-opr-invoice-shell .invoice-save-button { --doc-button-bg: var(--my-doc-save) !important; --doc-button-bg-hover: var(--my-doc-save-hover) !important; } html:root body .erp-opr-invoice-shell .invoice-draft-button { --doc-button-bg: var(--my-doc-edit) !important; --doc-button-bg-hover: var(--my-doc-edit-hover) !important; } html:root body .erp-opr-invoice-shell .invoice-save-print-button { --doc-button-bg: var(--my-doc-save-print) !important; --doc-button-bg-hover: var(--my-doc-save-print-hover) !important; } html:root body .erp-opr-invoice-shell .invoice-multi-payment-button { --doc-button-bg: var(--my-doc-payment) !important; --doc-button-bg-hover: var(--my-doc-payment-hover) !important; } html:root body .invoice-extra-data-button { --doc-button-bg: var(--my-doc-workshop) !important; --doc-button-bg-hover: var(--my-doc-workshop-hover) !important; } html:root body .invoice-extra-qr-button { --doc-button-bg: var(--my-doc-qr) !important; --doc-button-bg-hover: var(--my-doc-qr-hover) !important; } html:root body .erp-opr-invoice-shell .invoice-extra-data-button { --doc-button-bg: var(--my-doc-workshop) !important; --doc-button-bg-hover: var(--my-doc-workshop-hover) !important; } html:root body .erp-opr-invoice-shell .invoice-extra-qr-button { --doc-button-bg: var(--my-doc-qr) !important; --doc-button-bg-hover: var(--my-doc-qr-hover) !important; } html:root body .erp-opr-invoice-shell.erp-opr-invoice-shell .my-document-payment-methods button[data-payment-value] { background: var(--payment-option-bg-end, var(--my-shell-surface)) !important; } html:root body .erp-opr-invoice-shell.erp-opr-invoice-shell .my-document-payment-methods button[data-payment-value]:not(.is-active):not([aria-pressed="true"]):focus-visible { background: var(--payment-option-hover-bg, var(--my-shell-surface-soft)) !important; } html:root body .erp-opr-invoice-shell.erp-opr-invoice-shell .my-document-payment-methods button[data-payment-value]:is(.is-active, [aria-pressed="true"]) { background: var(--payment-option-active-end, var(--my-shell-primary)) !important; } html:root body :is(.my-document-button.is-blue, .my-shell-button.is-primary, .my-document-workspace-tabs button.is-active, .auth-language-switcher .lang-btn.is-active, .register-plan-toolbar .alfares-plan-tabs [aria-selected="true"], .register-billing-toggle button.is-active, .register-plan-grid .register-plan-select) { background: var(--my-shell-primary) !important; color: #fff !important; } html:root body .my-document-button.is-primary { background: var(--my-doc-primary, #0f766e) !important; } /* Neutral chrome and card surfaces share one solid fill. */ html:root body :is(.my-slider-home-head, .my-nav-menu.my-nav-user-menu--premium, .my-nav-shortcuts-head, .my-nav-shortcuts-commit-bar, .my-nav-collapsed-flyout-head, .my-nav-user-license-card, .my-report-select-panel, .alfares-system-confirm, .invoice-row-details-menu--item-details, .invoice-data-premium-panel, .erp-voucher-account-search-premium-box, .invoice-party-premium-search, .erp-document-search-premium-box, .erp-invoice-document-search__table-head, .auth-card, .auth-control, .auth-select-panel, .auth-dialog-card, .register-form-heading, .register-plan-toolbar, .register-verification-card, .register-existing-account-card, .register-plan-grid .plan-card) { background: var(--auth-surface, var(--my-shell-surface)) !important; } html:root body .erp-opr-invoice-shell :is(.invoice-data-premium-panel, .my-document-totals), html:root body .erp-opr-invoice-shell .my-document-totals .my-report-summary-card, html:root body .erp-opr-invoice-shell .my-report-select-panel, html:root body .my-report-select-panel[data-floating-select-panel="true"], html:root body .invoice-row-details-menu.invoice-row-details-menu--item-details, html:root body #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-voucher-account-search-premium-box { background: var(--my-shell-surface) !important; } html:root body :is(.my-nav-topbar .my-slider-icon-button, .my-nav-action:not(.my-nav-upgrade-cta), .my-nav-user, .my-nav-clock, .my-report-select-button, .alfares-catalog-select-trigger, .alfares-quick-entry-field-menu-trigger, .alfares-quick-entry-field-action, .alfares-quick-entry-field-menu__report, .auth-secondary-button, .register-secondary-button) { background: var(--my-shell-surface-soft) !important; } html:root body .erp-opr-invoice-shell :is(.my-report-select-button, .my-document-date-shell, .my-document-date-trigger), html:root body .my-report-select-panel[data-floating-select-panel="true"] .my-report-select-option:is(.is-active, [aria-selected="true"], :focus-visible), html:root body .erp-opr-invoice-shell .my-report-select-option:is(.is-active, [aria-selected="true"], :focus-visible), html:root body :is(.register-selected-plan, .register-plan-grid .plan-card.is-featured) { background: var(--my-shell-primary-soft) !important; } html:root body :is(.auth-form-panel::before, .register-plan-grid .plan-card::before, .register-existing-account-card::before) { background: transparent !important; mask-image: none !important; } html:root body .register-plan-grid .plan-card--trial { background: var(--register-success-soft, #eaf9f4) !important; } html:root body .alfares-system-confirm__icon { background: var(--my-shell-primary-soft) !important; color: var(--my-shell-primary) !important; } html:root body .alfares-system-confirm[data-tone="danger"] .alfares-system-confirm__icon { background: #fff1ee !important; color: #a33a2c !important; } /* Theme identity takes precedence over legacy document-specific blue tones. */ html:root body :is(.erp-opr-invoice-shell, .erp-opr-sndat-shell, .pos2-restaurant-document) { --invoice-detail-head-start: var(--my-shell-primary) !important; --invoice-detail-head-end: var(--my-shell-primary) !important; --invoice-header-bg-start: var(--my-shell-primary) !important; --invoice-header-bg-end: var(--my-shell-primary) !important; --invoice-premium-card-head-bg: var(--my-shell-primary) !important; --invoice-detail-head-ink: #fff; --lookup-premium-start: var(--my-shell-primary); --lookup-premium-mid: var(--my-shell-primary); --lookup-premium-end: var(--my-shell-primary); --lookup-premium-blue: var(--my-shell-primary); } html:root body :is(.my-slider-sidebar, .my-nav-topbar, .auth-brand-panel, .register-progress-card), html:root body :is(.auth-primary-button, .register-primary-button) { background: var(--my-shell-primary) !important; color: #fff !important; } html:root body :is(.my-slider-shell, .my-slider-home) { background: var(--my-shell-bg) !important; } html:root body :is(.branches-page, .locations-page, .units-page, .categories-page, .activities-page, .sources-page, .sellers-page, .cost-centers-page, .options-page, .config-db-page, .fp-page, #OprItems_Page, #OprAccounts_Page) { background: var(--my-shell-bg) !important; } html:root body :is(.branches-panel-header, .locations-panel-header, .units-panel-header, .categories-panel-header, .activities-panel-header, .sources-panel-header, .sellers-panel-header, .cost-centers-panel-header, .config-db-panel-heading, .permissions-rail-heading, .permissions-context, .permissions-functional-tabs-shell, .permissions-pricing-card, .permissions-users-drawer > header, .options-context, .options-panel-header) { background: var(--my-shell-surface-soft) !important; } html:root body :is(.auth-form-panel, .register-form-card, .register-workspace) { background: var(--auth-page, var(--my-shell-bg)) !important; } html:root body :is(.my-slider-sidebar, .my-nav-topbar) :is(button, a) { --alfares-control-on-primary: #fff; } html:root :is(body[data-auth-screen="login"], body.mysite-register-body) { --alfares-control-on-primary: #fff; } html:root body table thead th, html:root body :is(#OprAccounts_Page, #OprItems_Page) table thead th, html:root body :is(.erp-opr-invoice-shell, .erp-opr-sndat-shell) :is(#tblOprDetail, #tblOprDetail_return, #Entag_tblOprDetail) thead th, html:root body .pos2-restaurant-document table thead th { background: var(--my-shell-primary) !important; border-color: var(--invoice-detail-head-line) !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important; } html:root body :is(.erp-item-search-popover, .erp-document-search-modal--premium, .invoice-party-search-modal, #VoucherAccountSearchModal#VoucherAccountSearchModal) { --account-search-accent: var(--my-shell-primary); --account-search-accent-strong: var(--my-shell-primary-strong); --account-search-line: var(--invoice-detail-head-line); --lookup-premium-start: var(--my-shell-primary); --lookup-premium-end: var(--my-shell-primary); --lookup-premium-blue: var(--my-shell-primary); } html:root body :is(.erp-item-search-popover-head, .erp-item-search-table-head, .erp-document-search-hero, .invoice-party-search-hero, .invoice-price-menu-head, .invoice-row-details-menu__head, .my-document-menu-header, .invoice-payment-modal-head, .alfares-quick-entry-modal__header, .my-report-select-panel-header), html:root body .erp-opr-invoice-shell :is(#contextmenu_price_levels, #contextmenu_price) > .invoice-price-menu-head, html:root body .invoice-row-details-menu[data-invoice-row-details-card] .invoice-row-details-menu__head, html:root body #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-popover-head, html:root body .erp-document-search-modal--premium .erp-document-search-hero, html:root body .erp-opr-invoice-shell .invoice-party-search-hero, html:root body :is(.auth-dialog-card, .register-existing-account-card) > header { background: var(--my-shell-primary) !important; color: #fff !important; text-shadow: none !important; } html:root body :is(.erp-item-search-popover-head, .erp-document-search-hero, .invoice-party-search-hero, .invoice-price-menu-head, .invoice-row-details-menu__head, .my-document-menu-header, .invoice-payment-modal-head, .alfares-quick-entry-modal__header, .my-report-select-panel-header) :is(h2, strong, small, span, em, svg):not(button, a, [role="button"], button *, a *, [role="button"] *), html:root body #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-popover-title :is(h2, small):not(button, a, [role="button"], button *, a *, [role="button"] *), html:root body :is(.auth-dialog-card, .register-existing-account-card) > header :is(h2, strong, small):not(button, a, [role="button"], button *, a *, [role="button"] *) { color: #fff !important; } html:root body .erp-opr-invoice-shell :is(#contextmenu_price_levels, #contextmenu_price) { --invoice-price-level-accent: var(--my-shell-primary) !important; --invoice-price-level-accent-deep: var(--my-shell-primary) !important; --invoice-price-level-accent-line: var(--invoice-detail-head-line) !important; } html:root body .erp-opr-invoice-shell #contextmenu_price_levels .invoice-dynamic-price-table thead th { background: var(--my-shell-primary) !important; color: #fff !important; box-shadow: none !important; } html:root body :is(select, .alfares-catalog-select-trigger, .my-report-select-button, .auth-select-value, .register-select-value) { color: #000 !important; -webkit-text-fill-color: #000 !important; } html:root body :is(.auth-select-trigger, .auth-select-trigger > span, .auth-control select, .register-field select) { color: #000 !important; -webkit-text-fill-color: #000 !important; } html:root body :is(.auth-searchable-select, .auth-select-trigger, .auth-control:has(select), .register-field select) { background: #fff !important; } html:root body.mysite-register-body :is(.register-form-heading, .register-plan-toolbar, .register-verification-card, .register-existing-account-card, .register-plan-grid .plan-card) { background: var(--register-surface) !important; } html:root:is([data-my-theme="dark"], [data-register-theme="dark"]) :is(.auth-card-header > span, .auth-link-button, .auth-switch a, .register-form-heading span, .register-selected-plan-copy strong) { color: #bfdbfe; } /* Dark semantic success keeps its green role with readable contrast. */ html:root[data-my-theme="dark"] body[data-auth-screen="login"] .auth-license-status[data-license-state="licensed"] { color: #6ee7b7; } html:root[data-register-theme="dark"] body.mysite-register-body #AccountRegister_ThemeMenuTrigger { color: var(--register-ink) !important; -webkit-text-fill-color: var(--register-ink) !important; } /* On desktop the native picker is at the right edge; mobile already anchors inside its toolbar and retains its original left-aligned menu geometry. */ @media (min-width: 981px) { html:root body.mysite-register-body .register-theme-menu { left: auto; right: 0; } } /* Native action audit: flat paint for the exact document/POS chrome roles. Semantic fills keep their former final stop; no product surface is selected. */ html:root body .erp-opr-invoice-shell .invoice-lines-table .my-document-empty-lines .my-document-button { background: var(--my-shell-primary) !important; } html:root body .erp-opr-invoice-shell .invoice-lines-table .my-document-empty-lines .my-document-button:is(:hover, :focus-visible) { background: var(--my-shell-primary-strong) !important; } html:root body .erp-opr-sndat-shell :is(#btnNew, #btnHeaderPrint) { background: #edf5ff !important; } html:root body .erp-opr-sndat-shell :is(#btnNew, #btnHeaderPrint):is(:hover, :focus-visible) { background: #e0eeff !important; } html:root body :is(.erp-opr-invoice-shell, .erp-opr-sndat-shell) #Opr_Discount { background: #f8fbff !important; } html:root body :is(.erp-opr-invoice-shell, .erp-opr-sndat-shell) [data-invoice-totals-extra-toggle] { background: #e9f9fb !important; } html:root body.mysite-register-body .register-stepper button.is-active { background: rgba(14, 165, 233, .12) !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage .pos-primary-command { background: var(--my-shell-primary) !important; border-color: var(--my-shell-primary) !important; color: #fff !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage .pos-primary-command:is(:hover, :focus-visible) { background: var(--my-shell-primary-strong) !important; border-color: var(--my-shell-primary-strong) !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage .pos-primary-command:focus-visible { box-shadow: 0 0 0 2px var(--my-shell-surface), 0 0 0 4px var(--my-shell-primary) !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage :is(.pos-print-trigger, .pos-keypad button, .product-add, .workspace-tabs button, .pos-search-trigger, .item-more-trigger, .pos-mobile-panel-switcher button) { background: var(--pos2-sales-blue-soft, #eff6ff) !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage .pos-operation-button-drawer { background: var(--pos2-sales-emerald-soft, #e9fbf4) !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage .pos-operation-button-suspend { background: #e6fbff !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage .pos-operation-button-suspend:focus-visible { background: #cffafe !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage :is(.pos-badge-warning, .pos-keypad .key-warn) { background: var(--pos2-sales-amber-soft, #fff7e6) !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage :is(.pos-operation-button-delete, .pos-operation-button-return, .pos-operation-button-exit, .pos-keypad .key-clear) { background: var(--pos2-sales-red-soft, #fff1f2) !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage :is(.pos-operation-button-delete, .pos-operation-button-return, .pos-operation-button-exit, .pos-keypad .key-clear):focus-visible { background: #ffe4e6 !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage #SearchNots.payment-note { background: var(--pos2-action-cyan-soft, #e8f7ff) !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage #SearchNots.payment-note:focus-visible { background: var(--pos2-action-cyan-dark, #0369a1) !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage .payment-note[data-pos2-toggle="keyboard"] { background: var(--pos2-action-indigo-soft, #eef2ff) !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage .payment-note[data-pos2-toggle="keyboard"]:focus-visible { background: var(--pos2-action-indigo-dark, #3730a3) !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage .pos-party-field-shell { background: #fbfdff !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage .pos-party-field-shell :is(.invoice-party-field-icon, [data-party-search-menu-button]) { background: #e5fbff !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage .pos-party-field-shell .invoice-party-detail-field-trigger { background: #f0f7fd !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage .pos-party-field-shell .invoice-party-menu-trigger { background: #f7f3fd !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document.pos2-restaurant-document .pos2-legacy-stage .my-document-payment-methods button[data-payment-value] { background: var(--payment-option-bg-end) !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document.pos2-restaurant-document .pos2-legacy-stage .my-document-payment-methods button[data-payment-value]:not(.is-active):not([aria-pressed="true"]):focus-visible { background: var(--payment-option-hover-bg) !important; } html:root body .erp-opr-invoice-shell.pos2-restaurant-document.pos2-restaurant-document .pos2-legacy-stage .my-document-payment-methods button[data-payment-value]:is(.is-active, [aria-pressed="true"]) { background: var(--payment-option-active-end) !important; } html:root body .pos2-restaurant-document .pos2-legacy-stage .pos-mobile-panel-switcher { background: #f1f7ff !important; } html:root body .pos2-restaurant-document .delivery-amount-field { background: #f0fdfa !important; } html:root body .pos2-restaurant-document .invoice-lines-table, html:root body .erp-opr-invoice-shell .invoice-lines-table .my-document-empty-lines .invoice-empty-icon { background: rgba(236, 246, 248, .92) !important; } }