/* Dark mode theme (2026-08-06, new feature, not part of the port). Toggled by * adding class "dark-mode" to (see UIPage.encodeChildren(), driven by * SessionController.isDarkMode()/toggleDarkMode(), triggered from the toggle * button in _header.xhtml). * * Base layer below covers what no page stylesheet ever declares explicitly * (the browser's own default white/black for the page background and for * form controls) - the generated layer further down re-colors every * grayscale background/border/text color actually found in the app's own * stylesheets (see tools/gen_dark_mode.py-style extraction), leaving * saturated brand colors (header blue, buttons, priority badges) untouched * since they already read fine unchanged on a dark background. */ body.dark-mode { background-color: #121212; color: #cccccc; } body.dark-mode input[type="text"], body.dark-mode input[type="password"], body.dark-mode input[type="email"], body.dark-mode input[type="search"], body.dark-mode input[type="number"], body.dark-mode input[type="date"], body.dark-mode input[type="tel"], body.dark-mode textarea, body.dark-mode select { background-color: #1e1e1e !important; color: #d0d0d0 !important; } body.dark-mode select option { background-color: #1e1e1e !important; color: #d0d0d0 !important; } /* Logo/icons/photos should not be recolored - only the page chrome around them is themed. */ body.dark-mode img { opacity: 0.92; } /* The submit-popup spinner itself is defined globally in commons.css (both modes, no image file - see there for why) - only the circle's "track" color needs adjusting here so it is visible against a dark background. */ body.dark-mode .form-submit-popup::before { border-color: #383838; border-top-color: #1093d3; } /* Auto-generated dark-mode overrides (2026-08-06): every grayscale * (low-saturation) background/border/text color found across the app's * stylesheets, remapped to a dark equivalent by lightness bucket - * light backgrounds go dark, dark text goes light. Saturated brand * colors (header blue, buttons, priority badges...) and already-light * foreground tones (icons, white text on colored buttons) are left * untouched: they already read fine unchanged on a dark background. */ body.dark-mode #controlPanelForm\:data\:tbody_element tr.portlet-table-text td, body.dark-mode #controlPanelForm\:data\:tbody_element tr.portlet-table-alternate td, body.dark-mode #controlPanelForm\:data\:tbody_element tr.portlet-table-selected td { border-top-color: #2e2e2e !important; } body.dark-mode .administrators .admin-users tbody td { border-bottom-color: #2e2e2e !important; } body.dark-mode .administrators .admin-users tbody td > span { color: #a0a0a0 !important; } body.dark-mode .administrators thead > tr:nth-child(1) .portlet-table-header { background-color: #1e1e1e !important; } body.dark-mode .block--card { background-color: #262626 !important; } body.dark-mode .block--card:hover { background-color: #262626 !important; } body.dark-mode .block.accordion { border-color: #2e2e2e !important; } body.dark-mode .block.accordion h2 { background-color: #262626 !important; } body.dark-mode .bookmarks .tab-content table tbody td { border-bottom-color: #2e2e2e !important; } body.dark-mode .bookmarks .tab-content table tbody td span { color: #a0a0a0 !important; } body.dark-mode .bookmarks .tab-content table tbody tr:hover { background-color: #1e1e1e !important; } body.dark-mode .bookmarks .tab-content table th .portlet-section-text { color: #a0a0a0 !important; } body.dark-mode .calendar { border-color: #424242 !important; } /* Native browser calendar-picker icon defaults to a dark glyph, which is near-invisible on the dark input background set above - only relevant in dark mode, where the background is actually dark; left unstyled (dark glyph on the light background) everywhere else. Firefox does not support styling this icon. */ body.dark-mode input[type="date"].calendar::-webkit-calendar-picker-indicator { filter: invert(1); } body.dark-mode .categories .treeview .category .no-members { color: #a0a0a0 !important; } body.dark-mode .categories .treeview .order { border-color: #2e2e2e !important; } body.dark-mode .categories .treeview .properties .portlet-section-text { color: #a0a0a0 !important; } body.dark-mode .categories .virtualCategories-list, body.dark-mode .categories .members-list { background-color: #262626 !important; color: #b8b8b8 !important; } body.dark-mode .category-members .members_array { background-color: #262626 !important; } body.dark-mode .category-members .members_array tbody td { border-bottom-color: #2e2e2e !important; } body.dark-mode .category.leaf { color: #b8b8b8 !important; } body.dark-mode .category_choice .treeview > span > table { background-color: #262626 !important; border-bottom-color: #383838 !important; } body.dark-mode .category_choice .treeview > span > table:hover { background-color: #1e1e1e !important; } body.dark-mode .category_choice .treeview table { background-color: #1e1e1e !important; } body.dark-mode .content h1, body.dark-mode .content h1 > span, body.dark-mode .content h2, body.dark-mode .content h2 > span { color: #b8b8b8 !important; } body.dark-mode .dashboard .actions-list-wrapper > input, body.dark-mode .bookmarks .actions-list-wrapper > input { color: #b8b8b8 !important; } body.dark-mode .dashboard .column-header .fa-sort:hover { color: #a0a0a0 !important; } body.dark-mode .dashboard .evenRow { background-color: #262626 !important; } body.dark-mode .dashboard .ticket-status.ticket-postponed { background-color: #424242 !important; } body.dark-mode .dashboard .ticketControlPanel-item-actions .fa-cog:hover { color: #a0a0a0 !important; } body.dark-mode .dashboard .ticketControlPanel-item-actions-wrapper > span:hover, body.dark-mode .dashboard .actions-list-wrapper > input:hover, body.dark-mode .bookmarks .actions-list-wrapper > input:hover { background-color: #262626 !important; } body.dark-mode .dashboard .ticketControlPanel-item-actions-wrapper, body.dark-mode .dashboard .actions-list-wrapper, body.dark-mode .bookmarks .actions-list-wrapper { background-color: #1e1e1e !important; border-color: #383838 !important; } body.dark-mode .dashboard tbody .oddRow td span, body.dark-mode .dashboard tbody .evenRow td span { color: #e8e8e8 !important; } body.dark-mode .dashboard tbody .portlet-table-selected { background-color: #383838 !important; } body.dark-mode .dashboard thead .column-header .column-label { color: #b8b8b8 !important; } body.dark-mode .dashboard thead > tr:nth-child(1) .portlet-table-header { background-color: #1e1e1e !important; } body.dark-mode .dashboard thead > tr:nth-child(2) .portlet-table-header { background-color: #2e2e2e !important; } body.dark-mode .dashboard-header { background-color: #262626 !important; } body.dark-mode .dashboard-header .portlet-section-text { color: #e8e8e8 !important; } body.dark-mode .dashboard-header thead th { border-bottom-color: #2e2e2e !important; } body.dark-mode .dashboard-header-wrapper .items-count .portlet-section-text { color: #b8b8b8 !important; } body.dark-mode .dashboard-paginator .fas:hover { background-color: #262626 !important; } body.dark-mode .dashboard-paginator a { color: #b8b8b8 !important; } body.dark-mode .dashboard-paginator a:hover { background-color: #262626 !important; } body.dark-mode .dashboard.edit-columns .reset-columns span { background-color: #1e1e1e !important; color: #b8b8b8 !important; } body.dark-mode .dashboard.edit-columns tbody tr:hover td span { color: #b8b8b8 !important; } body.dark-mode .dashboard.edit-columns thead > tr:nth-child(2) .portlet-table-header { background-color: #1e1e1e !important; } body.dark-mode .dashboard.header-wrapper thead > tr .portlet-section-text, body.dark-mode .dashboard .column-header .portlet-section-text { color: #e8e8e8 !important; } body.dark-mode .departmenEdit .form-body .form-block, body.dark-mode .categoryEdit .form-body .form-block { border-bottom-color: #2e2e2e !important; } body.dark-mode .department.leaf { color: #b8b8b8 !important; } body.dark-mode .departmentView .tab-content table tbody td span { color: #a0a0a0 !important; } body.dark-mode .departmentView .tab-content table tbody td, body.dark-mode .departmentView .tab-content .form-item > div, body.dark-mode .departmentFaqLinks .current-faq-links-list table tbody td { border-bottom-color: #2e2e2e !important; } body.dark-mode .departmentView .tab-content table tbody tr:hover { background-color: #1e1e1e !important; } body.dark-mode .departmentView .tab-content table th .portlet-section-text { color: #a0a0a0 !important; } body.dark-mode .departments .dashboard .move .fas { color: #a0a0a0 !important; } body.dark-mode .entriesNumber { background-color: #424242 !important; border-color: #424242 !important; } body.dark-mode .faq h2 .faq-header { color: #b8b8b8 !important; } body.dark-mode .faqView table tbody td > span { color: #a0a0a0 !important; } body.dark-mode .flc-pager-links a { color: #b8b8b8 !important; } body.dark-mode .flc-pager-links a:hover { color: #d0d0d0 !important; } body.dark-mode .footer .region { background-color: #262626 !important; } body.dark-mode .form-block.preference { border-color: #262626 !important; } body.dark-mode .form-category .category-lib { background-color: #262626 !important; border-color: #2e2e2e !important; } body.dark-mode .form-goto-ticket input[type='text']:focus { color: #b8b8b8 !important; } body.dark-mode .form-item .input-checkbox input[type="checkbox"] + .checkbox:before { color: #a0a0a0 !important; } body.dark-mode .form-item .input-checkbox input[type="checkbox"]:disabled + .checkbox:before { color: #e8e8e8 !important; } body.dark-mode .form-item input[type='text'], body.dark-mode .form-item input[type='password'] { border-color: #424242 !important; } body.dark-mode .form-item label { color: #e8e8e8 !important; } body.dark-mode .form-item select { border-color: #424242 !important; } /* Classic theme's own dark mode for button--tertiary (modern theme's own dark mode already comes from CSS custom properties - see modern-theme. css's body.dark-mode.theme-modern block - which resolves to these exact same values, so no conflict either way). */ body.dark-mode .form-item span.button--tertiary, body.dark-mode input[type='submit'].button--tertiary { background-color: #1e1e1e !important; border-color: #2e2e2e !important; color: #cccccc !important; } body.dark-mode .form-item input[type='file']::file-selector-button, body.dark-mode .form-item input[type='file']::-webkit-file-upload-button { background-color: #1e1e1e; border-color: #2e2e2e; color: #cccccc; } body.dark-mode .form-item select option { color: #b8b8b8 !important; } body.dark-mode .form-select .action-item.separator { border-top-color: #383838 !important; } body.dark-mode .form-select .actions-header-inner { border-color: #383838 !important; } body.dark-mode .form-select .actions-list { background-color: #1e1e1e !important; border-color: #383838 !important; } body.dark-mode .form-select .actions-list-inner span:hover { background-color: #262626 !important; } body.dark-mode .form-select.actions { background-color: #1e1e1e !important; } body.dark-mode .history-container .action-alert-recipient { background-color: #1e1e1e !important; color: #b8b8b8 !important; } body.dark-mode .history-container .col-option { background-color: #1e1e1e !important; } body.dark-mode .history-container .portlet-table-header { color: #b8b8b8 !important; } body.dark-mode .members-list td { border-bottom-color: #2e2e2e !important; } body.dark-mode .message { background-color: #262626 !important; } body.dark-mode .navigation { background-color: #1e1e1e !important; } body.dark-mode .navigation .portlet-menu-item input, body.dark-mode .navigation .portlet-menu-item-selected input { color: #b8b8b8 !important; } /* Classic theme's own selected-item indicator (navigation.style.css: ".navigation .portlet-menu-item-selected input { color: rgb(15,147,211) }") was invisible in dark mode: same specificity as the rule above, but this one comes first and has no !important, so the gray always won. The "modern" theme's own selected state (modern-theme.css) is unaffected - its selector is more specific (also scoped to .theme-modern). */ body.dark-mode .navigation .portlet-menu-item-selected input { color: #4fb3e0 !important; } body.dark-mode .portal .block:hover { background-color: #262626 !important; } body.dark-mode .portlet .fl-overflow { border-color: #262626 !important; } body.dark-mode .portlet .fl-overflow li { background-color: #1e1e1e !important; } body.dark-mode .portlet .fl-overflow li a { color: #e8e8e8 !important; } body.dark-mode .portlet .fl-overflow li a:active { color: #e8e8e8 !important; } body.dark-mode .portlet .fl-overflow li a:hover { color: #e8e8e8 !important; } body.dark-mode .portlet .fl-overflow li a:visited { color: #e8e8e8 !important; } body.dark-mode .portlet .fl-overflow li:hover { background-color: #383838 !important; } body.dark-mode .portlet .groupmgr-left-pane { background-color: #262626 !important; } body.dark-mode .portlet .groupmgr-right-pane { background-color: #1e1e1e !important; } body.dark-mode .portlet .news-item-excerpt { color: #b8b8b8 !important; } body.dark-mode .portlet .news-source p { border-bottom-color: #2e2e2e !important; } body.dark-mode .portlet .portlet-2panel .portlet-panel-left { background-color: #262626 !important; } body.dark-mode .portlet .portlet-2panel .portlet-panel-right { background-color: #1e1e1e !important; } body.dark-mode .portlet .portlet-browse .fl-tab-content { border-color: #2e2e2e !important; } body.dark-mode .portlet .portlet-browse-breadcrumb a { color: #b8b8b8 !important; } body.dark-mode .portlet .portlet-browse-breadcrumb a:hover { color: #e8e8e8 !important; } body.dark-mode .portlet .portlet-browse-header { border-bottom-color: #2e2e2e !important; } body.dark-mode .portlet .portlet-button:hover, body.dark-mode .portlet a.portlet-button:hover, body.dark-mode .portlet .portlet-button:hover, body.dark-mode .portlet-form-button:hover { background-color: #262626 !important; } body.dark-mode .portlet .portlet-heading-selections, body.dark-mode .portlet .portlet-heading-search, body.dark-mode .portlet .portlet-heading-browse { color: #e8e8e8 !important; } body.dark-mode .portlet .portlet-section-options { background-color: #1e1e1e !important; } body.dark-mode .portlet .portlet-section-options a { border-bottom-color: #262626 !important; color: #b8b8b8 !important; } body.dark-mode .portlet .portlet-section-options a:hover { color: #e8e8e8 !important; } body.dark-mode .portlet .portlet-title h3 { border-top-color: #2e2e2e !important; } body.dark-mode .portlet .portlet-toolbar { border-top-color: #2e2e2e !important; } body.dark-mode .portlet .portlet-toolbar ul a { border-color: #2e2e2e !important; } body.dark-mode .portlet .portlet-toolbar ul a:hover { background-color: #262626 !important; } body.dark-mode .portlet .selected a.portlet-browse-select { color: #d0d0d0 !important; } body.dark-mode .portlet .selected a.portlet-browse-select:hover { background-color: #262626 !important; } body.dark-mode .portlet a { color: #b8b8b8 !important; } body.dark-mode .portlet a.portlet-browse-select { background-color: #1e1e1e !important; } body.dark-mode .portlet fieldset { border-color: #2e2e2e !important; } body.dark-mode .portlet, body.dark-mode .portlet p { color: #b8b8b8 !important; } body.dark-mode .portlet-form-box { background-color: #262626 !important; border-color: #2e2e2e !important; } body.dark-mode .portlet-menu { background-color: #262626 !important; } body.dark-mode .portlet-menu li input { background-color: #1e1e1e !important; border-color: #2e2e2e !important; } body.dark-mode .portlet-menu li input:hover { background-color: #262626 !important; color: #e8e8e8 !important; } body.dark-mode .portlet-menu-item input { background-color: #1e1e1e !important; border-color: #1e1e1e !important; } body.dark-mode .portlet-menu-item-hover { color: #e8e8e8 !important; } body.dark-mode .portlet-msg-info { background-color: #1e1e1e !important; color: #d0d0d0 !important; } body.dark-mode .portlet-msg-status h2, body.dark-mode .portlet-msg-info h2, body.dark-mode .portlet-msg-error h2, body.dark-mode .portlet-msg-alert h2, body.dark-mode .portlet-msg-success h2 { color: #b8b8b8 !important; } body.dark-mode .portlet-msg-status h3, body.dark-mode .portlet-msg-info h3, body.dark-mode .portlet-msg-error h3, body.dark-mode .portlet-msg-alert h3, body.dark-mode .portlet-msg-success h3 { color: #b8b8b8 !important; } body.dark-mode .portlet-msg-status, body.dark-mode .portlet-msg-info, body.dark-mode .portlet-msg-error, body.dark-mode .portlet-msg-alert, body.dark-mode .portlet-msg-success { background-color: #262626 !important; border-color: #2e2e2e !important; color: #b8b8b8 !important; } body.dark-mode .portlet-msg-success { background-color: #1e1e1e !important; color: #d0d0d0 !important; } body.dark-mode .portlet-section-alternate { background-color: #262626 !important; } body.dark-mode .portlet-section-footer { color: #b8b8b8 !important; } body.dark-mode .portlet-section-selected { background-color: #262626 !important; } body.dark-mode .portlet-section-text { color: #b8b8b8 !important; } body.dark-mode .preferences legend { background-color: #1e1e1e !important; } body.dark-mode .response-content { background-color: #1e1e1e !important; } body.dark-mode .search-result-data td { border-bottom-color: #383838 !important; } body.dark-mode .style3 { color: #e8e8e8 !important; } body.dark-mode .tab-content { background-color: #262626 !important; } body.dark-mode .tab-content fieldset { background-color: #1e1e1e !important; } body.dark-mode .ticket-property { border-bottom-color: #383838 !important; } body.dark-mode .ticketAssign .selected-manager { background-color: #262626 !important; border-color: #2e2e2e !important; } body.dark-mode .ticketInvite .form-content { background-color: #262626 !important; } body.dark-mode .ticketInvite .form-menu .current { background-color: #262626 !important; color: #b8b8b8 !important; } body.dark-mode .ticketMove .category_choice { background-color: #262626 !important; } body.dark-mode .ticketMove .form-content { background-color: #262626 !important; } body.dark-mode .ticketMove .form-menu .current { background-color: #262626 !important; color: #b8b8b8 !important; } body.dark-mode .ticketView .tab-content table tbody td { border-bottom-color: #2e2e2e !important; } /* :not(.history-container) excludes the ticket action/message history table (_ticketActionHistory.xhtml's ) - this rule is meant for muted metadata spans in other .ticketView tables (properties, attachments...), but its plain "table tbody td span" selector would otherwise also catch a message's own colored (TinyMCE's "forecolor"), overriding it with !important since that beats a non-important inline style regardless of specificity - see dark-mode-email.js, which only ever touches near-black/near-white text and was wrongly suspected of doing this before this rule was found to be the actual cause. */ body.dark-mode .ticketView .tab-content table:not(.history-container) tbody td span { color: #a0a0a0 !important; } body.dark-mode .ticketView .tab-content table tbody tr:hover { background-color: #1e1e1e !important; } body.dark-mode .ticketView .tab-content table th .portlet-section-text { color: #a0a0a0 !important; } body.dark-mode .tooltip { color: #b8b8b8 !important; } body.dark-mode .tooltip .tooltiptext { background-color: #1e1e1e !important; color: #b8b8b8 !important; } body.dark-mode .view-ticket_files .files_array .column { border-bottom-color: #383838 !important; } body.dark-mode .view-ticket_files .files_array .portlet-table-header { border-bottom-color: #424242 !important; color: #b8b8b8 !important; } body.dark-mode .view-ticket_header { background-color: #262626 !important; } body.dark-mode .view-ticket_history .action--content, body.dark-mode .view-ticket_history .action--content { background-color: #1e1e1e !important; } body.dark-mode .view-ticket_history .action--header { color: #a0a0a0 !important; } body.dark-mode .view-ticket_history .action-message { background-color: #1e1e1e !important; color: #d0d0d0 !important; } body.dark-mode .view-ticket_history td { border-top-color: #2e2e2e !important; } body.dark-mode .view-ticket_history_owner td { border-top-color: #2e2e2e !important; } body.dark-mode .view-ticket_invitations .invite_array .column { border-bottom-color: #383838 !important; } body.dark-mode .view-ticket_invitations .invite_array tbody tr:first-of-type .column { border-top-color: #383838 !important; } body.dark-mode .view-ticket_secondary_properties .form-block { border-bottom-color: #2e2e2e !important; } body.dark-mode .view-ticket_title { background-color: #1e1e1e !important; } body.dark-mode fieldset { border-color: #262626 !important; } body.dark-mode fieldset legend { color: #b8b8b8 !important; } body.dark-mode th { background-color: #262626 !important; color: #b8b8b8 !important; } body.dark-mode th.uportal-channel-subtitle { background-color: #262626 !important; } body.dark-mode ul.tabs li.current { background-color: #262626 !important; color: #b8b8b8 !important; } body.dark-mode ul.tabs li.current:hover { color: #b8b8b8 !important; }