/* ========================================================================== 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 */ 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); } /* -------------------------------------------------------------------------- 1c. Sidebar (#sidebar) -------------------------------------------------------------------------- */ /* Sidebar background — deeper, richer navy */ #sidebar, #sidebar-alt { background-color: var(--apex-sidebar-bg); } /* 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); } /* 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; } /* 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-button.k-state-hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-button.k-state-hover i, html[data-apex-theme] .modal-content .k-state-hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-state-hover i, html[data-apex-theme] .modal-content .k-state-selected span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-state-selected i, html[data-apex-theme] .modal-content .k-state-selected .k-in, 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-state-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), html[data-apex-theme] .modal-content .k-picker.k-state-focused 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, html[data-apex-theme] .modal-content .k-picker.k-state-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 .k-state-selected span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-treeview .k-state-selected span.k-in, html[data-apex-theme] .modal-content .k-treeview .k-state-hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-treeview .k-state-hover span.k-in, 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; } /* KendoUI dropdown list items — popups may render inside modal */ html[data-apex-theme] .modal-content .k-list > .k-state-selected span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-list > .k-state-highlight span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-list > .k-state-hover span:not(.btn):not(.label):not(.badge) { color: var(--apex-text-inverse) !important; } /* 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: #ffffff; } .btn-primary:hover, .btn-primary:focus { background: var(--apex-primary-dark); border-color: var(--apex-primary-dark); color: #ffffff; } .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: #ffffff !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: #ffffff !important; } /* Alt variant — white bg, coloured text/border */ .btn-alt.btn-primary { background: #ffffff; color: var(--apex-primary); border: 1px solid var(--apex-primary); } .btn-alt.btn-primary:hover { background: var(--apex-primary); color: #ffffff; } .btn-alt.btn-success { background: #ffffff; 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: #ffffff; 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 / Search Criteria buttons — promote btn-xs to btn-sm sizing */ #divFormContentRow .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 { padding: 6px 12px !important; margin-right: 5px; } /* 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; } /* 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 .k-item.k-state-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-state-selected, 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; } /* -------------------------------------------------------------------------- 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; } .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