/* ========================================================================== Apex UI Refresh — apex-refresh.css April 2026 Single stylesheet for all UI modernization overrides. Loaded AFTER existing CSS so these rules take priority. Strategy: - CSS custom properties in :root define the design tokens - Override ProUI/Bootstrap selectors to modernize in place - Page-specific overrides use scoped selectors - Tailwind utility classes handle layout/spacing in HTML ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design Tokens (CSS Custom Properties) -------------------------------------------------------------------------- */ :root { /* Semantic theme tokens */ --apex-accent: #1f6feb; --apex-accent-strong: #1558c0; --apex-accent-soft: #dbeafe; --apex-bg-app: #eef3f8; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #f7f9fc; --apex-bg-elevated: #ffffff; --apex-border-subtle: #d7dee7; --apex-border-strong: #b7c3d4; --apex-text-primary: #142033; --apex-text-secondary: #5c6c82; --apex-text-light: #8c9ab0; --apex-text-inverse: #ffffff; --apex-nav-bg: #122033; --apex-nav-text: #ffffff; --apex-brand-bar-bg: #122033; --apex-brand-bar-text: #d9e4f4; --apex-sidebar-bg: #122033; --apex-sidebar-text: #d9e4f4; --apex-shadow-color: rgba(15, 23, 42, 0.16); /* Existing token aliases, now driven by semantic theme tokens */ --apex-primary: var(--apex-accent); --apex-primary-light: var(--apex-accent-strong); --apex-primary-dark: var(--apex-nav-bg); --apex-primary-subtle: var(--apex-accent-soft); --apex-accent-dark: var(--apex-accent-strong); --apex-secondary: #5C99CF; /* Neutrals */ --apex-text: var(--apex-text-primary); --apex-text-muted: var(--apex-text-secondary); --apex-bg: var(--apex-bg-app); --apex-bg-card: var(--apex-bg-surface-1); --apex-border: var(--apex-border-subtle); /* Feedback */ --apex-success: #16a34a; --apex-warning: #eab308; --apex-danger: #dc2626; --apex-info: #0ea5e9; /* Shape */ --apex-radius-sm: 4px; --apex-radius: 8px; --apex-radius-lg: 12px; --apex-radius-xl: 16px; --apex-radius-full: 9999px; /* Shadows — modern, subtle, layered */ --apex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --apex-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --apex-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --apex-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); /* Typography */ --apex-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --apex-font-size-xs: 0.75rem; /* 12px */ --apex-font-size-sm: 0.8125rem; /* 13px */ --apex-font-size-base: 0.875rem; /* 14px */ --apex-font-size-lg: 1rem; /* 16px */ --apex-font-size-xl: 1.25rem; /* 20px */ --apex-font-size-2xl: 1.5rem; /* 24px */ /* Transitions */ --apex-transition: 150ms ease; } /* -------------------------------------------------------------------------- 1a. Per-Theme Token Overrides These [data-apex-theme] attribute selectors override the :root defaults for each named theme. The attribute is set on by TriSysProUI.ApplyThemeSelection() in js/app.js. Every theme provides the same token set as :root, so any rule using a CSS custom property automatically reflects the active theme without needing any JavaScript to rewrite inline styles. -------------------------------------------------------------------------- */ /* Light (default) — clean blue-on-white, professional tone */ html[data-apex-theme="apex-light"] { --apex-accent: #1f6feb; --apex-accent-strong: #1558c0; --apex-accent-soft: #dbeafe; --apex-bg-app: #eef3f8; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #f7f9fc; --apex-bg-elevated: #ffffff; --apex-border-subtle: #d7dee7; --apex-border-strong: #b7c3d4; --apex-text-primary: #142033; --apex-text-secondary: #5c6c82; --apex-text-light: #8c9ab0; --apex-text-inverse: #ffffff; --apex-nav-bg: #122033; --apex-nav-text: #ffffff; --apex-sidebar-bg: #122033; --apex-sidebar-text: #d9e4f4; } /* Cupcake — warm stone/tan tones, light sidebar */ html[data-apex-theme="apex-cupcake"] { --apex-accent: #946b43; --apex-accent-strong: #7b5533; --apex-accent-soft: #e9ddd0; --apex-bg-app: #f4efe8; --apex-bg-surface-1: #fffdf9; --apex-bg-surface-2: #ede4da; --apex-bg-elevated: #fffaf3; --apex-border-subtle: #ddcdbd; --apex-border-strong: #c8b29c; --apex-text-primary: #34291f; --apex-text-secondary: #6e5b4b; --apex-text-light: #9f8b78; --apex-text-inverse: #fffaf4; --apex-nav-bg: #4c3929; --apex-nav-text: #fff7ef; --apex-sidebar-bg: #5b4431; --apex-sidebar-text: #f0e3d3; } /* Dark — deep navy background, sky-blue accent, the standard dark-mode theme */ html[data-apex-theme="apex-dark"] { --apex-accent: #64d2ff; --apex-accent-strong: #1fb7f2; --apex-accent-soft: #123447; --apex-bg-app: #08111b; --apex-bg-surface-1: #101a27; --apex-bg-surface-2: #172333; --apex-bg-elevated: #132031; --apex-border-subtle: #27384d; --apex-border-strong: #39526f; --apex-text-primary: #eef6ff; --apex-text-secondary: #b3c5da; --apex-text-light: #7e97b2; --apex-text-inverse: #07111b; --apex-nav-bg: #091523; --apex-nav-text: #eef6ff; --apex-sidebar-bg: #0d1724; --apex-sidebar-text: #d6e5f7; } /* Bumblebee — vivid amber/yellow accent, dark sidebar */ html[data-apex-theme="apex-bumblebee"] { --apex-accent: #ffb703; --apex-accent-strong: #e09a00; --apex-accent-soft: #fff1bf; --apex-bg-app: #fffaf0; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #fff4d4; --apex-bg-elevated: #ffffff; --apex-border-subtle: #f0d487; --apex-border-strong: #d8b458; --apex-text-primary: #2b2112; --apex-text-secondary: #645335; --apex-text-light: #987f53; --apex-text-inverse: #1d160b; --apex-nav-bg: #2c2414; --apex-nav-text: #fff6de; --apex-sidebar-bg: #332814; --apex-sidebar-text: #f7e9b8; } /* Emerald — fresh green accent, deep forest sidebar */ html[data-apex-theme="apex-emerald"] { --apex-accent: #3bb273; --apex-accent-strong: #258f58; --apex-accent-soft: #d7f1e2; --apex-bg-app: #f3fbf6; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #e6f6ed; --apex-bg-elevated: #ffffff; --apex-border-subtle: #bfe3cd; --apex-border-strong: #91c3a5; --apex-text-primary: #173127; --apex-text-secondary: #4e6f62; --apex-text-light: #7e9d90; --apex-text-inverse: #f7fff9; --apex-nav-bg: #20463b; --apex-nav-text: #effcf4; --apex-sidebar-bg: #275244; --apex-sidebar-text: #dff5e8; } /* Corporate — mid-blue accent, steel-blue sidebar — business-neutral */ html[data-apex-theme="apex-corporate"] { --apex-accent: #2286c9; --apex-accent-strong: #176ea7; --apex-accent-soft: #d6eaf7; --apex-bg-app: #f4f7fb; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #eaf0f6; --apex-bg-elevated: #ffffff; --apex-border-subtle: #c9d5e1; --apex-border-strong: #9fb3c7; --apex-text-primary: #1c2a3b; --apex-text-secondary: #5d7187; --apex-text-light: #8b9daf; --apex-text-inverse: #f8fbff; --apex-nav-bg: #324055; --apex-nav-text: #f5f8fc; --apex-sidebar-bg: #3a4b62; --apex-sidebar-text: #dbe4ef; } /* Disable pull-to-refresh and overscroll bounce on mobile. Must be on BOTH html and body for Android Chrome compatibility. */ html, body { overscroll-behavior: none; } body { color: var(--apex-text-primary); background-color: var(--apex-bg-app); } /* Global thin scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--apex-border-strong) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-thumb { background: var(--apex-border-strong); border-radius: 3px; } *::-webkit-scrollbar-track { background: transparent; } /* Override ProUI's hardcoded .text-primary blue with the theme accent colour */ html[data-apex-theme] .text-primary, html[data-apex-theme] .text-primary:hover, html[data-apex-theme] a.text-primary, html[data-apex-theme] a.text-primary:hover, html[data-apex-theme] a.text-primary:focus { color: var(--apex-accent) !important; } /* -------------------------------------------------------------------------- 1a. Global — Montserrat on key chrome elements -------------------------------------------------------------------------- */ #sidebar .sidebar-content, #sidebar .sidebar-content a, header.navbar .navbar-brand, header.navbar .nav > li > a { font-family: var(--apex-font-family); } /* -------------------------------------------------------------------------- 1b. Top Navigation Bar (header.navbar) -------------------------------------------------------------------------- */ /* Bar background — clean white with subtle bottom border */ header.navbar.navbar-default { background-color: var(--apex-bg-elevated); border-bottom: 1px solid var(--apex-border-subtle); box-shadow: var(--apex-shadow-sm); } header.navbar.navbar-inverse { background-color: var(--apex-brand-bar-bg); border-bottom: 1px solid var(--apex-brand-bar-bg); box-shadow: none; } /* Lock screen — hide header and sidebar when app is locked */ html.apex-screen-locked[data-apex-theme] #app-caption-fixed-top, html.apex-screen-locked #sidebar { display: none !important; } /* Header toolbar — lock height, prevent content overflow pushing bar taller. We clip by default (otherwise a stray 10 px of inner content shows as a dark-blue strip below the 50 px bar until first hover), then re-enable overflow when the user is hovering or a dropdown is open so the menus (LoggedInUserDropDownMenu, history, add-new) can render below the header. */ #app-caption-fixed-top { height: 50px !important; max-height: 50px !important; overflow: hidden; transition: margin 0.2s ease-out, left 0.2s ease-out !important; } #app-caption-fixed-top:hover, #app-caption-fixed-top:focus-within, #app-caption-fixed-top:has(.open), #app-caption-fixed-top:has(.show-on-hover:hover) { overflow: visible; } /* Header toolbar — flex layout to prevent user avatar wrapping to second line on mobile */ html[data-apex-theme] #app-caption-fixed-top { display: flex !important; flex-wrap: nowrap; align-items: center; } html[data-apex-theme] #app-caption-nav-ul { display: flex !important; flex-wrap: nowrap; align-items: center; flex: 1 1 auto; min-width: 0; float: none !important; } html[data-apex-theme] #app-caption-nav-ul > li { float: none !important; flex-shrink: 0; } html[data-apex-theme] #app-caption-nav-ul > li.toolbar-search-box { flex-shrink: 1; } html[data-apex-theme] #proUI-Right-SideBar-Demo { float: none !important; flex-shrink: 0; margin-left: auto; order: 99; } html[data-apex-theme] #app-caption-fixed-top > .nav.pull-right { float: none !important; flex-shrink: 0; } /* Nav items — white text always, lighter blue hover */ /* 10 Sep 2026: AI button beside the Lookup box is a plain link, not a dropdown-toggle, so give it the same pointer cursor the other toolbar buttons get from Bootstrap. */ header.navbar .nav.navbar-nav-custom > li > a#ai-toolbar-button, header.navbar .nav.navbar-nav-custom > li > a#ai-toolbar-button * { cursor: pointer; } header.navbar .nav.navbar-nav-custom > li > a { color: var(--apex-brand-bar-text) !important; font-size: 1.1875rem; transition: background-color var(--apex-transition), color var(--apex-transition); border-radius: var(--apex-radius-sm); margin: 0 2px; padding: 5px 7px; line-height: 40px; min-width: 44px; text-align: center; } /* Hamburger icon — larger */ header.navbar #show-hide-nav-bar i.fa-bars { font-size: 1.25rem; } header.navbar .nav.navbar-nav-custom > li > a *, header.navbar .nav.navbar-nav-custom > li > a .gi, header.navbar .nav.navbar-nav-custom > li > a .hi, header.navbar .nav.navbar-nav-custom > li > a .si, header.navbar .nav.navbar-nav-custom > li > a .fi, header.navbar .nav.navbar-nav-custom > li > a .fa, header.navbar .nav.navbar-nav-custom > li > a span { color: var(--apex-brand-bar-text) !important; opacity: 1 !important; } header.navbar .nav.navbar-nav-custom > li > a:hover, header.navbar .nav.navbar-nav-custom > li > a:focus, header.navbar .nav.navbar-nav-custom > li > a:hover *, header.navbar .nav.navbar-nav-custom > li > a:focus * { background-color: var(--apex-accent-strong); color: var(--apex-text-inverse) !important; } header.navbar .nav.navbar-nav-custom > li.open > a, header.navbar .nav.navbar-nav-custom > li.open > a * { background-color: var(--apex-accent); color: var(--apex-text-inverse) !important; } /* Nav icons — slightly larger for clarity */ header.navbar .nav.navbar-nav-custom > li > a > i { font-size: 1.125rem; } /* Search box in navbar */ header.navbar #trisys-search { font-family: var(--apex-font-family); font-size: 1.1875rem; border: 1px solid var(--apex-border); border-radius: var(--apex-radius) !important; padding: 6px 12px; transition: border-color var(--apex-transition), box-shadow var(--apex-transition); width: 100% !important; max-width: 200px; min-width: 80px; box-sizing: border-box; } /* Search box container — allow it to shrink on narrow screens */ header.navbar .toolbar-search-box { flex: 1 1 auto; min-width: 80px; max-width: 220px; } header.navbar #trisys-search:focus { border-color: var(--apex-primary); box-shadow: 0 0 0 3px rgba(38, 79, 162, 0.15); outline: none; } /* Dropdown menus from navbar */ header.navbar .dropdown-menu { font-family: var(--apex-font-family); background-color: var(--apex-bg-elevated); border: 1px solid var(--apex-border-subtle); border-radius: var(--apex-radius); box-shadow: var(--apex-shadow-lg); padding: 6px 0; } header.navbar a.dropdown-toggle, header.navbar a.dropdown-toggle i, header.navbar a.dropdown-toggle span, header.navbar .dropdown-menu.dropdown-custom > li:not(.dropdown-header):not(.divider), header.navbar .dropdown-menu > li > a, header.navbar .dropdown-menu > li > a i, header.navbar .dropdown-menu > li > a span { cursor: pointer; } header.navbar .dropdown-menu > li > a { font-size: 1.1875rem; padding: 8px 16px; color: var(--apex-text-primary); transition: background-color var(--apex-transition); } header.navbar .dropdown-menu.dropdown-custom > li { font-size: 1.1875rem; } header.navbar #LoggedInUserDropDownMenu-block li.themed-color a, header.navbar #LoggedInUserDropDownMenu-block li.themed-color a span { color: var(--apex-accent); font-weight: 700; text-decoration: none; } header.navbar #LoggedInUserDropDownMenu-block li.themed-color a:hover, header.navbar #LoggedInUserDropDownMenu-block li.themed-color a:hover span, header.navbar #LoggedInUserDropDownMenu-block li.themed-color a:focus, header.navbar #LoggedInUserDropDownMenu-block li.themed-color a:focus span { color: var(--apex-accent-strong); } /* History dropdown — Back / Forward navigation buttons */ #history-drop-down-menu-block { width: 350px !important; } #history-drop-down-menu-block .btn-group-justified { display: flex !important; justify-content: space-between; padding: 4px 10px; } #history-drop-down-menu-block .btn-group-justified .btn { display: flex !important; align-items: center; justify-content: center; flex: 0 0 37.5%; font-family: var(--apex-font-family); font-size: 1rem; font-weight: 600; padding: 8px 14px; border-radius: var(--apex-radius) !important; line-height: 1.4; } /* Icon inside Forward button — move to end (after text) */ #history-menu-go-forward .fa { float: none !important; order: 2; margin-left: 6px; margin-right: 0; } /* Icon inside Back button — keep before text */ #history-menu-go-back .fa { float: none !important; margin-right: 6px; } /* Intro.js tour — space between Back and Next buttons, Close left-aligned */ .introjs-tooltipbuttons { display: flex !important; align-items: center; } .introjs-tooltipbuttons .introjs-skipbutton { margin-right: auto; } .introjs-tooltipbuttons .introjs-prevbutton { margin-right: 5px; } header.navbar .dropdown-menu > li > a:hover { background-color: var(--apex-accent); color: var(--apex-text-inverse); } /* 29 Jul 2026: dropdown menus OUTSIDE the navbar (grid toolbar Actions/Grid menus, ctrlFileMenu pattern) were never themed — Bootstrap's white panel showed with theme-light text, invisible until hover on dark themes. */ html[data-apex-theme] .dropdown-menu { background-color: var(--apex-bg-elevated); border: 1px solid var(--apex-border-subtle); box-shadow: var(--apex-shadow-lg); } html[data-apex-theme] .dropdown-menu li > a { color: var(--apex-text-primary); } html[data-apex-theme] .dropdown-menu li > a:hover { background-color: var(--apex-accent); color: var(--apex-text-inverse); } html[data-apex-theme] .dropdown-menu .divider { background-color: var(--apex-border-subtle); } html[data-apex-theme] .dropdown-menu .dropdown-header { color: var(--apex-text-secondary); } /* -------------------------------------------------------------------------- 1c. Sidebar (#sidebar) -------------------------------------------------------------------------- */ /* Sidebar background — deeper, richer navy */ #sidebar, #sidebar-alt { background-color: var(--apex-sidebar-bg); } /* Sidebar vertical scrolling — pin the brand ("TriSys" logo) and the logged-in user panel at the top, and scroll ONLY the navbar groups + activity metrics beneath them. #sidebar is position:fixed (top:0/bottom:0); #sidebar-scroll fills it; .sidebar-content is a flex column whose brand/user are fixed height and whose #sidebar-nav-scroll region takes the remaining height and scrolls natively with a thin themed scrollbar. (ProUI's slimScroll still targets #sidebar-scroll, but since .sidebar-content exactly fills that wrapper it never overflows, so the slimScroll bar stays hidden and only the inner native scrollbar appears.) */ #sidebar #sidebar-scroll { height: 100%; } #sidebar .sidebar-content { display: flex; flex-direction: column; height: 100%; padding-bottom: 0; } #sidebar .sidebar-content > .sidebar-brand, #sidebar .sidebar-content > .sidebar-user { flex: 0 0 auto; } #sidebar #sidebar-nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--apex-sidebar-text) 35%, transparent) transparent; } #sidebar #sidebar-nav-scroll::-webkit-scrollbar { width: 6px; } #sidebar #sidebar-nav-scroll::-webkit-scrollbar-track { background: transparent; } #sidebar #sidebar-nav-scroll::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--apex-sidebar-text) 35%, transparent); border-radius: 3px; } #sidebar #sidebar-nav-scroll::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--apex-sidebar-text) 55%, transparent); } /* Sidebar right border — starts below the toolbar (50px) */ #sidebar::after { content: ''; position: absolute; top: 50px; right: 0; bottom: 0; width: 1px; background-color: var(--apex-border-subtle); pointer-events: none; } /* Page container — match content area so no dark flash between login and form load */ #page-container { background-color: var(--apex-bg-app); } /* Brand bar at top of sidebar — matches toolbar */ #sidebar .sidebar-brand { background: var(--apex-brand-bar-bg); color: var(--apex-brand-bar-text); font-family: var(--apex-font-family); font-weight: 600; letter-spacing: 0.02em; } #sidebar .sidebar-title { /* color-mix: semi-transparent tint of the sidebar text for a subtle divider background */ background: color-mix(in srgb, var(--apex-sidebar-text) 25%, transparent); } /* Sidebar divider titles — collapsed to 1px hairlines */ #sidebar .sidebar-title { height: 1px !important; line-height: 1px !important; padding: 0 !important; overflow: hidden; } /* User section — two-column layout: Column 1: avatar photo (fixed width). Column 2: name (top) and action buttons (below) stacked vertically. Uses CSS Grid because Bootstrap's `clearfix` ::before/::after on the panel are neutralised below so they don't pollute grid placement. */ #sidebar .sidebar-user { background: color-mix(in srgb, var(--apex-sidebar-bg) 94%, var(--apex-text-primary) 6%); border-bottom: 1px solid var(--apex-border); } #sidebar .sidebar-section.sidebar-user { padding: 10px 8px; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; text-align: left; } /* Neutralise clearfix pseudo-elements so they don't add stray grid items */ #sidebar .sidebar-section.sidebar-user::before, #sidebar .sidebar-section.sidebar-user::after { content: none !important; display: none !important; } /* Column 1: avatar spans both rows */ #sidebar .sidebar-user-avatar { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; float: none; margin: 0; padding: 2px; border-radius: 28px; } #sidebar .sidebar-user-avatar img { width: 52px; height: 52px; border-radius: 26px; } /* Column 2 row 1: name */ #sidebar .sidebar-user-name { grid-column: 2; grid-row: 1; color: var(--apex-sidebar-text); font-family: var(--apex-font-family); font-weight: 600; font-size: 13px !important; margin: 0; line-height: 18px; text-align: left; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Column 2 row 2: action buttons */ #sidebar .sidebar-user-links { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 6px; margin: 0; white-space: nowrap; } #sidebar .sidebar-user-links a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; margin-right: 0; border-radius: var(--apex-radius-full); background: transparent; border: 1px solid var(--apex-accent); color: var(--apex-accent) !important; opacity: 1; filter: none; transition: background-color var(--apex-transition), color var(--apex-transition), transform var(--apex-transition); } #sidebar .sidebar-user-links a:hover, #sidebar .sidebar-user-links a:focus { background: var(--apex-accent); border-color: var(--apex-accent); color: var(--apex-text-inverse) !important; text-decoration: none; opacity: 1; filter: none; transform: translateY(-1px); } #sidebar .sidebar-user-links a > i { font-size: 10px; color: inherit !important; } /* Nav menu items */ #sidebar .sidebar-nav a { color: var(--apex-sidebar-text) !important; font-size: 1.1875rem !important; font-weight: 500; cursor: pointer; transition: background-color var(--apex-transition), color var(--apex-transition), border-color var(--apex-transition); border-left: 4px solid transparent !important; padding: 0 10px 0 6px !important; } #sidebar .sidebar-nav a:hover { background: var(--apex-accent-soft); color: var(--apex-text-primary); border-left: 4px solid var(--apex-accent) !important; padding: 0 10px 0 6px !important; } #sidebar .sidebar-nav a.open { background: transparent; color: var(--apex-sidebar-text); border-left: 4px solid var(--apex-accent) !important; padding: 0 10px 0 6px !important; } #sidebar .sidebar-nav a.active, #sidebar .sidebar-nav li.active > a { background: transparent; color: var(--apex-sidebar-text); border-left: 4px solid var(--apex-accent) !important; padding: 0 10px 0 6px !important; margin-left: 6px; margin-right: 6px; font-weight: 600; } /* Sub-menu items — slightly indented, smaller */ #sidebar .sidebar-nav ul a { font-size: 0.9375rem; font-weight: 400; color: var(--apex-text-secondary); padding-left: 20px; } /* Allow sub-menu labels to wrap when they overflow, with the wrapped lines aligning under the text (not under the icon). Uses flex so the icon stays on the first row at the left and the label flows independently. 5px gap between icon and label. */ #sidebar .sidebar-nav ul a { display: flex; align-items: center; gap: 5px; line-height: 18px; padding-top: 8px; padding-bottom: 8px; min-height: 35px; white-space: normal; word-break: break-word; } #sidebar .sidebar-nav ul a > .sidebar-nav-icon { flex: 0 0 auto; margin-right: 0; line-height: 18px; } #sidebar .sidebar-nav ul a:hover { color: var(--apex-text-primary); background: var(--apex-accent-soft); } #sidebar .sidebar-nav ul, #sidebar .sidebar-nav ul ul, #sidebar .sidebar-nav .sidebar-nav-menu.open + ul { background: transparent; } /* Mini/collapsed sidebar — flyout menu needs opaque background */ .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav .sidebar-nav-menu + ul { background-color: var(--apex-sidebar-bg); border-left: 3px solid var(--apex-accent); } /* Mini/collapsed sidebar — hide the entire user panel (avatar/name/links). The user photo is already shown top-right in the toolbar, so duplicating it here is unnecessary and the panel adds wasted vertical space. */ .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-section.sidebar-user { display: none !important; } .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav .sidebar-nav-menu.open + ul { display: none !important; } .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav li.active > ul { display: none !important; } .sidebar-mini.sidebar-visible-lg-mini #sidebar .sidebar-nav li:hover > .sidebar-nav-menu + ul { display: block !important; } /* Sidebar nav bottom border */ #sidebar .sidebar-nav { border-bottom: 1px solid var(--apex-border-subtle); padding-bottom: 10px; } /* Nav icons — consistent sizing */ #sidebar .sidebar-nav .sidebar-nav-icon { font-size: 1.0625rem; width: 24px; text-align: center; margin-right: 8px; color: var(--apex-sidebar-text); transition: color var(--apex-transition); } #sidebar .sidebar-nav a:hover .sidebar-nav-icon, #sidebar .sidebar-nav a.active .sidebar-nav-icon { color: var(--apex-accent); } #sidebar .sidebar-nav li.active > ul, #sidebar .sidebar-nav li.active > ul a.active { background: transparent; } /* Section headers in sidebar */ #sidebar .sidebar-header { font-family: var(--apex-font-family); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--apex-text-light); padding: 16px 15px 6px; } /* Activity counts section */ #sidebar #nav-bar-activities { border-top: none; } #sidebar #nav-bar-activities a { font-size: 0.875rem; } /* Hide the leading 1px hairline above the activities section — it shows as a stray dark-blue strip immediately under the user panel and adds no value. */ #sidebar #nav-bar-activities-title { display: none !important; } /* Collapse activity rows whose inner anchor has been hidden by JS (i.e. the user doesn't have access to that activity). Without this the empty row still renders a thin background strip from .sidebar-nav padding. */ #sidebar #nav-bar-activities .sidebar-nav-activity-row:has(> a[style*="display: none"]), #sidebar #nav-bar-activities .sidebar-nav-activity-row:has(> a[style*="display:none"]) { display: none !important; } /* Scrollbar in sidebar — thin, subtle */ #sidebar .sidebar-content::-webkit-scrollbar { width: 4px; } #sidebar .sidebar-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; } /* -------------------------------------------------------------------------- 1d. Content Area Background -------------------------------------------------------------------------- */ #divFormContentRow { background-color: var(--apex-bg-app) !important; } /* content-top bar — search criteria header etc. */ html[data-apex-theme] .content-top { background-color: var(--apex-bg-surface-2); border-bottom-color: var(--apex-border-subtle); } /* -------------------------------------------------------------------------- 1e. Footer -------------------------------------------------------------------------- */ #footer-block { font-family: var(--apex-font-family); font-size: 0.8125rem; color: var(--apex-text-muted); background-color: var(--apex-bg-elevated); border-top: 1px solid var(--apex-border-subtle); } /* Scroll-to-top button — use theme accent instead of hardcoded #1bbae1 */ html[data-apex-theme] #to-top:hover { background-color: var(--apex-accent) !important; color: var(--apex-text-inverse) !important; } /* -------------------------------------------------------------------------- 1f. UserOptions Theme Gallery -------------------------------------------------------------------------- */ #user-options-themes-block .apex-theme-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; background: transparent; } #user-options-themes-block .apex-theme-gallery { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 16px; } #user-options-themes-block .apex-theme-grid-featured { grid-template-columns: repeat(2, minmax(150px, 180px)); justify-content: center; } #user-options-themes-block .apex-theme-grid-library { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } #user-options-themes-block .apex-theme-option { margin: 0; } #user-options-themes-block .apex-theme-card { display: block; min-height: 100%; border: 1px solid var(--apex-border-subtle); border-radius: 12px; background: color-mix(in srgb, var(--apex-bg-elevated) 92%, var(--apex-bg-app) 8%); box-shadow: none; overflow: hidden; text-decoration: none !important; transition: transform var(--apex-transition), box-shadow var(--apex-transition), border-color var(--apex-transition); } #user-options-themes-block .apex-theme-card:hover, #user-options-themes-block .apex-theme-card:focus { transform: translateY(-1px); box-shadow: var(--apex-shadow-sm); border-color: var(--apex-accent); } #user-options-themes-block .apex-theme-option.active .apex-theme-card { border-color: var(--apex-accent); box-shadow: 0 0 0 2px var(--apex-accent-soft); } #user-options-themes-block .apex-theme-card-preview { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 10px 4px; } #user-options-themes-block .apex-theme-card-preview-light { background: transparent; } #user-options-themes-block .apex-theme-card-preview-stone { background: transparent; } #user-options-themes-block .apex-theme-card-preview-midnight { background: transparent; } #user-options-themes-block .apex-theme-card-preview-bumblebee, #user-options-themes-block .apex-theme-card-preview-emerald, #user-options-themes-block .apex-theme-card-preview-corporate, #user-options-themes-block .apex-theme-card-preview-cupcake, #user-options-themes-block .apex-theme-card-preview-dark { background: transparent; } #user-options-themes-block .apex-theme-preview-strip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: #ffffff; border: 1px solid #d7dee7; } #user-options-themes-block .apex-theme-preview-dot { width: 13px; height: 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } #user-options-themes-block .apex-theme-preview-dot-light-1 { background: #4f46e5; } #user-options-themes-block .apex-theme-preview-dot-light-2 { background: #ec4899; } #user-options-themes-block .apex-theme-preview-dot-light-3 { background: #14b8a6; } #user-options-themes-block .apex-theme-preview-dot-light-4 { background: #111111; } #user-options-themes-block .apex-theme-preview-dot-stone-1 { background: #4c3929; } #user-options-themes-block .apex-theme-preview-dot-stone-2 { background: #946b43; } #user-options-themes-block .apex-theme-preview-dot-stone-3 { background: #e9ddd0; } #user-options-themes-block .apex-theme-preview-dot-stone-4 { background: #34291f; } #user-options-themes-block .apex-theme-preview-dot-cupcake-1 { background: #65e6d8; } #user-options-themes-block .apex-theme-preview-dot-cupcake-2 { background: #f5c5e0; } #user-options-themes-block .apex-theme-preview-dot-cupcake-3 { background: #ffd7a8; } #user-options-themes-block .apex-theme-preview-dot-cupcake-4 { background: #3b3340; } #user-options-themes-block .apex-theme-preview-dot-bumblebee-1 { background: #ffb703; } #user-options-themes-block .apex-theme-preview-dot-bumblebee-2 { background: #ffcf33; } #user-options-themes-block .apex-theme-preview-dot-bumblebee-3 { background: #111111; } #user-options-themes-block .apex-theme-preview-dot-bumblebee-4 { background: #605547; } #user-options-themes-block .apex-theme-preview-dot-emerald-1 { background: #63c77b; } #user-options-themes-block .apex-theme-preview-dot-emerald-2 { background: #4e8df5; } #user-options-themes-block .apex-theme-preview-dot-emerald-3 { background: #ff8e6b; } #user-options-themes-block .apex-theme-preview-dot-emerald-4 { background: #445268; } #user-options-themes-block .apex-theme-preview-dot-corporate-1 { background: #2286c9; } #user-options-themes-block .apex-theme-preview-dot-corporate-2 { background: #667f9b; } #user-options-themes-block .apex-theme-preview-dot-corporate-3 { background: #0e7c66; } #user-options-themes-block .apex-theme-preview-dot-corporate-4 { background: #111111; } #user-options-themes-block .apex-theme-preview-dot-midnight-1 { background: #64d2ff; } #user-options-themes-block .apex-theme-preview-dot-midnight-2 { background: #8b5cf6; } #user-options-themes-block .apex-theme-preview-dot-midnight-3 { background: #14b8a6; } #user-options-themes-block .apex-theme-preview-dot-midnight-4 { background: #0b1220; } #user-options-themes-block .apex-theme-card-preview-midnight .apex-theme-preview-strip, #user-options-themes-block .apex-theme-card-preview-dark .apex-theme-preview-strip { background: #1a2332; border-color: #253246; } #user-options-themes-block .apex-theme-card-body { display: block !important; padding: 0 10px 10px; text-align: center; } #user-options-themes-block .apex-theme-card-name { display: block !important; font-family: var(--apex-font-family); font-size: 0.9375rem; font-weight: 700; color: var(--apex-text-primary); line-height: 1.2; min-height: 1.2em; visibility: visible !important; opacity: 1 !important; } #user-options-current-theme-family { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 4px 10px; border-radius: 999px; background: var(--apex-accent-soft); color: var(--apex-accent-strong); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } #user-options-themes-block .apex-theme-status { margin-top: 8px; } #user-options-themes-block .apex-theme-status > p:first-child { margin-top: 2px; } #user-options-themes-block .apex-theme-status p { margin-bottom: 8px; } /* -------------------------------------------------------------------------- 2. Form Styles — applies to ALL forms loaded into #divFormContentRow -------------------------------------------------------------------------- */ /* Page header — cleaner, lighter, aligned with card panels */ #divFormContentRow .content-header { background: var(--apex-bg); border: none; padding: 0 15px; margin: 0 0 10px; border-radius: var(--apex-radius-lg); } #divFormContentRow .content-header .header-section { padding: 16px 10px; text-align: center; } #divFormContentRow .content-header .header-section h1 { font-family: var(--apex-font-family); font-size: 2.25rem; font-weight: 700; color: var(--apex-primary); letter-spacing: -0.025em; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } #divFormContentRow .content-header .header-section h1 i { font-size: 36px; color: var(--apex-primary-light); float: none; display: inline; margin: 0 16px 0 0; line-height: inherit; } #divFormContentRow .content-header .header-section h1 small { flex-basis: 100%; font-size: 1.1875rem; color: var(--apex-text-muted); font-weight: 400; margin-top: 10px; } /* Prices button inside Registration content-header */ #trisys-registration-form-prices-button-header { margin-top: 10px; } #trisys-registration-form-prices-button-header .btn { font-family: var(--apex-font-family); font-size: 1.125rem; font-weight: 600; padding: 8px 20px; border-radius: var(--apex-radius); } /* Registration "Agree to Terms & Conditions" / "Privacy Policy" links. 03 Aug 2026: a cursor:pointer rule for these existed only inside @media (max-width: 991px), so on desktop the hand pointer was missing — unlike the Login form, whose equivalent links are plain external elements and get it from the browser. Set at all widths, and unscoped so it covers BOTH blocks on the Registration form: #registration-legal-block (new customer) and #trisys-registration-form-existing-customer-data-entry-block (existing customer). */ .register-terms, .register-terms span, .register-terms strong { cursor: pointer; } /* Outer block container — must use theme token so dark themes don't show white */ html[data-apex-theme] .block { background-color: var(--apex-bg-card); } /* Card blocks — rounded, shadow */ /* NOTE: Viewport-fill for small forms (e.g. Forgotten Password) NOT solved. :only-child works for single-card forms but breaks multi-card (Login). min-height through Bootstrap 3 float grid doesn't propagate. Parked. */ #divFormContentRow .block .block { background: var(--apex-bg-card); border: 1px solid var(--apex-border); border-radius: var(--apex-radius-lg); box-shadow: var(--apex-shadow-md); padding: 24px 20px 1px; margin-bottom: 20px; } /* Dashboard tiles — contrast fix for light themes */ #divFormContentRow #divDashboardContent .block { background: var(--apex-bg-surface-2); border: 1px solid var(--apex-border-strong); overflow: hidden; font-size: 12px; } /* When a dropdown is open inside a tile (e.g. the date-range picker), the tile's overflow:hidden would clip the menu. Release the clipping and lift the tile above neighbouring tiles so the menu is fully visible. Scoped to the open state only. :has() matches the tile AND any ancestor tile that contains the open menu. */ #divFormContentRow #divDashboardContent .block:has(.btn-group.open), #divFormContentRow #divDashboardContent .block:has(.dropdown.open) { overflow: visible; position: relative; z-index: 1050; } /* Dashboard tile tables — inherit user font, controlled sizes */ .apex-tile-table { font-size: 12px; } .apex-tile-table tr:first-child td { font-size: 10px; color: var(--apex-text-secondary); } .apex-tile-table td span { font-size: 13px; } /* Weather & World Clock tiles — reduce oversized content */ [id*="trisys-weather-forecast"] { font-size: 12px; display: flex; justify-content: center; } [id*="trisys-weather-forecast"] img { transform: scale(0.8); transform-origin: top center; } [id*="trisys-world-clock-name"] { font-size: 16px; } [id*="trisys-world-clock-timezone"] { transform: scale(0.8); transform-origin: top center; width: 125%; margin-left: -12.5%; } /* Block title — subtle divider, flex for vertical centering */ #divFormContentRow .block .block-title { background: transparent; border-bottom: 1px solid var(--apex-border); padding: 0; display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; } /* Form caption: block.full has padding 20px 15px (main.css) */ #divFormContentRow .block.full > .block-title { margin: -20px -15px 12px; } /* Tab panel caption: .block .block has padding 24px 20px */ #divFormContentRow .block .block > .block-title { margin: -24px -20px 12px; } /* Neutralise all floats inside flex block-title */ #divFormContentRow .block .block-title > * { float: none !important; } /* Bordered shaded panel — ContactUs */ #ContactUsBlock { background: var(--apex-bg-card); border: 1px solid var(--apex-border); border-radius: var(--apex-radius-lg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } /* Bordered shaded panels — PlugIns form */ div[id^="plugins-"].block { background: var(--apex-bg-card); border: 1px solid var(--apex-border); border-radius: var(--apex-radius-lg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #divFormContentRow .block .block-title h2 { font-family: var(--apex-font-family); font-size: 14px !important; font-weight: bolder; padding: 0 15px; margin: 0; flex: 1 1 auto; line-height: 48px; } #divFormContentRow .block .block-title h3 { font-family: var(--apex-font-family); font-size: 14px !important; padding: 0 15px; margin: 0; flex: 1 1 auto; line-height: 48px; } #divFormContentRow .block .block-title h2 strong { font-weight: 700; } /* Block-options — flex child, pushed right */ #divFormContentRow .block .block-title .block-options { display: flex; align-items: center; gap: 4px; padding: 0 6px; min-height: 0; line-height: normal; margin: 0; margin-left: auto; order: 99; } /* Phone form toolbar: .pull-left stays left, .text-center fills middle */ #divFormContentRow .block .block-title .block-options.pull-left { margin-left: 0; order: 0; } #divFormContentRow .block .block-title .block-options.text-center { margin-left: 0; order: 1; flex: 1 1 auto; justify-content: center; } #divFormContentRow .block .block-title .block-options .btn, #divFormContentRow .block .block-title .block-options .btn-group > .btn { margin-top: 0; margin-bottom: 0; } /* Form caption icon */ #divFormContentRow .block .block-title > i { padding: 0 0 0 15px !important; line-height: 48px; } /* Form bordered — cleaner separators, contained */ #divFormContentRow .block .form-bordered { margin: 0; } #divFormContentRow .block .form-horizontal { padding-bottom: 10px; } #divFormContentRow .block .form-bordered .form-group { border-bottom: 1px solid var(--apex-border); border-radius: 0; padding: 16px 20px; } #divFormContentRow .block .form-bordered .form-group:last-child { border-bottom: none; } /* Form actions row — clean background, contained within card */ #divFormContentRow .block .form-bordered .form-group.form-actions { background: var(--apex-bg); border-radius: 0; margin: 0; padding: 16px 20px; } #divFormContentRow .block .form-bordered .form-group.form-actions:last-child { border-radius: 0 0 var(--apex-radius-lg) var(--apex-radius-lg); } /* Labels — top-aligned with padding to match input text baseline */ #divFormContentRow .block .form-group { display: flex; flex-wrap: wrap; align-items: flex-start; } #divFormContentRow .block .control-label { font-family: var(--apex-font-family); font-size: 1.125rem; font-weight: 600; color: var(--apex-text); padding-top: 4px !important; float: none; white-space: nowrap; } /* Toggle/checkbox rows — label aligns with centre of shorter control */ #login-form-remember-me-block .control-label { padding-top: 8px !important; position: static; top: auto; } /* Input fields — height matched to KendoUI combos (12px / 5px padding / 1.4286 line-height ≈ 27px) */ #divFormContentRow .block .form-control, #divFormContentRow .block input[type="text"].form-control, #divFormContentRow .block input[type="password"].form-control, #divFormContentRow .block input[type="email"].form-control { font-family: var(--apex-font-family); font-size: 12px; color: var(--apex-text); background-color: var(--apex-bg-surface-1); border: 1px solid var(--apex-border-strong); border-radius: var(--apex-radius); padding: 7px 8px !important; height: auto !important; margin: 0; line-height: 1.4285714286 !important; transition: border-color var(--apex-transition), box-shadow var(--apex-transition); } /* Textareas — same padding but auto height for multi-line */ #divFormContentRow .block textarea.form-control { background-color: var(--apex-bg-surface-1); height: auto !important; } /* Textarea rows — label aligns to top, not centre */ #divFormContentRow .block .form-group:has(textarea) { align-items: flex-start; } #divFormContentRow .block .form-group:has(textarea) .control-label { padding-top: 8px !important; } #divFormContentRow .block .form-control:focus { border-color: var(--apex-primary); box-shadow: 0 0 0 3px rgba(38, 79, 162, 0.15); outline: none; } #divFormContentRow .block .form-control::placeholder { color: var(--apex-text-light); } /* Input groups — gap between field and button */ #divFormContentRow .block .input-group .input-group-btn { padding-left: 8px; } /* KendoUI widgets — match form-control appearance */ #divFormContentRow .block .k-widget, #divFormContentRow .block .k-dropdown, #divFormContentRow .block .k-combobox { font-family: var(--apex-font-family); font-size: 12px; border: 1px solid var(--apex-border-strong); border-radius: var(--apex-radius); } #divFormContentRow .block .k-dropdown-wrap, #divFormContentRow .block .k-picker-wrap { border-radius: var(--apex-radius); padding: 4px 8px; box-sizing: border-box; } /* Hide caret in KendoUI dropdown/combobox inputs */ #divFormContentRow .block .k-dropdown .k-input, #divFormContentRow .block .k-combobox .k-input { caret-color: transparent; } /* Help text */ #divFormContentRow .block .help-block { font-size: 1.0625rem; color: var(--apex-text-light); margin-top: 6px; } /* Modal forms use the same legacy block/form markup, but render outside #divFormContentRow, so they need their own token-driven surface rules. */ html[data-apex-theme] .modal-content { background: var(--apex-bg-card); border: 1px solid var(--apex-accent) !important; color: var(--apex-text-primary); } html[data-apex-theme] .modal-header { background: var(--apex-accent) !important; border-bottom: 1px solid var(--apex-accent-strong); color: var(--apex-text-inverse) !important; } html[data-apex-theme] .modal-title, html[data-apex-theme] .modal-header .close, html[data-apex-theme] .modal-header i { color: var(--apex-text-inverse) !important; } html[data-apex-theme] .modal-body, html[data-apex-theme] .modal-footer { color: var(--apex-text-primary); } /* Images inside modal bodies must never overflow the modal width — except grid icons */ html[data-apex-theme] .modal-body img { max-width: 100%; height: auto; } html[data-apex-theme] .modal-body .k-grid td img { height: unset; } #trisys-modal-close-button, #trisys-modal-close-button:hover, #trisys-modal-close-button:focus, html[data-apex-theme] #trisys-modal-close-button, html[data-apex-theme] #trisys-modal-close-button:hover, html[data-apex-theme] #trisys-modal-close-button:focus { color: var(--apex-text-inverse) !important; opacity: 1 !important; text-shadow: none !important; } html[data-apex-theme] .modal-footer { background: var(--apex-bg-surface-2); border-top: 1px solid var(--apex-border-subtle); } html[data-apex-theme] .modal-content .block { background: var(--apex-bg-card); border: 1px solid var(--apex-border); border-radius: var(--apex-radius-lg); box-shadow: var(--apex-shadow-md); color: var(--apex-text-primary); } html[data-apex-theme] .modal-content .block-title { display: flex; align-items: center; flex-wrap: nowrap; background: transparent; border-bottom: 1px solid var(--apex-border); } html[data-apex-theme] .modal-content .block-title h1, html[data-apex-theme] .modal-content .block-title h2, html[data-apex-theme] .modal-content .block-title h3, html[data-apex-theme] .modal-content .block-title h4, html[data-apex-theme] .modal-content .block-title h5, html[data-apex-theme] .modal-content .block-title h6 { min-width: 0; flex: 1 1 auto; } html[data-apex-theme] .modal-content .block-title .block-options { display: flex; align-items: center; flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; margin: 0 0 0 auto; padding: 0 6px; line-height: normal; white-space: nowrap; } html[data-apex-theme] .modal-content .block-title .block-options .btn, html[data-apex-theme] .modal-content .block-title .block-options .btn-group > .btn { margin-top: 0; margin-bottom: 0; } html[data-apex-theme] .modal-content .block-title h1, html[data-apex-theme] .modal-content .block-title h2, html[data-apex-theme] .modal-content .block-title h3, html[data-apex-theme] .modal-content .block-title h4, html[data-apex-theme] .modal-content .block-title h5, html[data-apex-theme] .modal-content .block-title h6, html[data-apex-theme] .modal-content .block-title h1 small, html[data-apex-theme] .modal-content .block-title h2 small, html[data-apex-theme] .modal-content .block-title h3 small, html[data-apex-theme] .modal-content .block-title h4 small, html[data-apex-theme] .modal-content .block-title h5 small, html[data-apex-theme] .modal-content .block-title h6 small, html[data-apex-theme] .modal-content label, html[data-apex-theme] .modal-content .control-label, html[data-apex-theme] .modal-content .help-block, html[data-apex-theme] .modal-content .tab-content, html[data-apex-theme] .modal-content p, html[data-apex-theme] .modal-content span:not(.btn):not(.label):not(.badge) { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content a:not(.btn):not(.badge) { color: var(--apex-accent) !important; } html[data-apex-theme] .modal-content a:not(.btn):not(.badge):hover { color: var(--apex-accent) !important; opacity: 0.8; } html[data-apex-theme] .modal-content .dropdown-menu { background: var(--apex-bg-elevated) !important; border-color: var(--apex-border) !important; } html[data-apex-theme] .modal-content .dropdown-menu > li > a { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .dropdown-menu > li > a:hover, html[data-apex-theme] .modal-content .dropdown-menu > li > a:focus { background: var(--apex-bg-surface-2) !important; color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .form-bordered .form-group { border-bottom: 1px solid var(--apex-border); } html[data-apex-theme] .modal-content .form-bordered .form-group.form-actions { background: var(--apex-bg); } html[data-apex-theme] .modal-content .form-control, html[data-apex-theme] .modal-content input.form-control, html[data-apex-theme] .modal-content textarea.form-control, html[data-apex-theme] .modal-content select.form-control, html[data-apex-theme] .modal-content select { background: var(--apex-bg-surface-1); border-color: var(--apex-border-strong); color: var(--apex-text-primary) !important; } /* KendoUI dropdowns/pickers inside modals — ensure visible text in resting state */ html[data-apex-theme] .modal-content .k-picker, html[data-apex-theme] .modal-content .k-picker-solid, html[data-apex-theme] .modal-content .k-dropdownlist, html[data-apex-theme] .modal-content .k-dropdown, html[data-apex-theme] .modal-content .k-dropdown-wrap, html[data-apex-theme] .modal-content .k-combobox { background: var(--apex-bg-surface-1) !important; border-color: var(--apex-border-strong) !important; color: var(--apex-text-primary) !important; background-image: none !important; } html[data-apex-theme] .modal-content .k-picker .k-input-value-text, html[data-apex-theme] .modal-content .k-dropdown .k-input, html[data-apex-theme] .modal-content .k-dropdownlist .k-input-value-text { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .form-control::placeholder { color: var(--apex-text-light); } html[data-apex-theme] .modal-content .nav-tabs > li > a { background: var(--apex-bg-surface-2); border-color: var(--apex-border-subtle); color: var(--apex-text-secondary) !important; cursor: pointer; } html[data-apex-theme] .modal-content .nav-tabs > li.active > a, html[data-apex-theme] .modal-content .nav-tabs > li.active > a:hover, html[data-apex-theme] .modal-content .nav-tabs > li.active > a:focus, html[data-apex-theme] .modal-content .block-title .nav-tabs > li.active > a, html[data-apex-theme] .modal-content .block-title .nav-tabs > li.active > a:hover, html[data-apex-theme] .modal-content .block-title .nav-tabs > li.active > a:focus { background: var(--apex-bg-surface-1); border-color: var(--apex-border-subtle); border-bottom-color: var(--apex-bg-surface-1); color: var(--apex-text-primary) !important; } /* FileReference field in modal task attachment tab — stretch full width */ html[data-apex-theme] .modal-content #taskForm-attachments-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; } html[data-apex-theme] .modal-content #taskForm-Attachment-File-Reference { width: 100% !important; max-width: 100% !important; } /* Modal KendoUI hover/selected — the span colour rule html[data-apex-theme] .modal-content span:not(.btn):not(.label):not(.badge) has specificity 0,5,2. Every override below must match or exceed that. We replicate all three :not() pseudo-classes on span selectors. */ /* KendoUI select/button hover — date pickers, combo arrows, etc. */ html[data-apex-theme] .modal-content .k-select:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-select:hover i, html[data-apex-theme] .modal-content .k-input-button:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-input-button:hover i, html[data-apex-theme] .modal-content .k-button:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-button:hover i, html[data-apex-theme] .modal-content .k-pager-wrap .k-link:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-pager-wrap .k-link:hover i { color: var(--apex-text-inverse) !important; } /* KendoUI picker (k-dropdownlist / k-picker-solid) — value text on hover/focus. Pickers do NOT get a dark background on hover, so text must stay readable (primary, not inverse). */ html[data-apex-theme] .modal-content .k-picker:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-picker.k-hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-picker.k-focus span:not(.btn):not(.label):not(.badge) { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .k-picker:hover i, html[data-apex-theme] .modal-content .k-picker.k-hover i { color: var(--apex-text-primary) !important; } /* Bootstrap button hover — child spans/icons inside modals. btn-default has a light hover background, so text stays primary. Colored buttons (primary/success/danger/warning/info) have dark hover backgrounds, so text goes inverse. */ html[data-apex-theme] .modal-content .btn-default:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-default:hover i { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .btn-primary:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-primary:hover i, html[data-apex-theme] .modal-content .btn-success:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-success:hover i, html[data-apex-theme] .modal-content .btn-danger:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-danger:hover i, html[data-apex-theme] .modal-content .btn-warning:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-warning:hover i, html[data-apex-theme] .modal-content .btn-info:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-info:hover i { color: var(--apex-text-inverse) !important; } /* KendoUI TreeView (Attributes) — selected/hover items inside modals */ html[data-apex-theme] .modal-content .k-treeview span.k-in:hover, html[data-apex-theme] .modal-content .k-treeview .k-treeview-leaf:hover .k-treeview-leaf-text, html[data-apex-theme] .modal-content .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf-text, html[data-apex-theme] .modal-content .k-treeview .k-treeview-leaf.k-selected .k-treeview-leaf-text { color: var(--apex-text-inverse) !important; } /* 03 Aug 2026: A rule for KendoUI dropdown list items inside modals lived here, but every selector used the pre-2022 .k-state-* names, so it had never applied on Kendo 2024.1.319. Unlike the TreeView rule above, it was never given .k-selected/.k-hover siblings — an incomplete migration. Removed; see FOLLOW-UP in FROZEN.md. */ /* KendoUI checkboxes — use theme accent instead of default blue */ html[data-apex-theme] .k-checkbox:checked, html[data-apex-theme] .k-checkbox:indeterminate { background-color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-inverse) !important; } /* ProUI switch-primary toggle — use theme accent in modals and globally */ html[data-apex-theme] .switch-primary input:checked + span { background-color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; } html[data-apex-theme] .switch-primary span { border-color: var(--apex-accent) !important; } /* KendoUI switch (toggle) — use theme accent */ html[data-apex-theme] .k-switch-on .k-switch-container { background-color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; } /* ========================================================================== 3. Global Button Styles (Phase 3.1) ========================================================================== Applied app-wide. ProUI uses pastel base + darker border; we flatten to solid colours, remove gradients, add subtle hover lift. ========================================================================== */ .btn { font-family: var(--apex-font-family); font-size: 1.125rem; font-weight: 600; border-radius: var(--apex-radius); padding: 8px 20px; border: none; cursor: pointer; transition: background-color var(--apex-transition), box-shadow var(--apex-transition), transform var(--apex-transition); letter-spacing: 0.01em; } .btn:hover { transform: translateY(-1px); box-shadow: var(--apex-shadow); } .modal-content .btn:hover { transform: none; box-shadow: none; } .btn:active { transform: translateY(0); box-shadow: none; } /* Size variants */ .btn.btn-sm { font-size: 1rem; padding: 6px 14px; } .btn.btn-lg { font-size: 1.25rem; padding: 12px 28px; } .btn.btn-xs { font-size: 0.875rem; padding: 3px 10px; } /* --- Colour variants (solid flat, no pastel/gradient) --- */ .btn-default { background-color: var(--apex-bg-surface-2); border: 1px solid var(--apex-border-strong); color: var(--apex-text-primary); } .btn-default:hover { background-color: var(--apex-accent-soft); border-color: var(--apex-accent); color: var(--apex-text-primary); } html[data-apex-theme] .btn-default:hover, html[data-apex-theme] .btn-default:focus, html[data-apex-theme] .btn-default:active, html[data-apex-theme] .btn-default.active, html[data-apex-theme] .open > .dropdown-toggle.btn-default { background-color: var(--apex-accent-soft) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-primary) !important; } .btn-primary { background: var(--apex-primary); border-color: var(--apex-primary); color: var(--apex-text-inverse); /* 29 Jul 2026: was #ffffff - invisible on white-accent themes (Luxury) */ } .btn-primary:hover, .btn-primary:focus { background: var(--apex-primary-dark); border-color: var(--apex-primary-dark); color: var(--apex-text-inverse); } .btn-success { background: var(--apex-success); border-color: var(--apex-success); color: #ffffff; } .btn-success:hover, .btn-success:focus { background: #15803d; border-color: #15803d; color: #ffffff; } .btn-danger { background: var(--apex-danger); border-color: var(--apex-danger); color: #ffffff; } .btn-danger:hover, .btn-danger:focus { background: #b91c1c; border-color: #b91c1c; color: #ffffff; } .btn-warning { background: #f59e0b; border-color: #f59e0b; color: #ffffff; } .btn-warning:hover, .btn-warning:focus { background: #d97706; border-color: #d97706; color: #ffffff; } .btn-info { background: #3b82f6; border-color: #3b82f6; color: #ffffff; } .btn-info:hover, .btn-info:focus { background: #2563eb; border-color: #2563eb; color: #ffffff; } html[data-apex-theme] button[id^="trisys-modal-default"].btn { background-color: var(--apex-bg-surface-2) !important; border: 1px solid var(--apex-border-strong) !important; color: var(--apex-text-primary) !important; } html[data-apex-theme] button[id^="trisys-modal-default"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-default"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-default"].btn:active { background-color: var(--apex-accent-soft) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-primary) !important; } html[data-apex-theme] button[id^="trisys-modal-info"].btn { background-color: #3b82f6 !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-info"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-info"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-info"].btn:active { background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-success"].btn { background-color: var(--apex-success) !important; border-color: var(--apex-success) !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-success"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-success"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-success"].btn:active { background-color: #15803d !important; border-color: #15803d !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-warning"].btn { background-color: #f59e0b !important; border-color: #f59e0b !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-warning"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-warning"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-warning"].btn:active { background-color: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-danger"].btn { background-color: var(--apex-danger) !important; border-color: var(--apex-danger) !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-danger"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-danger"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-danger"].btn:active { background-color: #b91c1c !important; border-color: #b91c1c !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-primary"].btn { background-color: var(--apex-primary) !important; border-color: var(--apex-primary) !important; color: var(--apex-text-inverse) !important; } html[data-apex-theme] button[id^="trisys-modal-primary"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-primary"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-primary"].btn:active { background-color: var(--apex-primary-dark) !important; border-color: var(--apex-primary-dark) !important; color: var(--apex-text-inverse) !important; } /* Alt variant — surface bg, coloured text/border. 29 Jul 2026: was hard-coded #ffffff which stayed white on dark themes (and made text invisible on white-accent themes e.g. Luxury). Surface-1 is white on light themes so their appearance is unchanged. */ .btn-alt.btn-primary { background: var(--apex-bg-surface-1); color: var(--apex-primary); border: 1px solid var(--apex-primary); } .btn-alt.btn-primary:hover { background: var(--apex-primary); color: var(--apex-text-inverse); } .btn-alt.btn-success { background: var(--apex-bg-surface-1); color: var(--apex-success); border: 1px solid var(--apex-success); } .btn-alt.btn-success:hover { background: var(--apex-success); color: #ffffff; } .btn-alt.btn-danger { background: var(--apex-bg-surface-1); color: var(--apex-danger); border: 1px solid var(--apex-danger); } .btn-alt.btn-danger:hover { background: var(--apex-danger); color: #ffffff; } /* Button icons */ .btn i, .btn .fa, .btn .gi { vertical-align: middle; } /* Form-area buttons — slightly more generous padding */ #divFormContentRow .block .btn { padding: 11px 24px; } #divFormContentRow .block .btn.btn-sm { padding: 6px 14px; } #contactForm-DaxtraMenu > .btn, #requirementForm-DaxtraMenu > .btn { background: var(--apex-bg-surface-1); border: 1px solid var(--apex-border-strong); color: var(--apex-accent) !important; } #contactForm-DaxtraMenu > .btn:hover, #contactForm-DaxtraMenu > .btn:focus, #contactForm-DaxtraMenu.open > .btn, #requirementForm-DaxtraMenu > .btn:hover, #requirementForm-DaxtraMenu > .btn:focus, #requirementForm-DaxtraMenu.open > .btn { background: var(--apex-accent) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-inverse) !important; } /* Button icons in forms — slightly larger */ #divFormContentRow .block .btn i, #divFormContentRow .block .btn .fa { font-size: 1.25rem; vertical-align: middle; } /* Query Builder rule rows: keep filter / operator / value (including the "between ... and ..." date pair) on ONE line, all vertically centred - the plugin's float layout wrapped the second date input onto a new row. The delete button (rule-header, first in the DOM) is pushed to the far right. */ #divFormContentRow .query-builder .rule-container { display: flex; align-items: center; flex-wrap: nowrap; } #divFormContentRow .query-builder .rule-container .rule-filter-container, #divFormContentRow .query-builder .rule-container .rule-operator-container, #divFormContentRow .query-builder .rule-container .rule-value-container { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; margin: 0 6px 0 0; float: none; } /* The bundled query-builder.css forces padding:1px onto every rule-row input[type=text/number], which out-specifies the Kendo theme's .k-input-inner padding - so the date picker's text sat flush against its border. Restore the Kendo values for inputs INSIDE Kendo widgets only; the query builder's own plain selects/inputs keep the vendor styling. */ #divFormContentRow .query-builder .rule-container input.k-input-inner[type=text], #divFormContentRow .query-builder .rule-container input.k-input-inner[type=number] { padding-block: 4px; padding-inline: 8px; } /* Calendar popup header (verified against the LIVE markup: header is .k-header.k-hstack with .k-calendar-nav-prev / .k-calendar-nav-fast (the month title) / .k-calendar-nav-next): the title button rendered 28px tall against the arrows' 31px and sat flush against them. Stretching the header's flex children equalises the heights without hard-coding pixels, and the title's 2px inline margins give the breathing space either side. */ html[data-apex-theme] .k-calendar .k-header.k-hstack { align-items: stretch; } html[data-apex-theme] .k-calendar .k-header .k-calendar-nav-fast { margin-inline: 2px; } /* The value group takes the remaining row width and its widgets SHARE it: the control renders each Kendo picker/combo at a fixed inline 250px, so a composite value ("Field1 between Field2 and Field3") could never fit on one line without letting the widgets shrink. */ #divFormContentRow .query-builder .rule-container .rule-filter-container { flex: 0 1 auto; min-width: 0; } /* 29 Jul 2026: Boolean Search theming — the bundled query-builder.default.css hard-codes white panel backgrounds (.rules-group-container #ffffff, .rule-container rgba(255,255,255,.9)) which glare on dark themes (Luxury). Surface tokens keep light themes looking identical. */ html[data-apex-theme] .query-builder .rules-group-container { background: var(--apex-bg-surface-2) !important; border-color: var(--apex-border-subtle) !important; color: var(--apex-text-primary) !important; } html[data-apex-theme] .query-builder .rule-container, html[data-apex-theme] .query-builder .rule-placeholder { background: var(--apex-bg-surface-1) !important; border-color: var(--apex-border-subtle) !important; color: var(--apex-text-primary) !important; } html[data-apex-theme] .query-builder .rule-container select, html[data-apex-theme] .query-builder .rule-container input[type="text"], html[data-apex-theme] .query-builder .rule-container input[type="number"] { background: var(--apex-bg-surface-1) !important; border: 1px solid var(--apex-border-strong) !important; color: var(--apex-text-primary) !important; } #divFormContentRow .query-builder .rule-container .rule-value-container { flex: 1 1 auto; min-width: 0; } #divFormContentRow .query-builder .rule-container .rule-value-container > .k-widget, #divFormContentRow .query-builder .rule-container .rule-value-container > input, #divFormContentRow .query-builder .rule-container .rule-value-container > select { flex: 1 1 130px; width: auto !important; min-width: 90px; max-width: 260px; } /* 29 Jul 2026: plain text values (e.g. CV Free Text Search) get the whole remaining row width - the 260px cap above is only right for the fixed-size Kendo pickers/combos and composite "between" rows. */ #divFormContentRow .query-builder .rule-container .rule-value-container > input[type="text"] { max-width: none; } /* Composite value widgets (e.g. the Task "between ... and" row) live inside a plain host div loaded asynchronously - let it take the remaining width and allow its flex content to shrink below max-content. */ #divFormContentRow .query-builder .rule-container .rule-value-container > div { flex: 1 1 auto; min-width: 0; } #divFormContentRow .query-builder .rule-container .rule-filter-container select, #divFormContentRow .query-builder .rule-container .rule-operator-container select { max-width: 100%; } #divFormContentRow .query-builder .rule-container .rule-filter-container { order: 1; } #divFormContentRow .query-builder .rule-container .rule-operator-container { order: 2; } #divFormContentRow .query-builder .rule-container .rule-value-container { order: 3; } #divFormContentRow .query-builder .rule-container .error-container { order: 4; } #divFormContentRow .query-builder .rule-container .rule-header { order: 99; margin-left: auto; float: none; } /* Query Builder / Search Criteria buttons — promote btn-xs to btn-sm sizing. 03 Aug 2026: .modal-content added. Boolean Search also renders inside the lookup modal (#trisys-modal-content, e.g. "Select a Contact" from a TriSys Field), which is NOT inside #divFormContentRow — so Add field / Add group / Delete sat flush against each other there, with no gap. */ #divFormContentRow .query-builder .btn.btn-xs, .modal-content .query-builder .btn.btn-xs { font-size: 1rem; padding: 6px 14px !important; border-radius: var(--apex-radius); margin-right: 5px; } /* AND/OR radio label buttons — consistent with the action buttons */ #divFormContentRow .query-builder .group-conditions .btn.btn-xs, .modal-content .query-builder .group-conditions .btn.btn-xs { padding: 6px 12px !important; margin-right: 5px; } /* 19 Aug 2026: the Boolean Search AND/OR toggle had no readable "off" state. The query builder renders BOTH conditions as .btn-primary radio labels and leans on Bootstrap's .active class to show which one is live; under the Apex themes that came out as two strong saturated blues — selected cyan, unselected navy — so a search set to OR was indistinguishable from one set to AND. That cost a full afternoon: a Contact search the user had every reason to believe was AND had been ORing the two criteria all along, and the "wrong" candidate it returned was matching only the first criterion. The unselected condition is now plainly recessive (surface fill, muted text, normal weight) and the selected one carries the accent, in inverse text, bold. Colour is not the only cue: weight and fill both change, so it survives a colour-blind reader and a dark theme. The apex-condition-on / apex-condition-off classes are maintained by ctrlSearchCriteria.ConditionToggles, so this does NOT depend on Bootstrap's button plugin applying .active — which it never did here, the group has no data-toggle="buttons". */ html[data-apex-theme] .query-builder .group-conditions .btn.btn-primary, html[data-apex-theme] .query-builder .group-conditions .btn.btn-primary.apex-condition-off { background: var(--apex-bg-surface-2) !important; background-image: none !important; border: 1px solid var(--apex-border-strong) !important; color: var(--apex-text-secondary) !important; box-shadow: none !important; font-weight: 400 !important; cursor: pointer; } html[data-apex-theme] .query-builder .group-conditions .btn.btn-primary.active, html[data-apex-theme] .query-builder .group-conditions .btn.btn-primary.apex-condition-on { background: var(--apex-accent) !important; background-image: none !important; border: 1px solid var(--apex-accent) !important; color: var(--apex-text-inverse) !important; font-weight: 700 !important; box-shadow: none !important; } html[data-apex-theme] .query-builder .group-conditions .btn.btn-primary.apex-condition-off:hover { background: var(--apex-accent-soft) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-primary) !important; } html[data-apex-theme] .query-builder .group-conditions .btn.btn-primary.apex-condition-on:hover { background: var(--apex-accent-strong) !important; border-color: var(--apex-accent-strong) !important; } /* The radio itself is redundant once the label carries the state, and it was never visible in this skin anyway. Keeping it in the DOM (not display:none) preserves keyboard focus. */ html[data-apex-theme] .query-builder .group-conditions .btn.btn-primary input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } /* Keyboard users still need to see where they are. */ html[data-apex-theme] .query-builder .group-conditions .btn.btn-primary input[type="radio"]:focus-visible + span, html[data-apex-theme] .query-builder .group-conditions .btn.btn-primary:focus-within { outline: 2px solid var(--apex-accent-strong); outline-offset: 2px; } /* Search/Lookup & Clear Search buttons below the query builder */ #divFormContentRow div[id^="search-criteria"] > .block > div > .btn { font-size: 1.125rem; padding: 8px 20px !important; border-radius: var(--apex-radius); margin-right: 6px; } /* Saved Searches dropdown & minimize button in block-options */ #divFormContentRow .block-options .btn.btn-sm { font-size: 1rem; padding: 6px 14px !important; border-radius: var(--apex-radius); } #divFormContentRow .apex-social-network-panel > .block-title { flex-wrap: nowrap; } #divFormContentRow .apex-social-network-panel > .block-title h2 { min-width: 0; padding-right: 8px; } #divFormContentRow .apex-social-network-panel .apex-social-network-actions { gap: 6px; padding-right: 6px; flex: 0 0 auto; } #divFormContentRow .apex-social-network-panel { padding-bottom: 10px !important; } #divFormContentRow .apex-social-network-panel .apex-social-network-actions .btn.btn-sm { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px !important; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; } #divFormContentRow .apex-social-network-panel .apex-social-network-actions .btn.btn-sm i { margin: 0; } #divFormContentRow .apex-social-network-panel .apex-social-network-actions .btn.btn-sm span { display: inline-block; } #divFormContentRow .apex-adminconsole-attributes-panel > .block-title { flex-wrap: nowrap; } #divFormContentRow .apex-adminconsole-action-panel > .block-title { flex-wrap: nowrap; } #divFormContentRow .apex-adminconsole-action-panel > .block-title h2 { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; } #divFormContentRow .apex-adminconsole-action-panel .apex-adminconsole-header-actions { gap: 6px; padding-right: 6px; flex: 0 0 auto; } #divFormContentRow .apex-adminconsole-action-panel .apex-adminconsole-header-actions > span { display: none; } #divFormContentRow .apex-adminconsole-action-panel .apex-adminconsole-header-actions .btn.btn-sm { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px !important; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; } #divFormContentRow .apex-adminconsole-action-panel .apex-adminconsole-header-actions .btn.btn-sm i { margin: 0; } #divFormContentRow .apex-adminconsole-action-panel .apex-adminconsole-header-actions .btn.btn-sm span { display: inline-block; } #divFormContentRow .apex-adminconsole-action-panel .apex-adminconsole-header-actions.apex-adminconsole-header-actions-icons-only .btn.btn-sm { gap: 0; padding: 4px 8px !important; } #divFormContentRow .apex-adminconsole-action-panel .apex-adminconsole-header-actions.apex-adminconsole-header-actions-icons-only .btn.btn-sm span { display: none; } #divFormContentRow .apex-adminconsole-action-panel .apex-adminconsole-header-actions.apex-adminconsole-header-actions-icons-only .btn.btn-sm .caret { margin-left: 0; } /* 13 Sep 2026: Admin Console Accounting tab - side-by-side blocks share the row's height (organisation + settings, cached data + sync history) */ #system-admin-panel-accounting .apex-accounting-row-equal { display: flex; flex-wrap: wrap; } #system-admin-panel-accounting .apex-accounting-row-equal > [class*="col-"] { display: flex; flex-direction: column; } #system-admin-panel-accounting .apex-accounting-row-equal > [class*="col-"] > div { flex: 1 1 auto; display: flex; flex-direction: column; } #system-admin-panel-accounting .apex-accounting-row-equal .block { flex: 1 1 auto; } /* Dropdown-custom — use available viewport height instead of fixed 250px */ #divFormContentRow .dropdown-menu.dropdown-custom > li { max-height: calc(100vh - 200px); } #contact-form-photo-column { position: relative; overflow: visible; } #contact-form-photo-hovered-buttons-table-row { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: -6px; z-index: 20; width: 240px; max-width: calc(100vw - 32px); padding: 8px; background: var(--apex-bg-surface-1); border: 1px solid var(--apex-border-strong); border-radius: var(--apex-radius); box-shadow: var(--apex-shadow); } #contact-form-photo-hovered-buttons-widget .apex-file-ref-row { width: 100%; } #company-form-logo-column { position: relative; overflow: visible; } #company-form-logo-hovered-buttons-table-row { position: absolute; top: 100%; right: 0; margin-top: -6px; z-index: 20; width: 240px; max-width: calc(100vw - 32px); padding: 8px; background: var(--apex-bg-surface-1); border: 1px solid var(--apex-border-strong); border-radius: var(--apex-radius); box-shadow: var(--apex-shadow); } #company-form-logo-hovered-buttons-widget .apex-file-ref-row { width: 100%; } #divFormContentRow .dropdown-menu.dropdown-custom > li > a { cursor: pointer; } #divFormContentRow .dropdown-menu > li > a:hover, #divFormContentRow .dropdown-menu > li > a:focus { background-color: var(--apex-accent-soft) !important; color: var(--apex-text-primary) !important; } /* Switch / Toggle — modern pill */ #divFormContentRow .block .switch { border-radius: var(--apex-radius-full); } #divFormContentRow .block .switch-primary span { border-color: var(--apex-border-strong); } #divFormContentRow .block .switch-primary input:checked + span { background: var(--apex-primary); border-color: var(--apex-primary); } /* Links */ #divFormContentRow .block a:not(.btn) { color: var(--apex-primary); text-decoration: none; font-size: 1.125rem; transition: color var(--apex-transition); } #divFormContentRow .block a:not(.btn):hover, #divFormContentRow .block a:not(.btn):focus { color: var(--apex-primary-dark); text-decoration: none; font-weight: 700; } /* Legacy theme helper classes mapped onto semantic tokens */ html[data-apex-theme] .themed-color { color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; } html[data-apex-theme] .themed-border, html[data-apex-theme] .themed-border[class], html[data-apex-theme] [class*="themed-border"] { border-color: var(--apex-accent) !important; } html[data-apex-theme] .themed-background, html[data-apex-theme] .themed-background[class] { background-color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-inverse) !important; } html[data-apex-theme] .themed-background-dark, html[data-apex-theme] .themed-background-dark[class], html[data-apex-theme] [class*="themed-background-dark"] { background-color: var(--apex-sidebar-bg) !important; border-color: var(--apex-sidebar-bg) !important; color: var(--apex-sidebar-text) !important; } html[data-apex-theme] .themed-background-muted-light, html[data-apex-theme] .themed-background-muted-light[class] { background-color: var(--apex-bg-surface-2) !important; border-color: var(--apex-border-subtle) !important; color: var(--apex-text-primary) !important; } /* Training form — hero course widget headers need dark bg + light text */ html[data-apex-theme] #trainingBlock .widget-advanced > .widget-header { background-color: var(--apex-sidebar-bg) !important; border-color: var(--apex-sidebar-bg) !important; color: var(--apex-sidebar-text) !important; } html[data-apex-theme] #trainingBlock .widget-advanced > .widget-header h3, html[data-apex-theme] #trainingBlock .widget-advanced > .widget-header h3 small, html[data-apex-theme] #trainingBlock .widget-advanced > .widget-header h3 strong { color: inherit !important; } /* Lock form — user name and company name need dark text on light background */ html[data-apex-theme] #login-container .login-title h1 { color: var(--apex-text-primary) !important; } /* -------------------------------------------------------------------------- KendoUI menu popups — prevent border clipping by animation container -------------------------------------------------------------------------- */ html[data-apex-theme] .k-menu .k-animation-container { overflow: visible !important; } html[data-apex-theme] .k-menu .k-animation-container .k-group, html[data-apex-theme] .k-menu .k-animation-container .k-popup { border: 1px solid var(--apex-border) !important; border-radius: var(--apex-radius) !important; background: var(--apex-bg-elevated) !important; box-shadow: var(--apex-shadow-md) !important; } html[data-apex-theme] .k-menu .k-item:hover, html[data-apex-theme] .k-menu .k-item.k-hover, html[data-apex-theme] .k-menu-item:hover, html[data-apex-theme] .k-menu-item.k-hover { background-color: var(--apex-accent-soft) !important; } html[data-apex-theme] .k-menu .k-item.k-selected, html[data-apex-theme] .k-menu-item.k-selected { background-color: var(--apex-accent) !important; color: var(--apex-text-inverse) !important; } /* 29 Jul 2026: menu/popup item TEXT was never themed, so the KendoUI skin's black .k-link colour survived onto dark popups (illegible on dark themes e.g. Luxury). */ html[data-apex-theme] .k-menu .k-item > .k-link, html[data-apex-theme] .k-menu-group .k-item > .k-link, html[data-apex-theme] .k-popup .k-item > .k-link { color: var(--apex-text-primary) !important; } /* Selected/highlighted items sit on the accent background so need inverse text. 03 Aug 2026: the .k-popup variants here used dead .k-state-* names and had no .k-selected sibling, so popup selected items are NOT covered — see FROZEN.md. */ html[data-apex-theme] .k-menu .k-item.k-selected > .k-link { color: var(--apex-text-inverse) !important; } /* -------------------------------------------------------------------------- File Reference control — 4-column flex: textbox (grows) + 3 fixed buttons -------------------------------------------------------------------------- */ .apex-file-ref-row { display: flex !important; align-items: center !important; gap: 4px !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .apex-file-ref-row input.k-textbox { flex: 1 1 auto !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; box-sizing: border-box !important; } .apex-file-ref-row .btn { flex: 0 0 32px !important; width: 32px !important; height: 30px !important; min-height: 30px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* jQuery .hide() must still beat the forced inline-flex above: the SDK hides individual buttons via the hidefindbutton/hideopenbutton/hidedeletebutton attributes (see TriSysSDK.Controls.FileReference.AfterLoadEvent) */ .apex-file-ref-row .btn[style*="display: none"] { display: none !important; } .apex-file-ref-row .btn:last-of-type { margin-left: auto !important; } #divFormContentRow table td[style*="width: 40px"][style*="padding-left: 5px"], html[data-apex-theme] .modal-content table td[style*="width: 40px"][style*="padding-left: 5px"] { width: 32px !important; min-width: 32px !important; padding-left: 4px !important; } #divFormContentRow table td[style*="width: 40px"][style*="padding-left: 5px"] > .btn, #divFormContentRow table td[style*="width: 40px"][style*="padding-left: 5px"] > button.btn, html[data-apex-theme] .modal-content table td[style*="width: 40px"][style*="padding-left: 5px"] > .btn, html[data-apex-theme] .modal-content table td[style*="width: 40px"][style*="padding-left: 5px"] > button.btn { width: 32px !important; min-width: 32px !important; height: 30px !important; min-height: 30px !important; padding: 0 !important; } #divFormContentRow table td[style*="width: 28px"] , html[data-apex-theme] .modal-content table td[style*="width: 28px"] { width: 28px !important; min-width: 28px !important; } #divFormContentRow table td[style*="width: 28px"] > .btn, #divFormContentRow table td[style*="width: 28px"] > button.btn, html[data-apex-theme] .modal-content table td[style*="width: 28px"] > .btn, html[data-apex-theme] .modal-content table td[style*="width: 28px"] > button.btn { width: 28px !important; min-width: 28px !important; height: 30px !important; min-height: 30px !important; padding: 0 !important; } @media (min-width: 992px) { #requirement-form-master-record-fields > .col-md-3 { width: 25%; } #requirement-form-master-record-fields > .col-md-3 > .table { width: 100%; table-layout: fixed; } #requirement-form-master-record-fields > .col-md-3 > .table > tbody > tr > td:last-child { min-width: 0; } #requirement-form-master-record-fields > .col-md-3:nth-child(3) > .table > tbody > tr > td:last-child, #requirement-form-master-record-fields > .col-md-3:nth-child(3) > .table > tbody > tr > td:last-child > table, #requirement-form-master-record-fields > .col-md-3:nth-child(3) > .table > tbody > tr > td:last-child > div { width: 100% !important; max-width: 100% !important; } #requirement-form-master-record-fields > .col-md-3:nth-child(3) > .table > tbody > tr:first-child > td:last-child > table { width: 100% !important; table-layout: fixed; } #requirement-form-master-record-fields > .col-md-3:nth-child(3) > .table > tbody > tr:first-child > td:last-child > table > tbody > tr > td:first-child, #requirement-form-master-record-fields > .col-md-3:nth-child(3) > .table > tbody > tr:first-child > td:last-child > table > tr > td:first-child { width: auto; min-width: 0; } #requirement-form-master-record-fields > .col-md-3:nth-child(3) > .table > tbody > tr:first-child > td:last-child > table > tbody > tr > td:last-child, #requirement-form-master-record-fields > .col-md-3:nth-child(3) > .table > tbody > tr:first-child > td:last-child > table > tr > td:last-child { width: 32px !important; padding-left: 4px !important; } #requirement-form-master-record-fields > .col-md-3:nth-child(3) > .table > tbody > tr > td:first-child { width: 96px !important; } #requirement-form-master-record-fields > .col-md-3:nth-child(3) .apex-file-ref-row { gap: 3px !important; } #requirement-form-master-record-fields > .col-md-3:nth-child(3) .apex-file-ref-row .btn { flex: 0 0 32px !important; width: 32px !important; height: 30px !important; min-height: 30px !important; } } /* Button icons — slightly larger than text */ #divFormContentRow .block .btn i, #divFormContentRow .block .btn .fa { font-size: 1.25rem; vertical-align: middle; } /* -------------------------------------------------------------------------- 2a. Login-specific overrides -------------------------------------------------------------------------- */ /* Social login row — fix alignment and background */ #social-login-buttons { margin-top: 0 !important; background: var(--apex-bg-card) !important; } #social-login-buttons .control-label { padding-top: 0 !important; position: relative; top: -3px; display: flex; align-items: center; justify-content: flex-end; } #loginPage-SocialNetworkButtons { margin-top: 0 !important; margin-left: 0 !important; left: 0 !important; display: flex; align-items: center; min-height: 40px; } #social-login-buttons .col-md-offset-3 { margin-left: 25%; } /* Social button icons — spaced evenly, centered */ #loginPage-SocialNetworkButtons .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto !important; padding: 10px 18px; } /* -------------------------------------------------------------------------- 2b. Tabs, Tables, Alerts, Kendo Harmony -------------------------------------------------------------------------- */ /* ========================================================================== Apex Tab Scroller Replaces the legacy mCustomScrollbar and inline-style tab approach with a fully CSS-native scrollable tab strip, injected chevron buttons, and smooth scroll-into-view behaviour. DOM structure injected by TriSysSDK.EntityFormTabs.EnhanceScrollableTabNav(): .block-title.apex-tab-scroller-host ← flex host, positioned