/*! * Oxia application theme for Bootstrap 5 (self-hosted font) * ------------------------------------------------------------ * Application-wide look and feel. The palette, typography and * component rules below were first designed for Accounting -> Reports * (2026-09-08) and then promoted here so every module shares them. * * Sections: * 1) Font-face (self-hosted Source Sans 3) * 2) Design tokens (--au-*) and Bootstrap token mapping * 3) Global base (typography, links, numbers) * 4) Layout primitives: side navigation shell, headers, toolbars, * filter bars, segmented controls, section labels * 5) Bootstrap components: cards, buttons, forms, tabs, badges, * tables, modals, navbar, dropdowns, pagination * 6) Report / tree tables (.rpt-*) used by Accounting -> Reports and * any other view that renders a hierarchical figures table * 7) Charts (.rpt-chart-*) * 8) Responsive system (breakpoints, overflow safety, datalist shell, * touch targets, modals, navigation drawer) * 9) Print * 10) Gantt (.gantt-*) — Manufacturing schedule overview * 12) Left menu (personal choice) and phone menu (.sf-side, .sf-rail, .sf-panel, .sf-mbar, .sf-msheet) * * Usage: load Bootstrap 5 CSS first, then this file. * Font files expected next to this file: ./fonts/SourceSans3-{Regular,SemiBold,Bold}.woff2 */ /* ============================================================ 1) Font-face (self-hosted Source Sans 3) ============================================================ */ @font-face{ font-family: "Source Sans 3"; src: url("./fonts/SourceSans3-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: "Source Sans 3"; src: url("./fonts/SourceSans3-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face{ font-family: "Source Sans 3"; src: url("./fonts/SourceSans3-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ============================================================ 2) Design tokens ============================================================ */ :root{ --au-font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --au-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Ink */ --au-ink-900: #0b1220; --au-ink-800: #111827; --au-ink-700: #1f2937; --au-ink-600: #374151; --au-muted: #6b7280; /* secondary text, labels, codes */ --au-faint: #9aa3ad; /* zero values, hints */ --au-faint-2: #c3c9d0; /* "n/a" placeholders */ /* Brand */ --au-navy: #0b3d5c; /* headings, table header text, totals rule */ --au-navy-700: #083b5c; --au-primary: #0b6aa2; /* accent: active nav, links, chevrons, segmented buttons */ --au-primary-600: #095a8a; --au-primary-soft:#e6f0f7; /* Surfaces & borders */ --au-surface-0: #ffffff; --au-surface-1: #fbfcfd; /* toolbars, sub-table backdrop */ --au-surface-2: #f6f8fa; /* side nav, table header, page body */ --au-surface-3: #eef2f6; /* section rows */ --au-hover: #f8fafc; /* row hover, subtotal */ --au-hover-2: #eceff3; /* nav item hover, neutral badge */ --au-border: #e3e7ec; /* panel borders */ --au-border-2: #cfd6de; /* control borders, header rule */ --au-border-3: #9aa6b2; /* subtotal rule */ --au-rule: #eef0f3; /* hairline row separators */ /* Status */ --au-success: #198754; --au-success-ink: #146c43; --au-success-soft: #d1f2df; --au-warning: #d97706; --au-warning-ink: #664d03; --au-warning-soft: #fff3cd; --au-danger: #b02a37; --au-danger-ink: #842029; --au-danger-soft: #f8d7da; --au-info: #0e7490; /* Shape & type scale */ --au-radius-sm: .25rem; --au-radius: 6px; --au-radius-lg: .5rem; --au-fs-xs: 0.74rem; /* nav group labels, badges */ --au-fs-sm: 0.79rem; /* field labels, sub-table headers, section labels */ --au-fs-md: 0.875rem; /* table headers, entry rows, notes */ --au-fs: 0.93rem; /* table body */ --au-fs-ui: 0.94rem; /* nav items, subtitles */ } /* Bootstrap token mapping */ :root{ --bs-body-font-family: var(--au-font-sans); --bs-font-monospace: var(--au-font-mono); --bs-body-bg: var(--au-surface-2); --bs-body-color: var(--au-ink-700); --bs-secondary-color: var(--au-muted); --bs-tertiary-bg: var(--au-surface-2); --bs-border-color: var(--au-border); --bs-link-color: var(--au-primary); --bs-link-hover-color: var(--au-navy-700); --bs-link-color-rgb: 11, 106, 162; --bs-link-hover-color-rgb: 8, 59, 92; --bs-primary: var(--au-primary); --bs-primary-rgb: 11, 106, 162; --bs-success: var(--au-success); --bs-success-rgb: 25, 135, 84; --bs-warning: var(--au-warning); --bs-warning-rgb: 217, 119, 6; --bs-danger: var(--au-danger); --bs-danger-rgb: 176, 42, 55; --bs-info: var(--au-info); --bs-info-rgb: 14, 116, 144; --bs-border-radius-sm: var(--au-radius-sm); --bs-border-radius: var(--au-radius); --bs-border-radius-lg: var(--au-radius-lg); --bs-focus-ring-color: rgba(11, 106, 162, 0.25); } /* ============================================================ 3) Global base ============================================================ */ body{ letter-spacing: .05px; text-rendering: optimizeLegibility; } h1,h2,h3,h4,h5,h6{ font-weight: 700; color: var(--au-navy); } h1{ font-size: 1.5rem; } h2{ font-size: 1.3rem; } h3{ font-size: 1.25rem; } h4{ font-size: 1.1rem; } h5{ font-size: 1rem; } h6{ font-size: 0.9rem; } a{ color: var(--au-primary); } a:hover{ color: var(--au-navy-700); } .text-muted, .text-secondary{ color: var(--au-muted) !important; } .money, .num, .table .money, .table .num{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .num, .money{ text-align: right; } .neg{ color: var(--au-danger); } .zero{ color: var(--au-faint); } /* Small uppercase label used above groups of things (side nav groups, chart sections, filter labels). */ .au-label, .au-section-label{ display: block; font-size: var(--au-fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--au-muted); font-weight: 600; } /* Inline "code" prefix in front of a label (account number, product id) */ .au-code{ color: var(--au-muted); display: inline-block; min-width: 3.2rem; margin-right: 4px; font-size: var(--au-fs-md); font-variant-numeric: tabular-nums; } /* Dotted in-app link (opens another record) */ .au-link, .rpt-link{ color: var(--au-primary); text-decoration: none; border-bottom: 1px dotted var(--au-primary); } .au-link:hover, .rpt-link:hover{ color: var(--au-navy-700); } /* ============================================================ 4) Layout primitives ============================================================ */ /* Shell: white panel with a left side navigation and a main column. Generic aliases (.au-shell etc) plus the original .rpt-* names. */ .au-shell, .rpt-shell{ display: flex; gap: 0; min-height: calc(100vh - 120px); background: var(--au-surface-0); border: 1px solid var(--au-border); border-radius: var(--au-radius); overflow: hidden; } .au-nav, .rpt-nav{ width: 230px; flex: 0 0 230px; background: var(--au-surface-2); border-right: 1px solid var(--au-border); padding: 10px 0; } .au-nav-group, .rpt-nav-group{ font-size: var(--au-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--au-muted); padding: 12px 16px 4px 16px; font-weight: 600; } .au-nav-item, .rpt-nav-item{ display: flex; align-items: center; gap: 9px; padding: 6px 16px; color: var(--au-ink-700); text-decoration: none; font-size: var(--au-fs-ui); border-left: 3px solid transparent; } .au-nav-item:hover, .rpt-nav-item:hover{ background: var(--au-hover-2); color: var(--au-navy); } .au-nav-item.active, .rpt-nav-item.active{ background: var(--au-surface-0); border-left-color: var(--au-primary); color: var(--au-navy); font-weight: 600; } .au-nav-item i, .rpt-nav-item i{ color: var(--au-muted); width: 16px; text-align: center; } .au-nav-item.active i, .rpt-nav-item.active i{ color: var(--au-primary); } .au-nav-select, .rpt-nav-select{ display: none; margin: 8px; width: auto; } .au-main, .rpt-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* Settings page (sys/settings/entity_settings): one row per setting - what it is on the left, its control in a fixed-width column on the right. Masked = a secret shown as dots without being a password field (a password field makes the browser offer to save it). */ .au-settings .au-toolbar{ justify-content: space-between; } .au-settings-search{ max-width: 26rem; } .au-settings-body{ padding: 4px 18px 18px 18px; } .au-settings-group{ margin: 18px 0 2px 0; } /* an embedded editor view (two-factor policy) brings its own container/cards: drop its outer gutters */ .au-settings-panel{ padding-top: 8px; } .au-settings-panel .container-fluid{ padding-left: 0; padding-right: 0; } .au-settings-panel .col-xl-11{ flex: 0 0 100%; max-width: 100%; width: 100%; } .au-setting{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem); gap: 6px 24px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--au-rule); } .au-setting:last-child{ border-bottom: 0; } .au-setting.is-saving{ opacity: 0.6; } .au-setting-title{ font-weight: 600; color: var(--au-navy); } .au-setting-description{ color: var(--au-ink-700); font-size: var(--au-fs-ui); margin-top: 2px; max-width: 70ch; } .au-setting-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: var(--au-fs-sm); } .au-setting-key{ color: var(--au-muted); background: transparent; padding: 0; font-size: inherit; user-select: all; } .au-setting-history{ color: var(--au-muted); text-decoration: none; } .au-setting-history:hover{ color: var(--au-primary); } .au-setting-control{ justify-self: stretch; } .au-setting-control .form-control, .au-setting-control .form-select{ font-size: var(--au-fs); } .au-setting-switch{ display: flex; align-items: center; gap: 8px; padding-left: 0; min-height: 31px; } .au-setting-switch .form-check-input{ float: none; margin: 0; width: 2.4em; height: 1.25em; cursor: pointer; } .au-setting-switch .form-check-label{ color: var(--au-muted); font-size: var(--au-fs-ui); } .au-setting-masked{ -webkit-text-security: disc; } .au-setting-control sf-dialog > div > div.text-end{ text-align: left !important; } /* denser rows (authorization switches: many per page, one line of help at most) */ .au-setting-compact{ padding: 7px 0; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); } /* Authorizations view (sys/authorization_matrix): the same shell, embedded in an expanded list row / a tab / the New role dialog - so no viewport-high minimum */ .au-authz{ min-height: 0; } .au-authz-id{ color: var(--au-ink-700); background: transparent; padding: 0; font-size: var(--au-fs-md); overflow-wrap: anywhere; } .au-authz-note{ margin-top: 12px; padding: 10px 12px; background: var(--au-surface-1); border: 1px solid var(--au-rule); border-radius: var(--au-radius); color: var(--au-ink-700); font-size: var(--au-fs-ui); max-width: 90ch; } .au-authz-count-on{ color: var(--au-primary); font-weight: 600; } .au-setting-switch .form-check-input.border-danger{ border-color: var(--bs-danger) !important; } .au-setting-history-panel{ grid-column: 1 / -1; background: var(--au-surface-1); border: 1px solid var(--au-rule); border-radius: var(--au-radius); padding: 8px 12px; } /* Below lg the generic shell hides its side nav behind a select; a settings page is navigated by category all the time, so here the nav stays visible as a swipeable strip of chips instead. */ @media (max-width: 991.98px){ .au-settings .au-nav{ display: flex; flex: 0 0 auto; width: auto; gap: 6px; padding: 8px 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--au-border); scrollbar-width: none; -webkit-overflow-scrolling: touch; /* fade the right edge: there is more to swipe to */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .au-settings .au-nav::-webkit-scrollbar{ display: none; } .au-settings .au-nav::after{ content: ""; flex: 0 0 20px; } .au-settings .au-nav-item{ flex: 0 0 auto; gap: 6px; padding: 7px 12px; border: 1px solid var(--au-border); border-radius: 999px; background: var(--au-surface-0); white-space: nowrap; } .au-settings .au-nav-item.active{ background: var(--au-primary); border-color: var(--au-primary); color: #fff; } .au-settings .au-nav-item.active i, .au-settings .au-nav-item.active small{ color: #fff !important; } } @media (max-width: 767.98px){ .au-setting{ grid-template-columns: minmax(0, 1fr); } .au-settings-body{ padding: 4px 12px 12px 12px; } .au-settings-search{ max-width: none; } } /* Page header: title + subtitle on the left, actions on the right */ .au-header, .rpt-header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px 6px 18px; } .au-title, .rpt-title{ font-size: 1.25rem; font-weight: 700; color: var(--au-navy); margin: 0; } .au-subtitle, .rpt-subtitle{ color: var(--au-muted); font-size: var(--au-fs-ui); margin-top: 2px; } .au-actions, .rpt-actions{ display: flex; gap: 6px; align-items: center; } /* Toolbar strip (period selectors, layout toggles) */ .au-toolbar, .rpt-toolbar{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 18px; border-top: 1px solid var(--au-rule); border-bottom: 1px solid var(--au-rule); background: var(--au-surface-1); } /* Filter bar (labelled selects) */ .au-filters, .rpt-filters{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 8px 18px; border-bottom: 1px solid var(--au-rule); } .au-filter, .rpt-filter{ min-width: 160px; } .au-filter-wide, .rpt-filter-wide{ min-width: 260px; } .au-filter sf-select strong, .rpt-filter sf-select strong{ font-size: var(--au-fs-sm); color: var(--au-muted); font-weight: 600; } .au-filter sf-select small, .rpt-filter sf-select small{ display: none; } .au-filter sf-select .ts-control, .au-filter sf-select .ts-wrapper, .rpt-filter sf-select .ts-control, .rpt-filter sf-select .ts-wrapper{ font-size: var(--au-fs); } .au-field-label, .rpt-label{ display: block; font-size: var(--au-fs-sm); color: var(--au-muted); font-weight: 600; margin-bottom: 2px; } .au-toggles, .rpt-toggles{ display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding-bottom: 4px; } .au-check, .rpt-check{ font-size: 0.83rem; color: var(--au-ink-600); display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; } .au-check input, .rpt-check input{ margin: 0; } .au-spacer, .rpt-spacer{ flex: 1 1 auto; } /* Segmented control */ .au-seg, .rpt-seg{ display: inline-flex; border: 1px solid var(--au-border-2); border-radius: var(--au-radius); overflow: hidden; background: var(--au-surface-0); } .au-seg button, .rpt-seg button{ border: 0; background: transparent; padding: 4px 12px; font-size: 0.83rem; color: var(--au-ink-600); border-right: 1px solid var(--au-border-2); } .au-seg button:last-child, .rpt-seg button:last-child{ border-right: 0; } .au-seg button.active, .rpt-seg button.active{ background: var(--au-primary); color: #fff; font-weight: 600; } .rpt-year, .rpt-month{ width: auto; min-width: 110px; } .rpt-date{ width: 150px; } .rpt-dash{ color: var(--au-muted); } .rpt-stepper{ display: inline-flex; gap: 2px; } .rpt-subtabs{ padding: 8px 18px 0 18px; } /* Body area of the shell */ .au-body, .rpt-body{ padding: 10px 18px 18px 18px; flex: 1 1 auto; min-width: 0; } .au-body sf-litloader, .au-body sf-litloader > *, .rpt-body sf-litloader, .rpt-body sf-litloader > *{ display: block; min-width: 0; max-width: 100%; } .au-loading, .rpt-loading{ padding: 40px; text-align: center; color: var(--au-muted); } .rpt-body{ position: relative; } /* report reload with data on screen (period / year / filter change): keep the old table visible but dimmed and blocked, with a spinner pill on top - the sfFetch progress bar is skipped for these */ .rpt-body.rpt-busy > *:not(.rpt-busy-overlay){ opacity: .45; pointer-events: none; transition: opacity .15s; } .rpt-busy-overlay{ position: absolute; top: 16px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 5; } .rpt-busy-overlay > span{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--au-surface-0, #fff); color: inherit; border: 1px solid var(--au-border, #ddd); box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: var(--au-fs-md); } .au-note, .rpt-note{ color: var(--au-muted); font-size: var(--au-fs-md); margin-top: 8px; } .rpt-alert{ margin: 0 0 10px 0; } /* Reports · Group result: company bar + setup dialog */ .rpt-companies{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 18px; border-bottom: 1px solid var(--au-rule); background: var(--au-surface-1); } .rpt-companies .rpt-label{ margin: 0; } .rpt-companies .rpt-check.off{ color: var(--au-muted); text-decoration: line-through; } .rpt-group-table td, .rpt-group-table th{ vertical-align: middle; } .rpt-group-table input.form-control-sm{ max-width: 200px; } .rpt-group-table .sub, .rpt-rule .sub{ font-size: var(--au-fs-sm); color: var(--au-muted); } .rpt-rule{ padding: 8px 0; border-top: 1px solid var(--au-rule); } .rpt-rule .rpt-check{ font-weight: 600; } .rpt-rule .rpt-rule-fields{ display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; padding-left: 24px; } .rpt-rule .rpt-rule-fields label{ font-size: var(--au-fs-sm); color: var(--au-muted); display: block; } .rpt-rule .rpt-rule-fields input{ min-width: 320px; } .rpt th.company-col{ white-space: normal; } .rpt-modal .modal-body{ max-height: 75vh; overflow: auto; } /* ============================================================ 5) Bootstrap components ============================================================ */ /* Cards */ .card{ background: var(--au-surface-0); border: 1px solid var(--au-border); border-radius: var(--au-radius); } .card-header{ background: var(--au-surface-2); border-bottom: 1px solid var(--au-border); font-weight: 600; color: var(--au-navy); padding: .5rem .9rem; } .card-title{ color: var(--au-navy); font-weight: 700; font-size: 1rem; } .card-footer{ background: var(--au-surface-1); border-top: 1px solid var(--au-border); } /* Buttons */ .btn{ border-radius: var(--au-radius); font-weight: 600; } .btn-sm{ font-size: 0.875rem; } .btn-primary{ --bs-btn-bg: var(--au-primary); --bs-btn-border-color: var(--au-primary-600); --bs-btn-hover-bg: var(--au-primary-600); --bs-btn-hover-border-color: var(--au-navy); --bs-btn-active-bg: var(--au-navy); --bs-btn-active-border-color: var(--au-navy); --bs-btn-disabled-bg: var(--au-primary); --bs-btn-disabled-border-color: var(--au-primary); } .btn-outline-primary{ --bs-btn-color: var(--au-primary); --bs-btn-border-color: var(--au-primary); --bs-btn-hover-bg: var(--au-primary); --bs-btn-hover-border-color: var(--au-primary); --bs-btn-active-bg: var(--au-primary-600); --bs-btn-active-border-color: var(--au-primary-600); } .btn-secondary{ --bs-btn-bg: var(--au-muted); --bs-btn-border-color: var(--au-muted); --bs-btn-hover-bg: var(--au-ink-600); --bs-btn-hover-border-color: var(--au-ink-600); } .btn-outline-secondary{ --bs-btn-color: var(--au-ink-600); --bs-btn-border-color: var(--au-border-2); --bs-btn-hover-color: var(--au-navy); --bs-btn-hover-bg: var(--au-hover-2); --bs-btn-hover-border-color: var(--au-border-2); --bs-btn-active-color: var(--au-navy); --bs-btn-active-bg: var(--au-hover-2); --bs-btn-active-border-color: var(--au-border-2); } .btn-success{ --bs-btn-bg: var(--au-success); --bs-btn-border-color: var(--au-success); --bs-btn-hover-bg: var(--au-success-ink); --bs-btn-hover-border-color: var(--au-success-ink); } .btn-danger{ --bs-btn-bg: var(--au-danger); --bs-btn-border-color: var(--au-danger); --bs-btn-hover-bg: var(--au-danger-ink); --bs-btn-hover-border-color: var(--au-danger-ink); } .btn-outline-danger{ --bs-btn-color: var(--au-danger); --bs-btn-border-color: var(--au-danger); --bs-btn-hover-bg: var(--au-danger); --bs-btn-hover-border-color: var(--au-danger); } .btn-link{ --bs-btn-color: var(--au-primary); --bs-btn-hover-color: var(--au-navy-700); text-decoration: none; font-weight: 600; } .btn-link:hover{ text-decoration: underline; } .btn:focus-visible, .form-control:focus, .form-select:focus{ box-shadow: 0 0 0 0.2rem rgba(11, 106, 162, 0.2); } /* Forms */ .form-label{ font-weight: 600; color: var(--au-muted); font-size: var(--au-fs-sm); margin-bottom: 2px; } .form-label.small{ font-size: var(--au-fs-sm); } .form-control, .form-select{ border-color: var(--au-border-2); min-height: 2.5rem; font-size: var(--au-fs); } .form-control-sm, .form-select-sm{ min-height: calc(1.5em + .5rem + 2px); } .form-control:focus, .form-select:focus{ border-color: var(--au-primary); } .form-check-input:checked{ background-color: var(--au-primary); border-color: var(--au-primary); } .form-check-input:focus{ border-color: var(--au-primary); box-shadow: 0 0 0 0.2rem rgba(11, 106, 162, 0.2); } .form-text{ color: var(--au-muted); font-size: var(--au-fs-sm); } .input-group-text{ background: var(--au-surface-2); border-color: var(--au-border-2); color: var(--au-muted); font-size: var(--au-fs); } /* Tom-select (sf-select) controls follow form-control sizing */ .ts-wrapper .ts-control{ border-color: var(--au-border-2); font-size: var(--au-fs); } .ts-wrapper.focus .ts-control{ border-color: var(--au-primary); box-shadow: 0 0 0 0.2rem rgba(11, 106, 162, 0.2); } .ts-dropdown .active{ background: var(--au-primary-soft); color: var(--au-navy); } /* Tabs */ .nav-tabs{ border-bottom: 1px solid var(--au-border); } .nav-tabs .nav-link{ color: var(--au-ink-600); font-size: var(--au-fs-ui); font-weight: 600; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .45rem .9rem; margin-bottom: -1px; } .nav-tabs .nav-link:hover{ color: var(--au-navy); border-bottom-color: var(--au-border-2); } .nav-tabs .nav-link.active{ color: var(--au-navy); background: transparent; border-bottom-color: var(--au-primary); } .nav-pills .nav-link{ color: var(--au-ink-600); font-size: var(--au-fs-ui); font-weight: 600; } .nav-pills .nav-link.active{ background: var(--au-primary); } /* Badges: quiet pill style like the report status badges */ .badge{ font-size: var(--au-fs-xs); font-weight: 600; padding: .2em .6em; border-radius: 10px; } .badge.bg-success{ background: var(--au-success-soft) !important; color: var(--au-success-ink) !important; } .badge.bg-warning{ background: var(--au-warning-soft) !important; color: var(--au-warning-ink) !important; } .badge.bg-danger{ background: var(--au-danger-soft) !important; color: var(--au-danger-ink) !important; } .badge.bg-secondary, .badge.bg-light{ background: var(--au-hover-2) !important; color: var(--au-ink-600) !important; } .badge.bg-info{ background: var(--au-primary-soft) !important; color: var(--au-navy) !important; } .badge.bg-primary{ background: var(--au-primary) !important; color: #fff !important; } /* Alerts */ .alert{ border-radius: var(--au-radius); font-size: var(--au-fs); } .alert-warning{ --bs-alert-bg: var(--au-warning-soft); --bs-alert-border-color: #f3dc9a; --bs-alert-color: var(--au-warning-ink); } .alert-danger{ --bs-alert-bg: var(--au-danger-soft); --bs-alert-border-color: #f1b4ba; --bs-alert-color: var(--au-danger-ink); } .alert-success{ --bs-alert-bg: var(--au-success-soft); --bs-alert-border-color: #a9e2c3; --bs-alert-color: var(--au-success-ink); } .alert-info{ --bs-alert-bg: var(--au-primary-soft); --bs-alert-border-color: #b7d3e6; --bs-alert-color: var(--au-navy); } /* Tables (ledger-first): compact, tabular numbers, sticky quiet header */ .table{ font-size: var(--au-fs); font-variant-numeric: tabular-nums; --bs-table-border-color: var(--au-rule); --bs-table-striped-bg: var(--au-surface-1); --bs-table-hover-bg: var(--au-hover); --bs-table-active-bg: var(--au-primary-soft); color: var(--au-ink-700); } .table > :not(caption) > * > *{ padding: 5px 10px; border-bottom-color: var(--au-rule); } .table-sm > :not(caption) > * > *{ padding: 4px 8px; } .table thead th{ background: var(--au-surface-2); border-bottom: 2px solid var(--au-border-2); font-weight: 600; color: var(--au-navy); font-size: var(--au-fs-md); white-space: nowrap; } .table-responsive thead th{ position: sticky; top: 0; z-index: 2; } .table-light, .table > .table-light > *{ --bs-table-bg: var(--au-surface-2); --bs-table-color: var(--au-navy); } .table tfoot th, .table tfoot td{ font-weight: 700; border-top: 2px solid var(--au-navy); background: var(--au-surface-0); } .table tbody tr.section td, .table tbody tr.table-section td{ background: var(--au-surface-3) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.76rem; color: var(--au-navy); } .table .code{ color: var(--au-muted); font-size: var(--au-fs-md); } .table td.text-danger, .table .text-danger{ color: var(--au-danger) !important; } .table td.text-success, .table .text-success{ color: var(--au-success) !important; } /* Pagination */ .pagination{ --bs-pagination-font-size: var(--au-fs); --bs-pagination-color: var(--au-primary); --bs-pagination-active-bg: var(--au-primary); --bs-pagination-active-border-color: var(--au-primary); --bs-pagination-border-color: var(--au-border-2); --bs-pagination-hover-bg: var(--au-hover-2); --bs-pagination-hover-color: var(--au-navy); } /* Modals */ .modal-content{ border: 1px solid var(--au-border); border-radius: var(--au-radius); } .modal-header{ background: var(--au-surface-2); border-bottom: 1px solid var(--au-border); padding: .75rem 1rem; } .modal-title{ color: var(--au-navy); font-size: 1.05rem; font-weight: 700; } .modal-footer{ background: var(--au-surface-1); border-top: 1px solid var(--au-border); } /* List groups, dropdowns, accordion */ .list-group-item{ border-color: var(--au-border); font-size: var(--au-fs); } .list-group-item.active{ background: var(--au-primary); border-color: var(--au-primary); } .dropdown-menu{ border-color: var(--au-border); border-radius: var(--au-radius); font-size: var(--au-fs-ui); box-shadow: 0 6px 18px rgba(11, 61, 92, 0.08); } .dropdown-item{ color: var(--au-ink-700); } .dropdown-item:hover, .dropdown-item:focus{ background: var(--au-hover-2); color: var(--au-navy); } .dropdown-item.active, .dropdown-item:active{ background: var(--au-primary); color: #fff; } .dropdown-header{ font-size: var(--au-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--au-muted); font-weight: 600; } .accordion-button{ color: var(--au-navy); font-weight: 600; font-size: var(--au-fs-ui); } .accordion-button:not(.collapsed){ background: var(--au-surface-2); color: var(--au-navy); box-shadow: none; } .accordion-item{ border-color: var(--au-border); } /* Top navbar */ .navbar.bg-body-tertiary{ --bs-tertiary-bg: var(--au-surface-0); background: var(--au-surface-0) !important; border-bottom: 1px solid var(--au-border); } .navbar .navbar-brand{ color: var(--au-navy); font-weight: 700; } .navbar .nav-link{ color: var(--au-ink-700); font-size: var(--au-fs-ui); font-weight: 600; } .navbar .nav-link:hover, .navbar .nav-link.show{ color: var(--au-primary); } .navbar .nav-link.active{ color: var(--au-navy); } /* Breadcrumb, progress, spinner, tooltip */ .breadcrumb{ font-size: var(--au-fs-ui); } .breadcrumb-item.active{ color: var(--au-muted); } .progress{ background: var(--au-hover-2); } .progress-bar{ background: var(--au-primary); } .spinner-border{ color: var(--au-primary); } /* ============================================================ 6) Report / tree tables (.rpt-*) ============================================================ */ .rpt-tools{ display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 6px; } .rpt-tools button{ font-size: 0.75rem; } .rpt-wrap{ overflow: auto; border: 1px solid var(--au-border); border-radius: var(--au-radius); max-height: calc(100vh - 210px); } table.rpt{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--au-fs); font-variant-numeric: tabular-nums; } table.rpt thead th{ position: sticky; top: 0; z-index: 2; background: var(--au-surface-2); border-bottom: 2px solid var(--au-border-2); padding: 8px 10px; font-weight: 600; color: var(--au-navy); white-space: nowrap; text-align: right; font-size: var(--au-fs-md); } table.rpt thead th:first-child{ text-align: left; min-width: 320px; } table.rpt td{ padding: 5px 10px; border-bottom: 1px solid var(--au-rule); vertical-align: top; } table.rpt td.n{ text-align: right; white-space: nowrap; } table.rpt td.n.neg{ color: var(--au-danger); } table.rpt td.n.zero{ color: var(--au-faint); } table.rpt td .na{ color: var(--au-faint-2); } table.rpt td.t{ color: var(--au-ink-600); } table.rpt td.st{ white-space: nowrap; } table.rpt td.l{ white-space: nowrap; } table.rpt td.l .lbl{ white-space: normal; } /* label cell spanning empty value columns (row.label_span): one line, ellipsis, full text in title */ table.rpt td.l.clip .lbl, table.rpt td.l.clip .sub{ display: inline-block; max-width: min(60vw, 640px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } table.rpt td.l.clip .sub{ display: block; } table.rpt td.l.clip:not([colspan]) .lbl, table.rpt td.l.clip[colspan="1"] .lbl{ max-width: 300px; } table.rpt .code{ color: var(--au-muted); display: inline-block; min-width: 3.2rem; margin-right: 4px; font-size: var(--au-fs-md); } table.rpt .sub{ color: var(--au-muted); font-size: var(--au-fs-sm); margin-left: 24px; white-space: normal; } .rpt-chev{ border: 0; background: transparent; width: 20px; height: 20px; padding: 0; margin-right: 4px; color: var(--au-primary); vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; } .rpt-chev i{ transition: transform 0.12s ease; display: inline-block; } .rpt-chev.open i{ transform: rotate(90deg); } .rpt-chev-space{ display: inline-block; width: 24px; } .rpt-row.expandable{ cursor: pointer; } .rpt-row.expandable:hover td{ background: var(--au-hover); } .rpt-section td{ background: var(--au-surface-3) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.76rem; color: var(--au-navy); } .rpt-group td, .bold td{ font-weight: 600; } .rpt-subtotal td{ font-weight: 700; border-top: 1px solid var(--au-border-3); background: var(--au-hover); } .rpt-total td{ font-weight: 700; border-top: 2px solid var(--au-navy); border-bottom: 3px double var(--au-navy) !important; background: var(--au-surface-0); } .rpt-info td{ color: var(--au-muted); font-style: italic; font-weight: 400; } .muted td{ color: var(--au-muted); font-weight: 400; } .rpt-entry td{ font-size: var(--au-fs-md); } .rpt-kpi td.l{ font-weight: 500; } .rpt-status{ margin-left: 8px; font-size: var(--au-fs-md); } .rpt-info-icon{ margin-left: 6px; color: var(--au-faint); font-size: 0.75rem; cursor: help; } .rpt-status.ok{ color: var(--au-success); } .rpt-status.warn{ color: var(--au-warning); } .rpt-badge{ display: inline-block; font-size: var(--au-fs-xs); padding: 1px 7px; border-radius: 10px; background: var(--au-hover-2); color: var(--au-ink-600); text-transform: lowercase; } .rpt-badge-paid{ background: var(--au-success-soft); color: var(--au-success-ink); } .rpt-badge-partially_paid{ background: var(--au-warning-soft); color: var(--au-warning-ink); } .rpt-badge-none{ background: var(--au-hover-2); color: var(--au-ink-600); } .rpt-badge-overpaid, .rpt-badge-creditloss{ background: var(--au-danger-soft); color: var(--au-danger-ink); } .rpt-sub > td{ background: var(--au-surface-1); padding: 4px 10px 10px 10px; } table.rpt-subtable{ width: 100%; border-collapse: collapse; font-size: var(--au-fs-md); background: var(--au-surface-0); border: 1px solid var(--au-border); } table.rpt-subtable th{ position: static; font-size: var(--au-fs-sm); color: var(--au-muted); font-weight: 600; background: var(--au-surface-2); padding: 4px 8px; border-bottom: 1px solid var(--au-border); text-align: right; } table.rpt-subtable th.l{ text-align: left; } table.rpt-subtable td{ padding: 3px 8px; border-bottom: 1px solid #f1f3f5; } table.rpt-subtable td.l{ padding-left: 8px !important; } table.rpt-subtable.wide{ width: auto; min-width: min(50%, 720px); } table.rpt-subtable.wide td.l, table.rpt-subtable.wide th.l{ white-space: nowrap; } .rpt-empty{ color: var(--au-muted); font-size: var(--au-fs-md); font-style: italic; padding: 4px 0; } .rpt-empty-report{ padding: 30px; text-align: center; color: var(--au-muted); } /* only the grand total (last footer row) sticks to the bottom; subtotal rows above it (inventory split into raw materials / WIP / finished goods) scroll with the table - all footer rows sticky at bottom:0 stacked them on top of each other and only the last one showed */ table.rpt tfoot tr:last-child td{ position: sticky; bottom: 0; background: var(--au-surface-0); z-index: 1; } /* ============================================================ 7) Charts (.rpt-chart-*) ============================================================ */ .rpt-chart-single{ height: 320px; border: 1px solid var(--au-border); border-radius: var(--au-radius); padding: 10px 12px 6px 12px; margin-bottom: 12px; background: var(--au-surface-0); } .rpt-chart-single .t{ font-size: 0.82rem; font-weight: 600; color: var(--au-navy); margin-bottom: 4px; } .rpt-chart-single .cv{ height: 270px; position: relative; } .rpt-chart-section{ font-size: var(--au-fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--au-muted); font-weight: 600; margin: 14px 0 6px 0; } .rpt-chart-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; } .rpt-chart-card{ border: 1px solid var(--au-border); border-radius: var(--au-radius); padding: 10px 12px 6px 12px; background: var(--au-surface-0); } .rpt-chart-card .t{ font-size: 0.82rem; font-weight: 600; color: var(--au-navy); } .rpt-chart-card .s{ font-size: 0.7rem; color: var(--au-muted); margin-bottom: 4px; min-height: 1em; } .rpt-chart-card .cv{ height: 190px; position: relative; } /* charts flagged wide (many series / long category axis) take the full grid width and more height */ .rpt-chart-card.wide{ grid-column: 1 / -1; } .rpt-chart-card.wide .cv{ height: 300px; } /* ============================================================ 8) Responsive system ------------------------------------------------------------ One breakpoint set for the whole app (Bootstrap's): phone < 576px (iPhone 12 mini = 360px wide) sm 576-767 (large phones) md 768-991 (tablet portrait: collapsed top nav, drawer) lg+ >= 992 (tablet landscape + desktop: full nav) Rules: no page-level horizontal scroll (each wide component scrolls inside its own .sf-scroll-x container), comfortable touch targets below lg, one-column forms on phones, near-full-screen modals on phones, drawer navigation below lg. Do not add per-view media rules when one of the primitives below solves it. ============================================================ */ /* 8.1 Overflow safety: the page must never scroll sideways. Layout children get min-width:0 so flex/grid items can shrink; anything wide scrolls inside .sf-scroll-x. */ html, body{ max-width: 100%; } #main, #app_content, main-app{ min-width: 0; display: block; } /* NOTE: no ".row > * { min-width:0 }" - Bootstrap columns never shrink (flex-shrink:0) and that rule would zero the min-content width of table cells holding a .row. */ img, svg:not(.rpt-chart-single svg), canvas, video, iframe{ max-width: 100%; } sf-litloader, sf-datalist, sf-tabs, sf-tab-content, sf-input, sf-select, sf-datepicker, sf-textarea, sf-checkbox{ min-width: 0; } sf-datalist, sf-tabs, sf-tab-content, sf-litloader{ display: block; } pre{ max-width: 100%; overflow-x: auto; } /* long unbreakable tokens (URLs, ids, hashes) wrap instead of pushing panels wide */ .card, .alert, .modal-body, .toast-body, .sf-dl-expand-wrap, .dropdown-item{ overflow-wrap: break-word; } /* Any component that can be wider than its host scrolls here, not the page. Dropdown togglers inside get popper strategy "fixed" (sf-responsive.js) so their menus are not clipped by the scroll container. */ .sf-scroll-x{ overflow-x: auto; overflow-y: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .sf-scroll-x > .table{ margin-bottom: 0; } /* hide the scrollbar gutter on desktop when nothing overflows */ .sf-scroll-x::-webkit-scrollbar{ height: 8px; } .sf-scroll-x::-webkit-scrollbar-thumb{ background: var(--au-border-2); border-radius: 4px; } /* Sticky first column for wide grids that scroll sideways (week grids, matrices):
... */ .sf-sticky-first > .table > thead > tr > th:first-child, .sf-sticky-first > .table > tbody > tr > td:first-child, .sf-sticky-first > .table > tbody > tr > th:first-child, .sf-sticky-first > .table > tfoot > tr > th:first-child, .sf-sticky-first > .table > tfoot > tr > td:first-child{ position: sticky; left: 0; z-index: 1; background: var(--au-surface-0); box-shadow: inset -1px 0 0 var(--au-border); } .sf-sticky-first > .table > thead > tr > th:first-child{ z-index: 3; background: var(--au-surface-2); } .table-responsive{ -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* 8.2 Data list (sf-datalist) shell: head row, filters panel, table, pager */ .sf-dl{ min-width: 0; } .sf-dl-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; min-width: 0; } .sf-dl-title{ flex: 1 1 auto; min-width: 0; } .sf-dl-title .sf-dl-label{ margin: 0; font-weight: 600; color: var(--au-navy); font-size: 1rem; } .sf-dl-title .sf-dl-desc{ margin: 0; color: var(--au-muted); font-size: var(--au-fs-md); } .sf-dl-title .sf-dl-desc:empty{ display: none; } .sf-dl-search{ flex: 1 1 260px; min-width: 0; max-width: 420px; } .sf-dl-search sf-input .row, .sf-dl-search sf-input [class*="col"]{ width: 100%; max-width: 100%; flex: 1 1 100%; } .sf-dl-search sf-input small:empty{ display: none; } .sf-dl-tools{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; } .sf-dl-tools .btn{ white-space: nowrap; } .sf-dl-filters{ display: none; padding: 8px 10px; margin: 2px 0 8px 0; border: 1px solid var(--au-border); border-radius: var(--au-radius); background: var(--au-surface-1); } .sf-dl-filters.show{ display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-end; } .sf-dl-filters > *{ display: block; flex: 1 1 240px; max-width: 420px; min-width: 0; } .sf-dl-filters sf-input .row, .sf-dl-filters sf-select .row, .sf-dl-filters sf-datepicker .row, .sf-dl-filters sf-checkbox .row{ margin: 0; } .sf-dl-filters sf-input .row > *, .sf-dl-filters sf-select .row > *, .sf-dl-filters sf-datepicker .row > *{ width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; } .sf-dl-filters sf-input .row > * > [class*="col"], .sf-dl-filters sf-datepicker .row > * > [class*="col"]{ width: 100%; max-width: 100%; } @media (max-width: 575.98px){ .sf-dl-filters > *{ flex-basis: 100%; max-width: none; } } .sf-dl-table{ min-width: 0; } .sf-dl-table .table{ margin-bottom: 0; } .sf-dl-table .table > :not(caption) > * > *{ vertical-align: top; } .sf-dl-table td, .sf-dl-table th{ min-width: 0; } /* Inline editors in cells: flexible width with a floor, so a table with several click-to-edit columns shares the available width instead of forcing every editor to its 20-character intrinsic width (which pushed the Actions column off-screen even on desktop). */ .sf-dl-table td sf-input input, .sf-dl-table td sf-datepicker input, .sf-dl-table td sf-textarea textarea{ width: 100%; min-width: 6rem; } .sf-dl-table td sf-input, .sf-dl-table td sf-datepicker, .sf-dl-table td sf-select, .sf-dl-table td sf-textarea{ display: block; min-width: 6rem; } .sf-dl-table td sf-input .row, .sf-dl-table td sf-datepicker .row, .sf-dl-table td sf-select .row, .sf-dl-table td sf-checkbox .row{ margin: 0; } .sf-dl-table td sf-input .row > *, .sf-dl-table td sf-datepicker .row > *, .sf-dl-table td sf-select .row > *, .sf-dl-table td sf-checkbox .row > *{ padding: 0; } .sf-dl-expand{ padding: 0 !important; } /* The expanded detail row is exactly as wide as the list's visible area (--sf-dl-vw, kept up to date by sf-datalist's ResizeObserver) and sticks to the left edge, so when the table itself scrolls sideways the detail panel stays in view and never widens the outer table. Falls back to the classic width:0 + min-width:100% cell trick until the variable is set. */ .sf-dl-expand-wrap{ position: sticky; left: 0; width: var(--sf-dl-vw, 0); min-width: var(--sf-dl-vw, 100%); max-width: var(--sf-dl-vw, 100%); box-sizing: border-box; overflow-x: auto; overflow-y: hidden; /* horizontal padding = Bootstrap row gutter, so bare .row children (most detail views stack fields in .row without a .container) do not overflow */ padding: 8px .75rem 12px .75rem; border-left: 3px solid var(--au-primary); background: var(--au-surface-1); } /* Bootstrap places the backdrop under body. A sticky expanded row creates a stacking context that traps its modal below that backdrop. Release stickiness only while a descendant modal is shown; closing/removing it restores the row. */ .sf-dl-expand-wrap:has(.modal.show){ position: static; } /* secondary "more info" line under a row (additionalinfo_row_url / moreinfo_row) */ .sf-dl-expand-wrap.sf-dl-info{ border-left: 0; background: transparent; padding: 0 .75rem 6px .75rem; font-size: var(--au-fs-md); text-align: right; } .sf-dl-pager{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0 4px 0; } .sf-dl-pager-summary{ color: var(--au-muted); font-size: var(--au-fs-md); margin: 0; white-space: nowrap; } /* list is fetching: dim the current rows, block clicks on stale data, spinner text in the pager */ .sf-dl-loading .sf-scroll-x{ opacity: .55; pointer-events: none; transition: opacity .15s ease-in .3s; } .sf-dl-loading-text{ display: inline-flex; align-items: center; gap: .4rem; } .sf-dl-pager-controls{ display: flex; align-items: center; gap: 8px; margin-left: auto; } .sf-dl-pager .pagination{ margin: 0; } .sf-dl-pager .page-link{ cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; } .sf-dl-pager .page-link.disabled{ color: var(--au-faint); pointer-events: none; } .sf-dl-pager .page-link.sf-dl-pager-page{ pointer-events: none; color: var(--au-ink-600); background: var(--au-surface-2); } .sf-dl-pager select.form-select{ width: auto; min-width: 4.5rem; padding-right: 2rem; } .sf-dl-multiops{ margin-left: 0; } /* Dashboard card grid: cards grow to fill each row (one per row on phones and tablet portrait, side by side on desktop) instead of a ragged flex-wrap of fixed-width cards. */ .dashboard-grid > sf-dashboard-card{ flex: 1 1 280px; min-width: 0; max-width: 100%; } .dashboard-grid > sf-dashboard-card > .sf-dashboard-card{ min-width: 0 !important; } @media (min-width: 1200px){ /* desktop keeps the cards' natural widths */ .dashboard-grid > sf-dashboard-card{ flex: 0 1 auto; } } /* 8.3 Tabs scroll sideways instead of wrapping into three rows on phones */ @media (max-width: 767.98px){ .nav-tabs{ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar{ display: none; } .nav-tabs .nav-item{ flex: 0 0 auto; } .nav-tabs .nav-link{ white-space: nowrap; } /* fade hint while more tabs are hidden to the right (sf-tabs toggles the class) */ .nav-tabs.sf-tabs-more{ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); } } /* 8.4 Touch-friendly controls below lg (phones and tablets) */ @media (max-width: 991.98px){ .btn{ min-height: 2.5rem; padding-top: .45rem; padding-bottom: .45rem; } .btn-sm{ min-height: 2.125rem; padding-top: .3rem; padding-bottom: .3rem; } .btn-close{ padding: .75rem; } .dropdown-item{ padding: .6rem 1rem; } .dropdown-menu{ max-width: calc(100vw - 1rem); } .dropdown-item{ white-space: normal; } .nav-tabs .nav-link{ padding: .6rem .9rem; } .form-check-input{ width: 1.15em; height: 1.15em; } .page-link{ min-height: 2.5rem; } .table .btn-sm{ min-height: 2rem; } .toast{ max-width: calc(100vw - 2rem); } } /* 8.5 Phones: text inputs at 16px so iOS Safari does not zoom on focus, one-column forms, tighter page gutters, stacked headers. */ @media (max-width: 575.98px){ /* page gutter = Bootstrap row gutter, so a bare .row inside a px-0 container spans exactly the viewport (no 4px sideways scroll) and its columns keep 12px of breathing room from the screen edge */ #main{ padding-left: .75rem !important; padding-right: .75rem !important; } .form-control, .form-select, .ts-wrapper .ts-control, .ts-wrapper .ts-control input{ font-size: 1rem; } .form-control-sm, .form-select-sm{ font-size: .9rem; } input[size]{ max-width: 100%; } .modal-body .container-fluid{ padding-left: 0; padding-right: 0; } .card-body{ padding: .75rem; } .au-header, .rpt-header{ flex-direction: column; align-items: stretch; padding: 12px 12px 4px 12px; } .au-actions, .rpt-actions{ flex-wrap: wrap; } .au-toolbar, .rpt-toolbar, .au-filters, .rpt-filters{ padding: 8px 12px; } .au-body, .rpt-body{ padding: 8px 10px 14px 10px; } .au-filter, .rpt-filter, .au-filter-wide, .rpt-filter-wide{ min-width: 0; flex: 1 1 100%; } table.rpt thead th:first-child{ min-width: 180px; } .rpt-chart-grid{ grid-template-columns: 1fr; } .rpt-wrap{ max-height: none; } .sf-dl-search{ order: 3; flex-basis: 100%; max-width: none; } .sf-dl-pager-summary{ font-size: var(--au-fs-sm); } .sf-dl-pager .page-link{ padding-left: .5rem; padding-right: .5rem; } .sf-dl-expand-wrap{ padding: 6px .75rem 10px .75rem; } h1{ font-size: 1.3rem; } h2{ font-size: 1.2rem; } .toast-container{ left: 0; right: 0; padding: .5rem !important; } .toast{ max-width: 100%; width: 100%; } } /* 8.6 Modals: near-full-screen sheets on phones, internal scrolling always */ .modal-dialog{ max-width: min(var(--sf-modal-max, 500px), calc(100vw - 1rem)); } .modal-dialog.modal-lg{ --sf-modal-max: 800px; } .modal-dialog.modal-xl{ --sf-modal-max: 1140px; } .modal-dialog.modal-sm{ --sf-modal-max: 300px; } .modal-content{ max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; } .modal-body{ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; } .modal-footer{ flex-wrap: wrap; gap: .4rem; } @media (max-width: 575.98px){ /* bottom sheet: small dialogs sit within thumb reach at the bottom, large ones grow upwards until they fill the screen and scroll inside */ .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl, .modal-dialog.modal-sm{ max-width: none; width: auto; margin: .5rem; min-height: calc(100dvh - 1rem); display: flex; align-items: flex-end; } .modal-content{ max-height: calc(100dvh - 1rem); width: 100%; } .modal.fade .modal-dialog{ transform: translate(0, 24px); } .modal.show .modal-dialog{ transform: none; } .modal-footer .btn{ flex: 1 1 auto; } .modal-footer{ padding: .6rem .75rem; } .modal-header{ padding: .6rem .75rem; } .modal-body{ padding: .75rem; } } /* 8.7 Dropdown/popover overlays: never wider than the viewport, long labels wrap, popups parented to body (see sf-responsive.js) stay on top */ .dropdown-menu{ max-width: calc(100vw - 1rem); } .ts-dropdown.sf-popup-body{ z-index: 1080; } .datepicker.sf-popup-body{ z-index: 1080; } /* 8.8 Top navigation: drawer below lg. The Bootstrap collapse still drives open/closed state (sf-responsive.js closes it on select/outside/escape/ navigation and locks body scroll); this only restyles the open panel. */ .navbar.sticky-top{ z-index: 1030; } .navbar .navbar-toggler{ min-width: 2.75rem; min-height: 2.75rem; padding: .35rem .6rem; } .navbar .navbar-brand{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 6rem); } .navbar .nav-item.dropdown.active > .nav-link{ color: var(--au-primary); } .navbar .dropdown-item.active, .navbar .dropdown-item:active{ background: var(--au-primary-soft); color: var(--au-navy); font-weight: 600; } .sf-nav-backdrop{ display: none; } @media (max-width: 991.98px){ .navbar .navbar-collapse{ position: fixed; top: var(--sf-navbar-h, 56px); left: 0; bottom: 0; width: min(340px, 88vw); height: auto !important; background: var(--au-surface-0); border-right: 1px solid var(--au-border); box-shadow: 0 12px 32px rgba(11, 61, 92, 0.18); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .5rem .75rem 2.5rem .75rem; z-index: 1035; transition: none; } .navbar .navbar-collapse.collapsing{ height: auto !important; transition: none; } .navbar .navbar-nav{ margin-bottom: .25rem !important; } .navbar .nav-item{ border-bottom: 1px solid var(--au-rule); } .navbar .nav-item:last-child{ border-bottom: 0; } .navbar .nav-link{ display: flex; align-items: center; min-height: 2.9rem; padding: .5rem .5rem; font-size: 1rem; } .navbar .nav-link.dropdown-toggle::after{ margin-left: auto; transition: transform .15s ease; } .navbar .nav-link.dropdown-toggle.show::after{ transform: rotate(180deg); } .navbar .nav-item.dropdown.active > .nav-link{ font-weight: 700; color: var(--au-navy); box-shadow: inset 3px 0 0 var(--au-primary); padding-left: .75rem; } .navbar .dropdown-menu{ border: 0; box-shadow: none; background: var(--au-surface-2); border-radius: var(--au-radius); margin: 0 0 .5rem 0; padding: .25rem 0; width: 100%; max-width: none; } .navbar .dropdown-item{ display: flex; align-items: center; min-height: 2.75rem; padding: .5rem 1rem .5rem 1.5rem; font-size: var(--au-fs-ui); white-space: normal; } .navbar .dropdown-item-text{ padding-left: 1.5rem; } .navbar .dropdown-divider{ margin: .25rem 1rem; } .navbar #server-task-spinner-wrapper{ padding: .5rem; } body.sf-nav-open{ overflow: hidden; } body.sf-nav-open .sf-nav-backdrop{ display: block; position: fixed; top: var(--sf-navbar-h, 56px); left: 0; right: 0; bottom: 0; background: rgba(11, 29, 45, 0.45); /* below the sticky navbar (1030): the drawer is fixed INSIDE the navbar's stacking context, so it can only be above the backdrop if the backdrop is below the navbar itself */ z-index: 1029; } } @media (max-width: 575.98px){ .navbar .navbar-collapse{ width: min(340px, 86vw); } } /* Side-navigation shells (.au-shell) fold to a select below lg */ @media (max-width: 991.98px){ .au-shell, .rpt-shell{ flex-direction: column; min-height: 0; } .au-nav, .rpt-nav{ display: none; } .au-nav-select, .rpt-nav-select{ display: block; } } /* ============================================================ 10) Gantt (.gantt-*) — Manufacturing → Schedule overview (app_modules/manufacturing/views/schedule/schedule_overview.hbs.js) ============================================================ */ .gantt{ display: flex; border: 1px solid var(--au-border); border-radius: var(--au-radius); background: var(--au-surface-0); overflow: hidden; } .gantt-side{ flex: 0 0 300px; max-width: 300px; border-right: 1px solid var(--au-border-2); background: var(--au-surface-1); } .gantt-side-head{ height: 88px; border-bottom: 1px solid var(--au-border-2); background: var(--au-surface-2); display: flex; flex-direction: column; } .gantt-side-head-row{ padding: 0 .6rem; display: flex; align-items: center; font-size: var(--au-fs-sm); color: var(--au-navy); font-weight: 600; white-space: nowrap; overflow: hidden; } .gantt-h-month{ height: 24px; } .gantt-h-week{ height: 18px; } .gantt-h-day{ height: 26px; } .gantt-h-load{ height: 20px; } .gantt-side-row{ padding: .15rem .6rem; border-bottom: 1px solid var(--au-rule); cursor: pointer; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .gantt-side-row:hover{ background: var(--au-hover); } .gantt-side-main{ display: flex; align-items: center; gap: .3rem; font-size: var(--au-fs-md); line-height: 1.2; white-space: nowrap; overflow: hidden; } .gantt-side-number{ font-weight: 600; color: var(--au-ink-800); } .gantt-side-sub{ font-size: var(--au-fs-xs); color: var(--au-muted); line-height: 1.2; } .gantt-status-dot{ width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .gantt-status-dot--draft{ background: var(--au-faint); } .gantt-status-dot--planned{ background: var(--au-info); } .gantt-status-dot--production{ background: var(--au-warning); } .gantt-status-dot--done{ background: var(--au-success); } .gantt-main{ flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; } .gantt-canvas{ position: relative; min-width: 100%; } .gantt-head{ position: relative; height: 88px; border-bottom: 1px solid var(--au-border-2); background: var(--au-surface-2); } .gantt-h-row{ position: relative; } .gantt-h-cell{ position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: var(--au-fs-xs); color: var(--au-ink-600); border-left: 1px solid var(--au-rule); overflow: hidden; white-space: nowrap; } .gantt-h-month .gantt-h-cell{ font-weight: 600; color: var(--au-navy); justify-content: flex-start; padding-left: .4rem; border-left-color: var(--au-border-2); } .gantt-h-week .gantt-h-cell{ color: var(--au-muted); } .gantt-h-daycell{ flex-direction: column; line-height: 1; gap: 2px; } .gantt-h-daycell small{ font-size: .62rem; color: var(--au-faint); text-transform: uppercase; } .gantt-h-daycell.gantt-today span{ background: var(--au-primary); color: #fff; border-radius: 999px; padding: 1px 5px; } .gantt-load{ font-weight: 600; color: var(--au-ink-600); } .gantt-load--1{ background: #e6f0f7; } .gantt-load--2{ background: #c9def0; } .gantt-load--3{ background: #a6c9e6; } .gantt-load--4{ background: #6fa6d3; color: #fff; } .gantt-body{ position: relative; } .gantt-grid{ position: absolute; inset: 0; } .gantt-col{ position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--au-rule); } .gantt-weekend{ background: rgba(0, 0, 0, .035); } .gantt-col.gantt-today{ background: var(--au-primary-soft); } .gantt-today-line{ position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--au-primary); z-index: 3; pointer-events: none; } .gantt-row{ position: relative; border-bottom: 1px solid var(--au-rule); } .gantt-row--schedulable{ cursor: copy; } .gantt-row--schedulable:hover{ background: rgba(11, 106, 162, .04); } .gantt-bar{ position: absolute; top: 7px; height: 18px; border-radius: 4px; z-index: 2; display: flex; align-items: center; overflow: hidden; font-size: var(--au-fs-xs); color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); user-select: none; touch-action: none; } .gantt-bar--editable{ cursor: grab; } .gantt-bar--dragging{ cursor: grabbing; opacity: .85; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); } .gantt-bar--draft{ background: var(--au-faint); color: var(--au-ink-800); } .gantt-bar--planned{ background: var(--au-info); } .gantt-bar--production{ background: var(--au-warning); } .gantt-bar--done{ background: var(--au-success); opacity: .8; } .gantt-bar--late{ outline: 2px solid var(--au-danger); outline-offset: -1px; } .gantt-bar-text{ padding: 0 .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; flex: 1 1 auto; } .gantt-bar-sub{ font-weight: 400; opacity: .9; } .gantt-handle{ position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 3; } .gantt-handle--l{ left: 0; } .gantt-handle--r{ right: 0; } .gantt-bar:hover .gantt-handle{ background: rgba(255, 255, 255, .35); } .gantt-bar-actual{ position: absolute; top: 27px; height: 4px; border-radius: 2px; background: var(--au-ink-700); z-index: 2; pointer-events: none; } .gantt-bar-late-tail{ position: absolute; top: 11px; height: 10px; z-index: 1; border-radius: 0 4px 4px 0; opacity: .85; pointer-events: none; background: repeating-linear-gradient(135deg, var(--au-danger-soft) 0 4px, var(--au-danger) 4px 6px); } .gantt-legend .gantt-legend-swatch{ position: static; display: inline-block; width: 1.1rem; height: .7rem; border-radius: 3px; vertical-align: middle; margin-right: .2rem; opacity: 1; outline: 0; } .gantt-legend .gantt-legend-actual{ background: var(--au-ink-700); height: .3rem; } .gantt-search{ width: 11rem; } .gantt-page .au-toolbar{ padding-left: 0; padding-right: 0; border-top: 0; background: transparent; } sf-dialog[name="gantt-mfo-dialog"] > div > div.text-end{ display: none; } @media (max-width: 767.98px){ .gantt-side{ flex-basis: 160px; max-width: 160px; } .gantt-side-sub{ display: none; } .gantt-search{ width: 8rem; } } /* ============================================================ 11) Voucher quick entry (.qe-*) — Accounting → Vouchers → New voucher (app_modules/accounting/views/vouchers/voucher_quick_entry.hbs.js) Generated VAT / counter rows sit under their base row, slightly recessed. ============================================================ */ .qe-table tr.qe-auto > td{ background: var(--au-surface-1); } .qe-table tr.qe-auto .form-control, .qe-table tr.qe-auto .form-select{ color: var(--au-muted); } .qe-table tr.qe-auto > td:first-child{ box-shadow: inset 3px 0 0 var(--au-border-2); } /* ============================================================ 9) Print ============================================================ */ @media print{ body{ background:#fff !important; color:#000 !important; } .card{ box-shadow:none !important; } .au-nav, .au-toolbar, .au-filters, .au-actions, .au-nav-select, .rpt-nav, .rpt-toolbar, .rpt-filters, .rpt-actions, .rpt-subtabs, .rpt-nav-select{ display: none !important; } .au-shell, .rpt-shell{ border: 0; } } /* =================================================================================================================== * UI foundation (work package ux-foundation F1 / F4): the classes of the shared helpers in docroot/assets/sf/sf-ui.js * (sfField, sfPageTitle fallback, sfSegments, sfMainCell, sfRowMenu, sfStatusActions) and the grouped "mega" module * menu (.sf-mega*, D6). Same rules as accounting's acc-* classes (accounting_ui.js injects those itself, unchanged); * .acc-mega* is an alias here. Kept identical in accounting-bootstrap5-theme.css and -classic.css. * =================================================================================================================== */ .sf-page-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;margin:.25rem 0 .75rem 0} .sf-page-title h5{margin:0;font-weight:600} .sf-field-label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.15rem;line-height:1.2rem;height:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sf-field-help{font-size:.75rem;line-height:1.1rem;margin-top:.15rem;color:var(--bs-secondary-color,#6c757d)} .sf-field .ts-wrapper{min-width:0} .sf-field .ts-control{flex-wrap:nowrap} .sf-field .ts-control>.item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%} .sf-static{min-height:calc(1.5em + .5rem + 2px);background:var(--bs-secondary-bg,#e9ecef)} .sf-field .ts-wrapper.single.form-control{padding:0!important;min-height:0;height:auto} .sf-field .ts-wrapper.single .ts-control{min-height:calc(1.5em + .5rem + 2px);padding-top:.25rem;padding-bottom:.25rem;font-size:.875rem} .sf-field .ts-wrapper.single.has-items:not(.focus) .ts-control>input{min-width:0!important;width:0!important;flex:0 0 0;padding:0} .sf-seg{display:flex;gap:4px;margin:0 0 .6rem;overflow-x:auto;white-space:nowrap;scrollbar-width:thin} .sf-seg-tab{border:0;background:none;border-radius:999px;padding:.3rem .85rem;font-size:.9rem;color:#374151;flex:0 0 auto} .sf-seg-tab:hover{background:#f3f4f6}.sf-seg-tab.on{background:#111827;color:#fff} .sf-seg-n{font-size:.75rem;opacity:.7;margin-left:.3rem} /* ux-lists S1 (R-61 / R-62 / R-66): the list toolbar of sf-datalist (list_toolbar / .views): saved views, full-width * search, Filters button + panel (desktop popover, phone block), chips, Columns, Export; identifier column; selection * column. Kept identical in accounting-bootstrap5-theme.css and -classic.css. */ .sf-dl-tb{display:flex;flex-direction:column;gap:.5rem;margin:0 0 .5rem;min-width:0} .sf-dl-views .sf-seg{margin:0;gap:6px;padding-bottom:2px} .sf-dl-views .sf-seg-tab{border:1px solid var(--bs-border-color,#dee2e6);background:var(--bs-body-bg,#fff);padding:.3rem .8rem} .sf-dl-views .sf-seg-tab.on{background:#111827;border-color:#111827;color:#fff} .sf-dl-tb-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0} .sf-dl-tb-search{position:relative;flex:1 1 320px;min-width:0} .sf-dl-tb-search > .bi-search{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--bs-secondary-color,#6b7280);pointer-events:none;z-index:2} .sf-dl-tb-search input.form-control,.sf-dl-tb-search sf-input input{padding-left:2.2rem;width:100%} .sf-dl-tb-search sf-input .row,.sf-dl-tb-search sf-input [class*="col"]{width:100%;max-width:100%;flex:1 1 100%;margin:0;padding:0} .sf-dl-tb-search sf-input small:empty{display:none} .sf-dl-tb-spacer{flex:1 1 auto} .sf-dl-tb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto} .sf-dl-tb-tools .btn{white-space:nowrap} .sf-dl-nocaret::after{display:none} .sf-dl-fbtn.active-f{border-color:var(--bs-primary,#0d6efd);color:var(--bs-primary,#0d6efd)} .sf-dl-fcount{display:inline-block;min-width:1.25rem;padding:0 .35rem;border-radius:999px;background:var(--bs-primary,#0d6efd);color:#fff;font-size:.75rem;line-height:1.25rem;text-align:center} .sf-dl-fp{position:absolute;right:0;top:calc(100% + 6px);z-index:1050;width:min(560px,calc(100vw - 1rem));background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#dee2e6);border-radius:.6rem;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:14px 16px} .sf-dl-fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:end} .sf-dl-fp-item{min-width:0}.sf-dl-fp-item.wide{grid-column:1 / -1} .sf-dl-fp-label{font-size:.8rem;font-weight:600;margin-bottom:.2rem} .sf-dl-fp-item sf-input .row,.sf-dl-fp-item sf-select .row,.sf-dl-fp-item sf-datepicker .row,.sf-dl-fp-item sf-checkbox .row{margin:0} .sf-dl-fp-item sf-input .row > *,.sf-dl-fp-item sf-select .row > *,.sf-dl-fp-item sf-datepicker .row > *{width:100%;max-width:100%;flex:0 0 100%;padding:0} .sf-dl-fp-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px} .sf-dl-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .sf-dl-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .35rem .15rem .65rem;border-radius:999px;background:var(--bs-primary-bg-subtle,#e7f0ff);color:var(--bs-primary-text-emphasis,#0a3a8c);font-size:.85rem} .sf-dl-chip-x{border:0;background:none;padding:0 .25rem;line-height:1;color:inherit;opacity:.75}.sf-dl-chip-x:hover{opacity:1} .sf-dl-chips-clear{padding:0 .25rem} .sf-dl-cols{max-height:min(420px,70vh);overflow-y:auto;min-width:14rem} .sf-dl-colitem{display:flex;align-items:center;cursor:pointer;white-space:nowrap}.sf-dl-colitem.locked{opacity:.65;cursor:default} .sf-dl-ident{font-weight:600;white-space:nowrap} /* sf-datalist header sorting (inventory-stock-analysis S1): the header label is the button */ .sf-dl-sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;font-weight:inherit;white-space:nowrap} .sf-dl-sort:hover,.sf-dl-sort.active{color:var(--bs-link-color,#0d6efd)} .sf-dl-sort:focus-visible{outline:2px solid var(--bs-link-color,#0d6efd);outline-offset:2px;border-radius:2px} .sf-dl-sort .bi{font-size:.8em} .sf-dl-sort .sf-dl-sort-idle{opacity:0;transition:opacity .1s} .sf-dl-sort:hover .sf-dl-sort-idle,.sf-dl-sort:focus-visible .sf-dl-sort-idle{opacity:.45} a.sf-dl-ident-link{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--bs-link-color,#0d6efd)} a.sf-dl-ident-link:hover .sf-dl-ident-t{text-decoration:underline} .sf-dl-chev{font-size:.75rem;transition:transform .12s ease;color:var(--bs-secondary-color,#6b7280)} a.sf-dl-ident-link.open .sf-dl-chev{transform:rotate(90deg)} .sf-dl-table td.sf-dl-sel,.sf-dl-table th.sf-dl-sel{width:1%;white-space:nowrap} @media (max-width: 575.98px){ .sf-dl-tb-search{flex-basis:100%} .sf-dl-tb-tools{margin-left:0} .sf-dl-fp{position:static;width:100%;flex:1 1 100%;box-shadow:none;margin-top:4px} .sf-dl-fp-grid{grid-template-columns:1fr} } .sf-main{min-width:0;line-height:1.25}.sf-main .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-main .s{font-size:.8rem;color:var(--bs-secondary-color,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sf-main .t a{color:inherit;text-decoration:none}.sf-main .t a:hover{text-decoration:underline} .sf-rowmenu .dropdown-toggle::after{display:none} sf-datalist.sf-list .sf-dl-title{display:none}sf-datalist.sf-list .sf-dl-search{flex:1 1 auto;max-width:none} .dropdown-menu:has(> .sf-mega),.dropdown-menu:has(> .acc-mega){padding:.5rem .25rem} /* Sized to its groups (navbar-menus S1): the groups sit side by side, each as wide as its longest item, and the menu is as * wide as its groups - no empty space for missing groups, no item running into the next group. In the expanded navbar * (lg, navbar-expand-lg) the menu is capped at the viewport, where the groups wrap to another row, and sf-ui.js keeps * it inside the viewport (shown.bs.dropdown: shifted left only as far as needed). In the collapsed navbar the groups * wrap inside the panel; on a phone they stack. */ @media (min-width: 992px){.navbar .dropdown-menu:has(> .sf-mega),.navbar .dropdown-menu:has(> .acc-mega){width:max-content;max-width:calc(100vw - 1rem)}} .sf-mega-grid,.acc-mega-grid{display:flex;flex-wrap:wrap;gap:.25rem .5rem} .sf-mega-col,.acc-mega-col{flex:0 0 auto;min-width:9rem} .sf-mega-col:not(:has(a)),.acc-mega-col:not(:has(a)){display:none} .nav-item.dropdown:has(> .dropdown-menu > .sf-mega):not(:has(.sf-mega-col a)){display:none} /* a module menu with no page the role may open (lifecycle review 2026-11-06, D-shell-1) */ .sf-mega-col .dropdown-header,.acc-mega-col .dropdown-header{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#6b7280;padding:.35rem 1rem .25rem} .sf-mega-col .dropdown-item,.acc-mega-col .dropdown-item{display:flex;align-items:center;gap:.5rem;padding:.35rem 1rem;white-space:nowrap} .sf-mega-col .dropdown-item>.bi,.acc-mega-col .dropdown-item>.bi{color:#4b5563;width:1rem;text-align:center} @media (max-width: 767.98px){.sf-mega-col,.acc-mega-col{flex-basis:100%}} /* =================================================================================================================== * UX audit fixes slice B (decisions W5-W15, W21; owner-approved mockups tmp/ux-audit-fixes/mockups, 2026-11-01). * Kept identical in accounting-bootstrap5-theme.css and -classic.css. * W6 / W21 one control height: --sf-ctl-h 32 px on desktop, 44 px below 576 px, for text / number / date / picker / * select / textarea line, the list search box and the list toolbar buttons (--sf-tb-h); one border, radius, * white background, focus ring; pickers and selects show the same caret. * W5 no green "valid" state anywhere; red + one fix-it line (.invalid-feedback / .sf-field-error) only after * the field was left or Save pressed (sf-input / sf-select / sf-datepicker / sf-checkbox decide when); * "Saved" tick by the label (.sf-saved); read-only values as plain text (.sf-static); neutral checkbox. * W7 / W8 dialog footer (.sf-dlg-foot), sf-confirm. W9 / W10 toasts (.sf-toast). W11 navbar More (.sf-nav-*). * W12 / W13 phone card rows (.sf-cards), status column, empty state, tab fades. W14 upload area (.sf-upload). * =================================================================================================================== */ :root{ --sf-ctl-h: 32px; --sf-ctl-fs: .875rem; --sf-ctl-px: .625rem; --sf-ctl-ring: 0 0 0 .2rem rgba(11, 106, 162, .2); --sf-tb-h: 32px; /* list search box + list toolbar buttons (owner W21: the same 32 px) */ --sf-tb-fs: .875rem; --sf-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } @media (max-width: 575.98px){ :root{ --sf-ctl-h: 44px; --sf-ctl-fs: 1rem; --sf-tb-h: 44px; --sf-tb-fs: 1rem; } } /* ---- W6: one control size and look (every form, dialog, filter panel and record tab) ---- */ input.form-control:not([type=file]):not([type=color]):not([type=range]):not(.form-control-lg), select.form-control, .form-select:not(.form-select-lg), .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control, .input-group > .input-group-text{ min-height: var(--sf-ctl-h); font-size: var(--sf-ctl-fs); border-color: var(--au-border-2); border-radius: var(--au-radius); } input.form-control:not([type=file]):not([type=color]):not([type=range]):not(.form-control-lg), select.form-control, .form-select:not(.form-select-lg), .input-group > .input-group-text{ height: var(--sf-ctl-h); padding-top: 0; padding-bottom: 0; padding-left: var(--sf-ctl-px); } input.form-control:not([type=file]):not([type=color]):not([type=range]):not(.form-control-lg){ padding-right: var(--sf-ctl-px); background-color: #fff; } .input-group > .input-group-text{ padding-right: var(--sf-ctl-px); background: var(--au-surface-2); color: var(--au-muted); } textarea.form-control{ min-height: var(--sf-ctl-h); font-size: var(--sf-ctl-fs); padding: .3rem var(--sf-ctl-px); border-color: var(--au-border-2); border-radius: var(--au-radius); line-height: 1.4; background-color: #fff; } /* a select shows the select caret (C3: