/**
* Hub UI themes (set on ).
* light (default) — current light publisher shell (no attribute)
* dark-mono — Dark Monochrome (aligned with HAL9004)
*/
/* Theme picker (all themes) */
.pf-theme-menu > a {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 12px;
font-weight: 500;
color: inherit;
text-decoration: none;
padding: 20px 12px;
outline: none;
}
.pf-theme-menu .dropdown-menu {
min-width: 12.5rem;
box-shadow: none;
border: 1px solid #e7eaec;
}
.pf-theme-menu .dropdown-header {
color: #888;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 16px 4px;
}
.pf-theme-menu .dropdown-item[data-pf-theme-set],
.pf-theme-menu button.dropdown-item[data-pf-theme-set] {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: 0;
color: #676a6c;
font-size: 13px;
padding: 8px 16px;
cursor: pointer;
}
.pf-theme-menu .dropdown-item[data-pf-theme-set]:hover,
.pf-theme-menu .dropdown-item[data-pf-theme-set]:focus {
background: #f5f5f5;
color: #1ab394;
}
.pf-theme-menu .dropdown-item[data-pf-theme-set].active {
font-weight: 700;
color: #1ab394;
}
/* User avatar initials */
.pf-user-avatar-ring {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
vertical-align: middle;
box-shadow: 0 0 0 2px rgba(26, 179, 148, 0.25);
}
.pf-user-avatar-ring--nav {
width: 28px;
height: 28px;
}
.pf-user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
font-weight: 600;
line-height: 1;
color: #fff;
text-transform: uppercase;
user-select: none;
}
.pf-user-avatar--nav {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
font-size: 11px;
}
.pf-profile-toggle {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 0;
text-decoration: none;
outline: none;
font-size: 12px;
white-space: nowrap;
}
.pf-profile-block {
display: flex;
align-items: center;
padding: 20px;
height: 64px;
}
.pf-profile-item {
height: 64px;
align-self: auto;
}
.pf-profile-name {
font-size: 13px;
line-height: 1;
margin: 0;
}
.pf-profile-toggle .caret {
margin-left: 2px;
}
/* =============================================================================
Dark Monochrome
============================================================================= */
html[data-pf-theme="dark-mono"] {
--pf-bg: #374151;
--pf-card: #1f2937;
--pf-sidebar: #1a232e;
--pf-border: #4b5563;
--pf-text: #f3f4f6;
--pf-muted: #9ca3af;
--pf-hover: #33383f;
--pf-table-header: #2c2c2c;
--pf-input-bg: #111827;
color-scheme: dark;
}
html[data-pf-theme="dark-mono"] body,
html[data-pf-theme="dark-mono"] #wrapper,
html[data-pf-theme="dark-mono"] #page-wrapper,
html[data-pf-theme="dark-mono"] .white-bg,
html[data-pf-theme="dark-mono"] .gray-bg {
background-color: var(--pf-bg) !important;
background-image: none !important;
color: var(--pf-text);
}
html[data-pf-theme="dark-mono"] body.top-navigation {
background-color: var(--pf-bg) !important;
}
/* Top nav */
html[data-pf-theme="dark-mono"] #navigation-bar-responsive,
html[data-pf-theme="dark-mono"] .navbar-static-top,
html[data-pf-theme="dark-mono"] .sticky-nav-bar {
background-color: var(--pf-sidebar) !important;
border-bottom-color: var(--pf-border) !important;
}
html[data-pf-theme="dark-mono"] #logo-container img {
filter: brightness(0) invert(1);
opacity: 0.92;
}
html[data-pf-theme="dark-mono"] .page-heading,
html[data-pf-theme="dark-mono"] .row.wrapper.border-bottom.white-bg {
background-color: var(--pf-card) !important;
border-bottom-color: var(--pf-border) !important;
}
html[data-pf-theme="dark-mono"] .menu-items,
html[data-pf-theme="dark-mono"] #report-menu,
html[data-pf-theme="dark-mono"] #report-display,
html[data-pf-theme="dark-mono"] #inventory-menu,
html[data-pf-theme="dark-mono"] #userx-menu,
html[data-pf-theme="dark-mono"] #profile-container .text-info,
html[data-pf-theme="dark-mono"] #profile-container .text-info b,
html[data-pf-theme="dark-mono"] #pf-theme-current-label {
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] #profile-container a,
html[data-pf-theme="dark-mono"] .pf-theme-menu > a {
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .navbar-nav .dropdown-menu,
html[data-pf-theme="dark-mono"] #profile-container .dropdown-menu,
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-menu,
html[data-pf-theme="dark-mono"] #dropdown_container {
background: var(--pf-card) !important;
border-color: var(--pf-border) !important;
}
html[data-pf-theme="dark-mono"] .navbar-nav .dropdown-menu > li > a,
html[data-pf-theme="dark-mono"] #profile-container .dropdown-menu > li > a,
html[data-pf-theme="dark-mono"] #dropdown_container > li > a,
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set] {
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .navbar-nav .dropdown-menu > li > a:hover,
html[data-pf-theme="dark-mono"] #profile-container .dropdown-menu > li > a:hover,
html[data-pf-theme="dark-mono"] #dropdown_container > li > a:hover,
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set]:hover,
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set]:focus {
background: #252b33 !important;
color: #e5e7eb !important;
}
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-item[data-pf-theme-set].active {
background: #1f2937 !important;
color: #f3f4f6 !important;
box-shadow: inset 0 0 0 1px #4b5563;
}
html[data-pf-theme="dark-mono"] .pf-theme-menu > a:hover,
html[data-pf-theme="dark-mono"] .pf-theme-menu > a:focus,
html[data-pf-theme="dark-mono"] .pf-profile-toggle:hover,
html[data-pf-theme="dark-mono"] .pf-profile-toggle:focus {
background: transparent !important;
background-color: transparent !important;
}
html[data-pf-theme="dark-mono"] .pf-user-avatar-ring {
box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.35);
}
html[data-pf-theme="dark-mono"] .pf-user-avatar-initials {
background-color: #374151 !important;
color: #f3f4f6 !important;
}
html[data-pf-theme="dark-mono"] .pf-theme-menu .dropdown-header {
color: var(--pf-muted);
}
/* Remove white hover/open highlights from top navigation */
html[data-pf-theme="dark-mono"] .top-navigation .nav > li > a:hover,
html[data-pf-theme="dark-mono"] .top-navigation .nav > li > a:focus,
html[data-pf-theme="dark-mono"] .top-navigation .nav > li a:hover,
html[data-pf-theme="dark-mono"] .top-navigation .nav > li a:focus,
html[data-pf-theme="dark-mono"] #navigation-bar-responsive .nav > li > a:hover,
html[data-pf-theme="dark-mono"] #navigation-bar-responsive .nav > li > a:focus,
html[data-pf-theme="dark-mono"] #menu-items .dropdown > a:hover,
html[data-pf-theme="dark-mono"] #menu-items .dropdown > a:focus,
html[data-pf-theme="dark-mono"] .navbar-top-links > li > a:hover,
html[data-pf-theme="dark-mono"] .navbar-top-links > li > a:focus {
background: transparent !important;
background-color: transparent !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .top-navigation .navbar .nav > li.active,
html[data-pf-theme="dark-mono"] .top-navigation .nav > li.active {
background: transparent !important;
}
html[data-pf-theme="dark-mono"] .nav .open > a,
html[data-pf-theme="dark-mono"] .nav .open > a:hover,
html[data-pf-theme="dark-mono"] .nav .open > a:focus,
html[data-pf-theme="dark-mono"] .top-navigation .nav .open > a,
html[data-pf-theme="dark-mono"] .top-navigation .nav .open > a:hover,
html[data-pf-theme="dark-mono"] .top-navigation .nav .open > a:focus {
background: transparent !important;
background-color: transparent !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .dropdown-menu > li > a:hover,
html[data-pf-theme="dark-mono"] .dropdown-menu > li > a:focus {
background-color: #252b33 !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .dropdown-menu > .active > a,
html[data-pf-theme="dark-mono"] .dropdown-menu > .active > a:hover,
html[data-pf-theme="dark-mono"] .dropdown-menu > .active > a:focus {
background-color: #1f2937 !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] #dropdown_container {
background-color: var(--pf-card) !important;
}
html[data-pf-theme="dark-mono"] #items-showcase,
html[data-pf-theme="dark-mono"] #items-showcase.opened-mobile-navigation {
background-color: var(--pf-sidebar) !important;
border-top-color: #6b7280 !important;
}
html[data-pf-theme="dark-mono"] .show {
border-top-color: #9ca3af;
}
/* Cards / ibox */
html[data-pf-theme="dark-mono"] .ibox,
html[data-pf-theme="dark-mono"] .ibox-content,
html[data-pf-theme="dark-mono"] .ibox-title,
html[data-pf-theme="dark-mono"] .panel,
html[data-pf-theme="dark-mono"] .panel-body,
html[data-pf-theme="dark-mono"] .card,
html[data-pf-theme="dark-mono"] .well,
html[data-pf-theme="dark-mono"] .border-bottom {
background-color: var(--pf-card) !important;
color: var(--pf-text);
border-color: var(--pf-border) !important;
}
html[data-pf-theme="dark-mono"] .ibox-title h5,
html[data-pf-theme="dark-mono"] .ibox-content h1,
html[data-pf-theme="dark-mono"] .ibox-content h2,
html[data-pf-theme="dark-mono"] .ibox-content h3,
html[data-pf-theme="dark-mono"] .ibox-content h4,
html[data-pf-theme="dark-mono"] h1,
html[data-pf-theme="dark-mono"] h2,
html[data-pf-theme="dark-mono"] h3,
html[data-pf-theme="dark-mono"] h4,
html[data-pf-theme="dark-mono"] h5,
html[data-pf-theme="dark-mono"] label,
html[data-pf-theme="dark-mono"] .form-control-label,
html[data-pf-theme="dark-mono"] .control-label {
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .text-muted,
html[data-pf-theme="dark-mono"] .note-stats,
html[data-pf-theme="dark-mono"] #dsc {
color: var(--pf-muted) !important;
}
html[data-pf-theme="dark-mono"] .hr-line-dashed {
background-color: transparent;
border-top-color: var(--pf-border) !important;
color: var(--pf-border);
}
/* Forms */
html[data-pf-theme="dark-mono"] .form-control,
html[data-pf-theme="dark-mono"] input.form-control,
html[data-pf-theme="dark-mono"] select.form-control,
html[data-pf-theme="dark-mono"] textarea.form-control,
html[data-pf-theme="dark-mono"] .custom-select,
html[data-pf-theme="dark-mono"] .btn-default {
background-color: var(--pf-input-bg) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .form-control::placeholder {
color: var(--pf-muted);
}
html[data-pf-theme="dark-mono"] .form-control:focus {
border-color: #6b7280 !important;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}
html[data-pf-theme="dark-mono"] .btn-primary {
background-color: #4b5563 !important;
border-color: #6b7280 !important;
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .btn-primary:hover,
html[data-pf-theme="dark-mono"] .btn-primary:focus {
background-color: #6b7280 !important;
border-color: #9ca3af !important;
}
html[data-pf-theme="dark-mono"] .btn-white,
html[data-pf-theme="dark-mono"] .btn-default {
background-color: var(--pf-card) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
}
/* Tables */
html[data-pf-theme="dark-mono"] .table,
html[data-pf-theme="dark-mono"] table.dataTable {
color: var(--pf-text);
background-color: var(--pf-card);
}
html[data-pf-theme="dark-mono"] .table > thead > tr > th,
html[data-pf-theme="dark-mono"] .table > tbody > tr > th,
html[data-pf-theme="dark-mono"] .table > tfoot > tr > th,
html[data-pf-theme="dark-mono"] .table > thead > tr > td,
html[data-pf-theme="dark-mono"] .table > tbody > tr > td,
html[data-pf-theme="dark-mono"] .table > tfoot > tr > td,
html[data-pf-theme="dark-mono"] table.dataTable thead th,
html[data-pf-theme="dark-mono"] table.dataTable tbody td {
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
background-color: transparent;
}
html[data-pf-theme="dark-mono"] .table > thead > tr > th,
html[data-pf-theme="dark-mono"] table.dataTable thead th {
background-color: var(--pf-table-header) !important;
}
html[data-pf-theme="dark-mono"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-pf-theme="dark-mono"] .table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.03) !important;
}
html[data-pf-theme="dark-mono"] .table-hover > tbody > tr:hover,
html[data-pf-theme="dark-mono"] .table-hover tbody tr:hover,
html[data-pf-theme="dark-mono"] table.dataTable tbody tr:hover td {
background-color: var(--pf-hover) !important;
}
html[data-pf-theme="dark-mono"] .table-bordered,
html[data-pf-theme="dark-mono"] .table-bordered > thead > tr > th,
html[data-pf-theme="dark-mono"] .table-bordered > tbody > tr > td {
border-color: var(--pf-border) !important;
}
/* DataTables chrome */
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_length,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_filter,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_info,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_paginate,
html[data-pf-theme="dark-mono"] .dataTables_wrapper label {
color: var(--pf-muted) !important;
}
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_filter input,
html[data-pf-theme="dark-mono"] .dataTables_wrapper .dataTables_length select {
background-color: var(--pf-input-bg) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .dataTables_wrapper .paginate_button,
html[data-pf-theme="dark-mono"] .pagination > li > a,
html[data-pf-theme="dark-mono"] .pagination > li > span {
background-color: var(--pf-card) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .dataTables_wrapper .paginate_button.current,
html[data-pf-theme="dark-mono"] .pagination > .active > a,
html[data-pf-theme="dark-mono"] .pagination > .active > span {
background-color: #4b5563 !important;
border-color: #6b7280 !important;
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .dt-buttons .btn,
html[data-pf-theme="dark-mono"] .html5buttons .btn,
html[data-pf-theme="dark-mono"] .dt-button {
background-color: var(--pf-card) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
}
/* Select2 */
html[data-pf-theme="dark-mono"] .select2-container--default .select2-selection--single,
html[data-pf-theme="dark-mono"] .select2-container--default .select2-selection--multiple {
background-color: var(--pf-input-bg) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text);
}
html[data-pf-theme="dark-mono"] .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .select2-dropdown {
background-color: var(--pf-card) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text);
}
html[data-pf-theme="dark-mono"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #4b5563 !important;
color: #fff !important;
}
html[data-pf-theme="dark-mono"] .select2-container--default .select2-results__option[aria-selected="true"] {
background-color: var(--pf-hover) !important;
}
html[data-pf-theme="dark-mono"] .select2-search--dropdown .select2-search__field {
background-color: var(--pf-input-bg) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
}
/* Dropdown filter (display report) */
html[data-pf-theme="dark-mono"] .dropdown dt,
html[data-pf-theme="dark-mono"] .dropdown dd ul {
background-color: var(--pf-card) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .dropdown dd ul li,
html[data-pf-theme="dark-mono"] .mutliSelect {
color: var(--pf-text);
}
/* Chart / graph area */
html[data-pf-theme="dark-mono"] #graph,
html[data-pf-theme="dark-mono"] .chart-container {
background-color: var(--pf-card);
}
/* Footer */
html[data-pf-theme="dark-mono"] .copyright_footer {
background-color: var(--pf-sidebar);
border-top-color: var(--pf-border) !important;
color: var(--pf-muted);
}
/* Alerts / badges */
html[data-pf-theme="dark-mono"] .alert-warning {
background-color: #3f3a2e !important;
border-color: #6b5e3c !important;
color: #f5e6c8 !important;
}
html[data-pf-theme="dark-mono"] .alert-info {
background-color: #1e293b !important;
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .badge-success,
html[data-pf-theme="dark-mono"] .badge-warning,
html[data-pf-theme="dark-mono"] .badge-danger,
html[data-pf-theme="dark-mono"] .badge-info,
html[data-pf-theme="dark-mono"] .badge-primary {
background-color: #4b5563 !important;
color: #f3f4f6 !important;
}
html[data-pf-theme="dark-mono"] .text-info,
html[data-pf-theme="dark-mono"] .text-warning,
html[data-pf-theme="dark-mono"] .text-danger,
html[data-pf-theme="dark-mono"] .text-success {
color: var(--pf-muted) !important;
}
/* Impersonation banner stays readable */
html[data-pf-theme="dark-mono"] .impersonation-banner {
background-color: #4b3b1f !important;
border-color: #8a6d3b !important;
color: #f5e6c8 !important;
}
html[data-pf-theme="dark-mono"] .impersonation-banner a {
color: #93c5fd !important;
}
/* Mobile menu */
html[data-pf-theme="dark-mono"] #items-showcase.opened-mobile-navigation,
html[data-pf-theme="dark-mono"] #mobile-reporting {
background-color: var(--pf-sidebar) !important;
}
html[data-pf-theme="dark-mono"] #background-shadow-mask.shadow-mask-background {
background-color: #000;
}
/* Daterangepicker / datepicker overlays */
html[data-pf-theme="dark-mono"] .daterangepicker,
html[data-pf-theme="dark-mono"] .datepicker,
html[data-pf-theme="dark-mono"] .datepicker-dropdown {
background-color: var(--pf-card) !important;
border-color: var(--pf-border) !important;
color: var(--pf-text) !important;
}
html[data-pf-theme="dark-mono"] .daterangepicker .calendar-table,
html[data-pf-theme="dark-mono"] .daterangepicker td.off,
html[data-pf-theme="dark-mono"] .daterangepicker td.available,
html[data-pf-theme="dark-mono"] .datepicker table tr td,
html[data-pf-theme="dark-mono"] .datepicker table tr th {
background-color: var(--pf-card);
color: var(--pf-text);
border-color: var(--pf-border);
}
html[data-pf-theme="dark-mono"] .daterangepicker td.active,
html[data-pf-theme="dark-mono"] .daterangepicker td.active:hover,
html[data-pf-theme="dark-mono"] .datepicker table tr td.active,
html[data-pf-theme="dark-mono"] .datepicker table tr td.active:hover {
background-color: #4b5563 !important;
color: #fff !important;
}
/* Modal */
html[data-pf-theme="dark-mono"] .modal-content {
background-color: var(--pf-card) !important;
color: var(--pf-text);
border-color: var(--pf-border);
}
html[data-pf-theme="dark-mono"] .modal-header,
html[data-pf-theme="dark-mono"] .modal-footer {
border-color: var(--pf-border) !important;
}
/* Pace progress */
html[data-pf-theme="dark-mono"] .pace .pace-progress {
background: #9ca3af;
}