/* Optimal Trend v3 formatting chassis.
Scope: pages marked with body.ot-v3-format. */
:root {
--ot-v3-navy: #002F65;
--ot-v3-navy-dark: #001E44;
--ot-v3-teal: #00A8CB;
--ot-v3-teal-soft: #E0F6FB;
--ot-v3-canvas: #FAFAF8;
--ot-v3-surface: #FFFFFF;
--ot-v3-surface-alt: #F6F8FA;
--ot-v3-panel: #062A57;
--ot-v3-panel-deep: #03234C;
--ot-v3-ink: #0D1117;
--ot-v3-ink-2: #1C2333;
--ot-v3-ink-3: #3A4252;
--ot-v3-ink-4: #6B7280;
--ot-v3-rule: #D8D3CC;
--ot-v3-rule-soft: #EBEBEB;
--ot-v3-danger: #D52B2B;
--ot-v3-ok: #35A852;
--ot-v3-warn: #F0B429;
--ot-v3-topbar-h: 48px;
--ot-v3-side-w: 260px;
--ot-v3-gap: 8px;
}
html[data-theme="dark"] {
--ot-v3-canvas: #0A2D57;
--ot-v3-surface: #123B6B;
--ot-v3-surface-alt: #0E345F;
--ot-v3-panel: #0B315E;
--ot-v3-panel-deep: #08284E;
--ot-v3-ink: #F2EFE9;
--ot-v3-ink-2: #D7DEE8;
--ot-v3-ink-3: #B7C0CE;
--ot-v3-ink-4: #91A0B5;
--ot-v3-rule: rgba(255, 255, 255, 0.18);
--ot-v3-rule-soft: rgba(255, 255, 255, 0.10);
--ot-v3-teal-soft: rgba(0, 168, 203, 0.18);
}
body.ot-v3-format,
body.ot-v3-format button,
body.ot-v3-format input,
body.ot-v3-format select,
body.ot-v3-format textarea {
font-family: "Helvetica Neue", Arial, sans-serif;
}
body.ot-v3-format {
margin: 0;
background: var(--ot-v3-canvas);
color: var(--ot-v3-ink);
font-size: 12px;
line-height: 1.35;
}
body.ot-v3-format *,
body.ot-v3-format *::before,
body.ot-v3-format *::after {
box-sizing: border-box;
}
body.ot-v3-format a {
color: var(--ot-v3-navy);
}
html[data-theme="dark"] body.ot-v3-format a {
color: #7EDCF0;
}
body.ot-v3-format .ot-shell__topbar {
min-height: var(--ot-v3-topbar-h) !important;
display: grid !important;
grid-template-columns: minmax(230px, auto) minmax(0, 1fr) auto !important;
gap: 14px !important;
align-items: center !important;
padding: 6px 18px !important;
background: var(--ot-v3-navy) !important;
color: #FFFFFF !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}
body.ot-v3-format .ot-shell__brand-link {
display: grid !important;
gap: 1px !important;
color: inherit !important;
text-decoration: none !important;
}
body.ot-v3-format .ot-shell-title {
margin: 0 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 15px !important;
line-height: 1.08 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
body.ot-v3-format .ot-eyebrow,
body.ot-v3-format .eyebrow,
body.ot-v3-format .section-eyebrow {
margin: 0;
color: var(--ot-v3-teal);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.13em;
line-height: 1.1;
text-transform: uppercase;
}
body.ot-v3-format .ot-shell__nav {
display: flex !important;
flex-wrap: wrap !important;
gap: 3px !important;
align-items: center !important;
justify-content: flex-end !important;
}
body.ot-v3-format .ot-shell__nav a {
min-height: 28px !important;
display: inline-flex !important;
align-items: center !important;
padding: 5px 10px !important;
border: 1px solid rgba(255, 255, 255, 0.24) !important;
border-radius: 2px !important;
color: #FFFFFF !important;
font-size: 11px !important;
line-height: 1 !important;
text-decoration: none !important;
}
body.ot-v3-format .ot-shell__nav a:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
body.ot-v3-format .ot-shell__nav a[aria-current="page"],
body.ot-v3-format .ot-shell__nav a.active,
body.ot-v3-format .ot-shell__nav a.is-active {
background: var(--ot-v3-teal) !important;
border-color: var(--ot-v3-teal) !important;
color: var(--ot-v3-navy-dark) !important;
font-weight: 700 !important;
}
body.ot-v3-format .ot-shell__utilities,
body.ot-v3-format .ot-index-user-controls {
display: flex !important;
gap: 5px !important;
align-items: center !important;
}
body.ot-v3-format .ot-theme-toggle,
body.ot-v3-format .ot-notif-bell,
body.ot-v3-format .ot-shell__signout {
min-height: 28px !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
border-radius: 2px !important;
background: transparent !important;
color: #FFFFFF !important;
font-size: 10.5px !important;
line-height: 1 !important;
}
body.ot-v3-format .ot-theme-toggle,
body.ot-v3-format .ot-notif-bell {
width: 28px !important;
padding: 0 !important;
}
body.ot-v3-format .ot-shell__signout {
padding: 0 10px !important;
}
body.ot-v3-format .ot-user-chip {
display: grid !important;
justify-items: end !important;
font-size: 10.5px !important;
line-height: 1.1 !important;
}
body.ot-v3-format .ot-user-chip span:last-child {
color: var(--ot-v3-teal-soft) !important;
font-size: 8.5px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
body.ot-v3-format .ot-footer {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 10px 18px;
border-top: 1px solid var(--ot-v3-rule-soft);
background: var(--ot-v3-surface);
color: var(--ot-v3-ink-4);
font-size: 11px;
}
/* Shared page rhythm */
body.ot-v3-format .ot-page,
body.ot-v3-format .ot-page--admin,
body.ot-v3-format .cards-container,
body.ot-v3-format .content,
body.ot-v3-format .main-content {
background: var(--ot-v3-canvas);
}
body.ot-v3-format .ot-page__header,
body.ot-v3-format .ot-context-band,
body.ot-v3-format .ot-context-band--compact,
body.ot-v3-format .page-header,
body.ot-v3-format .header {
padding: 10px 16px !important;
background: var(--ot-v3-surface) !important;
border: 1px solid var(--ot-v3-rule-soft) !important;
box-shadow: none !important;
}
body.ot-v3-format .ot-page__header h1,
body.ot-v3-format .ot-context-band h1,
body.ot-v3-format .ot-context-band h2,
body.ot-v3-format .page-title,
body.ot-v3-format .page-header-title,
body.ot-v3-format .header-title {
margin: 0 !important;
color: var(--ot-v3-navy) !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 18px !important;
line-height: 1.12 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
html[data-theme="dark"] body.ot-v3-format .ot-page__header h1,
html[data-theme="dark"] body.ot-v3-format .ot-context-band h1,
html[data-theme="dark"] body.ot-v3-format .ot-context-band h2,
html[data-theme="dark"] body.ot-v3-format .page-title,
html[data-theme="dark"] body.ot-v3-format .page-header-title,
html[data-theme="dark"] body.ot-v3-format .header-title {
color: var(--ot-v3-ink) !important;
}
body.ot-v3-format .ot-page__header p,
body.ot-v3-format .ot-context-band p,
body.ot-v3-format .page-subtitle,
body.ot-v3-format .page-header-subtitle,
body.ot-v3-format .subtitle {
margin: 3px 0 0 !important;
color: var(--ot-v3-ink-3) !important;
font-size: 11px !important;
line-height: 1.3 !important;
}
body.ot-v3-format .ot-card,
body.ot-v3-format .ot-panel,
body.ot-v3-format .ot-card--form,
body.ot-v3-format .ot-kpi-card,
body.ot-v3-format .summary-card,
body.ot-v3-format .config-card,
body.ot-v3-format .case-card,
body.ot-v3-format .chart-card,
body.ot-v3-format .energy-stat-card,
body.ot-v3-format .ot-gallery-card,
body.ot-v3-format .ot-maint__downtime-asset-card {
background: var(--ot-v3-surface) !important;
border: 1px solid var(--ot-v3-rule-soft) !important;
border-radius: 2px !important;
box-shadow: none !important;
}
body.ot-v3-format .ot-card__header,
body.ot-v3-format .ot-panel__header,
body.ot-v3-format .section-header,
body.ot-v3-format .case-card-header,
body.ot-v3-format .config-card-title,
body.ot-v3-format .chart-title {
min-height: 30px;
padding: 7px 10px !important;
border-bottom: 1px solid var(--ot-v3-rule-soft) !important;
background: var(--ot-v3-surface-alt) !important;
color: var(--ot-v3-navy) !important;
font-size: 12px !important;
font-weight: 700 !important;
}
html[data-theme="dark"] body.ot-v3-format .ot-card__header,
html[data-theme="dark"] body.ot-v3-format .ot-panel__header,
html[data-theme="dark"] body.ot-v3-format .section-header,
html[data-theme="dark"] body.ot-v3-format .case-card-header,
html[data-theme="dark"] body.ot-v3-format .config-card-title,
html[data-theme="dark"] body.ot-v3-format .chart-title {
color: var(--ot-v3-ink) !important;
}
body.ot-v3-format .ot-card__body,
body.ot-v3-format .ot-card--form > .ot-card__body,
body.ot-v3-format .case-card-body,
body.ot-v3-format .config-card,
body.ot-v3-format .summary-card {
padding: 10px !important;
}
/* Shared tab and button language */
body.ot-v3-format .ot-tabs,
body.ot-v3-format .ot-tabs--compact,
body.ot-v3-format .ot-tab-strip,
body.ot-v3-format .ot-maint__tab-group,
body.ot-v3-format .tab-group {
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
overflow-x: auto !important;
padding: 0 !important;
background: var(--ot-v3-navy) !important;
border: 1px solid var(--ot-v3-rule-soft) !important;
scrollbar-width: thin;
}
body.ot-v3-format .ot-tabs button,
body.ot-v3-format .ot-tabs--compact button,
body.ot-v3-format .ot-tab-strip button,
body.ot-v3-format .ot-maint__tab,
body.ot-v3-format .tab {
flex: 0 0 auto !important;
min-height: 28px !important;
padding: 0 12px !important;
border: 0 !important;
border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 0 !important;
background: transparent !important;
color: rgba(255, 255, 255, 0.78) !important;
font-size: 10.5px !important;
line-height: 28px !important;
white-space: nowrap !important;
}
body.ot-v3-format .ot-tabs button.is-active,
body.ot-v3-format .ot-tabs--compact button.is-active,
body.ot-v3-format .ot-tab-strip button.is-active,
body.ot-v3-format .ot-tab-strip button[aria-selected="true"],
body.ot-v3-format .ot-tab-strip .ot-tab[aria-selected="true"],
body.ot-v3-format .ot-maint__tab.active,
body.ot-v3-format .ot-maint__tab.is-active,
body.ot-v3-format .tab.active,
body.ot-v3-format .tab.is-active {
background: var(--ot-v3-navy) !important;
color: #FFFFFF !important;
font-weight: 700 !important;
box-shadow: inset 0 -3px 0 var(--ot-v3-teal) !important;
}
body.ot-v3-format .ot-tabs button.is-active *,
body.ot-v3-format .ot-tabs--compact button.is-active *,
body.ot-v3-format .ot-tab-strip button.is-active *,
body.ot-v3-format .ot-tab-strip button[aria-selected="true"] *,
body.ot-v3-format .ot-tab-strip .ot-tab[aria-selected="true"] *,
body.ot-v3-format .ot-maint__tab.active *,
body.ot-v3-format .ot-maint__tab.is-active *,
body.ot-v3-format .tab.active *,
body.ot-v3-format .tab.is-active * {
color: #FFFFFF !important;
}
body.ot-v3-format button,
body.ot-v3-format .btn,
body.ot-v3-format .button,
body.ot-v3-format .ot-button,
body.ot-v3-format .ot-btn,
body.ot-v3-format .ot-controls button,
body.ot-v3-format .ot-toolbar button {
border-radius: 2px !important;
min-height: 30px;
padding: 6px 10px;
border: 1px solid var(--ot-v3-navy);
background: var(--ot-v3-navy);
color: #FFFFFF;
font-size: 11px;
line-height: 1;
}
body.ot-v3-format button:hover,
body.ot-v3-format .btn:hover,
body.ot-v3-format .button:hover,
body.ot-v3-format .ot-button:hover,
body.ot-v3-format .ot-btn:hover {
filter: brightness(1.08);
}
body.ot-v3-format button[disabled],
body.ot-v3-format .btn[disabled],
body.ot-v3-format .button[disabled] {
cursor: not-allowed;
opacity: 0.58;
}
body.ot-v3-format input,
body.ot-v3-format select,
body.ot-v3-format textarea,
body.ot-v3-format .form-input,
body.ot-v3-format .form-select {
min-height: 30px !important;
padding: 5px 8px !important;
border: 1px solid var(--ot-v3-rule) !important;
border-radius: 2px !important;
background: var(--ot-v3-surface) !important;
color: var(--ot-v3-ink) !important;
font-size: 11.5px !important;
}
body.ot-v3-format textarea {
min-height: 68px !important;
}
body.ot-v3-format input:focus,
body.ot-v3-format select:focus,
body.ot-v3-format textarea:focus,
body.ot-v3-format button:focus-visible,
body.ot-v3-format a:focus-visible {
outline: 2px solid rgba(0, 168, 203, 0.65) !important;
outline-offset: 2px !important;
}
body.ot-v3-format label,
body.ot-v3-format .filter-label,
body.ot-v3-format .case-detail-label,
body.ot-v3-format th {
color: var(--ot-v3-navy) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
}
body.ot-v3-format label.ot-btn,
body.ot-v3-format .ot-file-picker label.ot-btn {
align-items: center !important;
background: var(--ot-v3-navy) !important;
border-color: var(--ot-v3-navy) !important;
color: #FFFFFF !important;
display: inline-flex !important;
justify-content: center !important;
min-height: 30px !important;
}
body.ot-v3-format .ot-file-picker {
align-items: center !important;
display: inline-flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
body.ot-v3-format .ot-file-picker__input {
height: 1px !important;
opacity: 0 !important;
overflow: hidden !important;
position: absolute !important;
width: 1px !important;
}
body.ot-v3-format .ot-file-picker__filename {
color: var(--ot-v3-ink-3, #3A4252) !important;
font-size: 11px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
html[data-theme="dark"] body.ot-v3-format label,
html[data-theme="dark"] body.ot-v3-format .filter-label,
html[data-theme="dark"] body.ot-v3-format .case-detail-label,
html[data-theme="dark"] body.ot-v3-format th {
color: var(--ot-v3-ink-2) !important;
}
body.ot-v3-format table,
body.ot-v3-format .ot-audit-table,
body.ot-v3-format .ot-data-table {
width: 100%;
border-collapse: collapse;
background: var(--ot-v3-surface);
color: var(--ot-v3-ink);
font-size: 11px !important;
}
body.ot-v3-format th,
body.ot-v3-format td,
body.ot-v3-format .ot-audit-table th,
body.ot-v3-format .ot-audit-table td,
body.ot-v3-format .ot-data-table th,
body.ot-v3-format .ot-data-table td {
height: 26px;
padding: 5px 8px !important;
border-bottom: 1px solid var(--ot-v3-rule-soft) !important;
vertical-align: middle;
}
body.ot-v3-format tr:nth-child(even) td {
background: rgba(0, 47, 101, 0.018);
}
html[data-theme="dark"] body.ot-v3-format tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.035);
}
/* Workbench and chart estate */
body.ot-v3-format.ot-v3-workbench .ot-workbench-root {
background: var(--ot-v3-canvas) !important;
}
body.ot-v3-format.ot-v3-workbench .ot-workbench--mars,
body.ot-v3-format .ot-workbench--mars {
grid-template-columns: var(--ot-v3-side-w) minmax(0, 1fr) !important;
gap: var(--ot-v3-gap) !important;
padding: var(--ot-v3-gap) !important;
min-height: calc(100vh - var(--ot-v3-topbar-h)) !important;
}
body.ot-v3-format.ot-v3-workbench .ot-centre-panel,
body.ot-v3-format .ot-centre-panel {
min-width: 0 !important;
background: var(--ot-v3-surface) !important;
border: 1px solid var(--ot-v3-rule-soft) !important;
}
body.ot-v3-format.ot-v3-workbench .ot-context-band {
min-height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 7px 12px !important;
}
body.ot-v3-format.ot-v3-workbench .ot-context-band h1 {
font-family: "Helvetica Neue", Arial, sans-serif !important;
font-size: 16px !important;
}
body.ot-v3-format.ot-v3-workbench .ot-context-metrics {
display: flex !important;
gap: 6px !important;
}
body.ot-v3-format.ot-v3-workbench .ot-context-metric {
min-width: 96px !important;
padding: 6px 8px !important;
}
body.ot-v3-format .ot-tree-panel,
body.ot-v3-format .tree-panel,
body.ot-v3-format .sidebar {
background: var(--ot-v3-surface) !important;
border-right: 1px solid var(--ot-v3-rule-soft) !important;
}
body.ot-v3-format .ot-tree-panel {
padding: 8px !important;
}
body.ot-v3-format .ot-tree-node,
body.ot-v3-format .tree-node,
body.ot-v3-format .nav-item {
min-height: 23px !important;
padding: 3px 6px !important;
border-radius: 2px !important;
color: var(--ot-v3-ink-2) !important;
font-size: 11px !important;
}
body.ot-v3-format .ot-tree-node.is-selected,
body.ot-v3-format .ot-tree-node.active,
body.ot-v3-format .tree-node.active,
body.ot-v3-format .nav-item.active {
background: var(--ot-v3-teal-soft) !important;
border-left: 3px solid var(--ot-v3-teal) !important;
color: var(--ot-v3-navy) !important;
font-weight: 700 !important;
}
html[data-theme="dark"] body.ot-v3-format .ot-tree-node.is-selected,
html[data-theme="dark"] body.ot-v3-format .ot-tree-node.active,
html[data-theme="dark"] body.ot-v3-format .tree-node.active,
html[data-theme="dark"] body.ot-v3-format .nav-item.active {
color: var(--ot-v3-ink) !important;
}
body.ot-v3-format .ot-controls,
body.ot-v3-format .ot-toolbar,
body.ot-v3-format .filter-bar,
body.ot-v3-format .equipment-selector {
display: grid !important;
gap: 8px !important;
padding: 8px 10px !important;
background: var(--ot-v3-surface) !important;
border: 1px solid var(--ot-v3-rule-soft) !important;
}
body.ot-v3-format .ot-controls {
grid-template-columns: repeat(4, minmax(140px, 1fr)) auto !important;
align-items: end !important;
}
body.ot-v3-format .filter-grid,
body.ot-v3-format .ot-form-grid,
body.ot-v3-format .form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
}
body.ot-v3-format .ot-chart-stack,
body.ot-v3-format .charts-container {
display: grid !important;
gap: 8px !important;
}
body.ot-v3-format .ot-chart,
body.ot-v3-format .chart-card,
body.ot-v3-format .chart-placeholder,
body.ot-v3-format [class*="chart-panel"],
body.ot-v3-format [id^="chart-"] {
min-height: 310px;
background: var(--ot-v3-panel) !important;
border: 1px solid rgba(0, 168, 203, 0.55) !important;
color: #F2EFE9 !important;
}
body.ot-v3-format .ot-chart--short {
min-height: 220px;
}
body.ot-v3-format .ot-chart::before,
body.ot-v3-format .chart-placeholder::before {
color: rgba(242, 239, 233, 0.70) !important;
}
body.ot-v3-format .ot-empty,
body.ot-v3-format .empty-state,
body.ot-v3-format .no-data {
min-height: 90px;
display: grid;
place-items: center;
padding: 14px;
border: 1px dashed var(--ot-v3-rule);
background: var(--ot-v3-surface-alt);
color: var(--ot-v3-ink-4);
font-size: 12px;
}
body.ot-v3-format .ot-empty__label {
margin: 0;
color: var(--ot-v3-ink-3);
font-size: 12px;
}
/* Dashboard, gallery and card pages */
body.ot-v3-format.ot-v3-dashboard .ot-equipment-gallery,
body.ot-v3-format.ot-v3-dashboard .ot-plant-dashboard,
body.ot-v3-format.ot-v3-dashboard .ot-asset-dashboard,
body.ot-v3-format.ot-v3-dashboard .ot-diagnostic-graphs {
grid-template-columns: var(--ot-v3-side-w) minmax(0, 1fr) !important;
gap: var(--ot-v3-gap) !important;
padding: var(--ot-v3-gap) !important;
}
body.ot-v3-format .ot-gallery-panel,
body.ot-v3-format .ot-gallery-stack,
body.ot-v3-format .ot-maint__stack,
body.ot-v3-format .ot-benchmark__stack,
body.ot-v3-format .ot-reports__stack,
body.ot-v3-format .cards-container {
padding: 8px !important;
gap: 8px !important;
}
body.ot-v3-format .ot-gallery-grid,
body.ot-v3-format .card-grid,
body.ot-v3-format .summary-cards,
body.ot-v3-format .config-grid,
body.ot-v3-format .case-cards-container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 8px !important;
}
body.ot-v3-format .ot-gallery-card__image,
body.ot-v3-format .image-card-image {
width: 100% !important;
height: 150px !important;
object-fit: cover !important;
background: var(--ot-v3-surface-alt) !important;
}
body.ot-v3-format .ot-gallery-card__body,
body.ot-v3-format .image-card-content {
padding: 8px 10px !important;
}
body.ot-v3-format .ot-gallery-card__title,
body.ot-v3-format .image-card-title,
body.ot-v3-format .section-title,
body.ot-v3-format .case-card-title {
margin: 0 !important;
color: var(--ot-v3-navy) !important;
font-size: 13px !important;
line-height: 1.15 !important;
font-weight: 700 !important;
}
html[data-theme="dark"] body.ot-v3-format .ot-gallery-card__title,
html[data-theme="dark"] body.ot-v3-format .image-card-title,
html[data-theme="dark"] body.ot-v3-format .section-title,
html[data-theme="dark"] body.ot-v3-format .case-card-title {
color: var(--ot-v3-ink) !important;
}
/* Admin and audit pages */
body.ot-v3-format.ot-v3-admin .ot-page--admin,
body.ot-v3-format.ot-v3-audit .ot-page--admin {
padding: 8px 12px 14px !important;
}
body.ot-v3-format.ot-v3-admin .ot-card,
body.ot-v3-format.ot-v3-audit .ot-card {
margin-bottom: 8px !important;
}
body.ot-v3-format .ot-action-bar,
body.ot-v3-format .button-row,
body.ot-v3-format .ot-form-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
body.ot-v3-format .badge,
body.ot-v3-format .status-badge,
body.ot-v3-format .ot-status-pill,
body.ot-v3-format [class*="badge"] {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 3px 7px;
border: 1px solid var(--ot-v3-rule);
border-radius: 2px;
background: var(--ot-v3-surface-alt);
color: var(--ot-v3-navy);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
html[data-theme="dark"] body.ot-v3-format .badge,
html[data-theme="dark"] body.ot-v3-format .status-badge,
html[data-theme="dark"] body.ot-v3-format .ot-status-pill,
html[data-theme="dark"] body.ot-v3-format [class*="badge"] {
color: var(--ot-v3-ink);
}
/* Legacy pages that still carry theme.css */
body.ot-v3-format.ot-v3-legacy .main-container {
min-height: calc(100vh - var(--ot-v3-topbar-h));
background: var(--ot-v3-canvas) !important;
}
body.ot-v3-format.ot-v3-legacy .content {
padding: 0 !important;
}
body.ot-v3-format.ot-v3-legacy .cards-container {
padding: 8px !important;
}
body.ot-v3-format.ot-v3-legacy .page-header,
body.ot-v3-format.ot-v3-legacy .filter-bar,
body.ot-v3-format.ot-v3-legacy .case-card,
body.ot-v3-format.ot-v3-legacy .config-card,
body.ot-v3-format.ot-v3-legacy .summary-card {
margin-bottom: 8px !important;
}
body.ot-v3-format.ot-v3-legacy .case-detail-section {
display: grid;
grid-template-columns: 130px minmax(0, 1fr);
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--ot-v3-rule-soft);
}
body.ot-v3-format.ot-v3-legacy .mobile-menu-btn {
border-radius: 2px !important;
}
/* Character repair for literal escaped dashes seen in live text nodes. */
body.ot-v3-format .ot-text-cleanup-target {
white-space: normal;
}
@media (max-width: 1440px) {
:root {
--ot-v3-side-w: 232px;
}
body.ot-v3-format .ot-shell__topbar {
grid-template-columns: minmax(210px, auto) 1fr auto !important;
padding-inline: 12px !important;
}
body.ot-v3-format .ot-shell-title {
font-size: 13px !important;
}
body.ot-v3-format .ot-shell__nav a {
padding-inline: 8px !important;
}
}
@media (max-width: 980px) {
body.ot-v3-format .ot-shell__topbar {
grid-template-columns: 1fr !important;
align-items: stretch !important;
}
body.ot-v3-format .ot-shell__nav {
justify-content: flex-start !important;
}
body.ot-v3-format.ot-v3-workbench .ot-workbench--mars,
body.ot-v3-format .ot-workbench--mars,
body.ot-v3-format.ot-v3-dashboard .ot-equipment-gallery,
body.ot-v3-format.ot-v3-dashboard .ot-plant-dashboard,
body.ot-v3-format.ot-v3-dashboard .ot-asset-dashboard,
body.ot-v3-format.ot-v3-dashboard .ot-diagnostic-graphs {
grid-template-columns: 1fr !important;
}
body.ot-v3-format .ot-controls {
grid-template-columns: 1fr !important;
}
}
/* Dashboard content rebalance 2026-05-27 */
body.ot-v3-format .ot-rebalance-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr) minmax(240px, 0.8fr);
gap: 12px;
margin: 14px 0;
}
body.ot-v3-format .ot-rebalance-card,
body.ot-v3-format .ot-maint__activity-card,
body.ot-v3-format .ot-equipment-deployment-panel,
body.ot-v3-format .ot-hardware-coverage-card,
body.ot-v3-format .ot-workbench-watchlist,
body.ot-v3-format .plant-dashboard-rebalance-links,
body.ot-v3-format .rod-mill-deployment-strip {
background: var(--surface, #fff);
border: 1px solid var(--rule-c, #d8d3cc);
padding: 14px 16px;
}
body.ot-v3-format .ot-rebalance-card h2,
body.ot-v3-format .ot-maint__activity-card h2,
body.ot-v3-format .ot-equipment-deployment-panel h2,
body.ot-v3-format .ot-hardware-coverage-card h2,
body.ot-v3-format .ot-workbench-watchlist h2 {
margin: 0 0 8px;
font-size: 20px;
line-height: 1.15;
}
body.ot-v3-format .ot-rebalance-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 10px;
}
body.ot-v3-format .ot-rebalance-period {
color: var(--ink-secondary, #3a4252);
font-size: 12px;
text-align: right;
}
body.ot-v3-format .ot-sla-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
body.ot-v3-format .sla-item {
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
gap: 8px;
align-items: center;
border: 1px solid var(--rule-soft, #ebebeb);
padding: 8px;
min-height: 44px;
}
body.ot-v3-format .sla-rag {
width: 10px;
height: 10px;
border-radius: 50%;
}
body.ot-v3-format .sla-rag.green { background: #3aa655; }
body.ot-v3-format .sla-rag.amber { background: #c78a00; }
body.ot-v3-format .sla-rag.red { background: #d3332f; }
body.ot-v3-format .sla-param {
font-weight: 700;
color: var(--ink-primary, #0d1117);
}
body.ot-v3-format .sla-value {
color: var(--ink-secondary, #3a4252);
}
body.ot-v3-format .ot-maturity-links,
body.ot-v3-format .plant-dashboard-rebalance-links,
body.ot-v3-format .ot-hardware-coverage-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.ot-v3-format .ot-maturity-links a,
body.ot-v3-format .plant-dashboard-rebalance-links a,
body.ot-v3-format .ot-hardware-coverage-actions a,
body.ot-v3-format .ot-rebalance-link,
body.ot-v3-format .rod-mill-deployment-strip a {
color: var(--navy, #002f65);
border-bottom: 2px solid var(--accent, #00a8cb);
text-decoration: none;
font-weight: 700;
}
body.ot-v3-format .rod-mill-deployment-strip {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
align-items: center;
gap: 10px;
min-height: 76px;
}
body.ot-v3-format .rod-mill-deployment-strip div,
body.ot-v3-format .ot-equipment-deployment-grid div {
display: grid;
gap: 3px;
}
body.ot-v3-format .rod-mill-deployment-strip span,
body.ot-v3-format .ot-equipment-deployment-grid span {
color: var(--ink-secondary, #3a4252);
font-size: 12px;
}
body.ot-v3-format .ot-maint__activity-card,
body.ot-v3-format .ot-hardware-coverage-card,
body.ot-v3-format .ot-workbench-watchlist {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 12px 0;
}
body.ot-v3-format .ot-equipment-deployment-panel {
margin: 12px 0;
}
body.ot-v3-format .ot-equipment-deployment-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 10px 0;
}
body.ot-v3-format .ot-hardware-coverage-card dl {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 1fr));
gap: 10px;
margin: 0;
}
body.ot-v3-format .ot-hardware-coverage-card dt {
color: var(--ink-tertiary, #6b7280);
text-transform: uppercase;
letter-spacing: .12em;
font-size: 11px;
}
body.ot-v3-format .ot-hardware-coverage-card dd {
margin: 2px 0 0;
font-weight: 700;
color: var(--ink-primary, #0d1117);
}
body.ot-v3-format .ot-workbench-watchlist button {
min-height: 34px;
border: 1px solid var(--navy, #002f65);
background: var(--navy, #002f65);
color: #fff;
padding: 0 14px;
}
html[data-theme="dark"] body.ot-v3-format .ot-rebalance-card,
html[data-theme="dark"] body.ot-v3-format .ot-maint__activity-card,
html[data-theme="dark"] body.ot-v3-format .ot-equipment-deployment-panel,
html[data-theme="dark"] body.ot-v3-format .ot-hardware-coverage-card,
html[data-theme="dark"] body.ot-v3-format .ot-workbench-watchlist,
html[data-theme="dark"] body.ot-v3-format .plant-dashboard-rebalance-links,
html[data-theme="dark"] body.ot-v3-format .rod-mill-deployment-strip {
background: var(--surface-elevated, #092b55);
border-color: var(--rule-c, #35506f);
}
@media (max-width: 1100px) {
body.ot-v3-format .ot-rebalance-grid,
body.ot-v3-format .ot-sla-grid,
body.ot-v3-format .rod-mill-deployment-strip,
body.ot-v3-format .ot-equipment-deployment-grid,
body.ot-v3-format .ot-hardware-coverage-card dl {
grid-template-columns: 1fr;
}
body.ot-v3-format .ot-maint__activity-card,
body.ot-v3-format .ot-hardware-coverage-card,
body.ot-v3-format .ot-workbench-watchlist {
align-items: flex-start;
flex-direction: column;
}
}
/* =============================================================
* Workbench v3 chrome (Rev 2 extension, 2026-05-27)
* Scope: body.ot-v3-format.ot-v3-workbench only.
* Closes the eight aesthetic zones identified against the v3
* mockup that the AR3 chassis did not cover.
* ============================================================= */
/* Zone 1 - left tree panel chrome */
body.ot-v3-format.ot-v3-workbench .ot-tree-panel {
display: flex;
flex-direction: column;
background: var(--ot-v3-panel);
color: var(--ot-v3-ink);
border-right: 1px solid var(--ot-v3-rule);
min-width: 240px;
max-width: 320px;
overflow: hidden;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--ot-v3-panel-deep);
color: var(--ot-v3-ink);
border-bottom: 1px solid var(--ot-v3-rule);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-panel__header h2,
body.ot-v3-format.ot-v3-workbench .ot-tree-panel__header .ot-eyebrow {
margin: 0;
font-family: var(--ot-v3-sans, "Helvetica Neue", Arial, sans-serif);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ot-v3-ink);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-panel__chev {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
background: transparent;
color: var(--ot-v3-ink-3);
font-size: 14px;
cursor: pointer;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-panel__chev:hover {
color: var(--ot-v3-teal);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-search {
display: grid;
grid-template-columns: 1fr 30px;
gap: 4px;
padding: 6px 8px;
border-bottom: 1px solid var(--ot-v3-rule);
background: var(--ot-v3-panel);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-search input {
background: var(--ot-v3-surface-alt);
border: 1px solid var(--ot-v3-rule);
color: var(--ot-v3-ink);
padding: 4px 8px;
font-size: 11px;
border-radius: 2px;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-search input::placeholder {
color: var(--ot-v3-ink-4);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-search button {
background: transparent;
border: none;
color: var(--ot-v3-teal);
cursor: pointer;
font-size: 13px;
}
body.ot-v3-format.ot-v3-workbench .ot-tree {
flex: 1;
overflow-y: auto;
padding: 4px 0;
font-size: 10.5px;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node {
color: var(--ot-v3-ink);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node:hover {
background: var(--ot-v3-surface-alt);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node.is-selected {
background: var(--ot-v3-teal-soft);
border-left-color: var(--ot-v3-teal);
color: var(--ot-v3-ink);
}
html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-tree-node.is-selected {
background: var(--ot-v3-teal);
color: var(--ot-v3-panel-deep);
font-weight: 600;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__expander {
color: var(--ot-v3-ink-3);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__icon {
color: var(--ot-v3-teal);
}
/* Zone 2 - centre filter card */
body.ot-v3-format.ot-v3-workbench .ot-filter-card {
background: var(--ot-v3-surface);
border-bottom: 1px solid var(--ot-v3-rule-soft);
padding: 8px;
}
body.ot-v3-format.ot-v3-workbench .ot-filter-card .ot-radio-row,
body.ot-v3-format.ot-v3-workbench .ot-radio-row {
display: grid;
grid-template-columns: 14px 1fr;
gap: 8px;
align-items: center;
padding: 3px 4px;
border-radius: 2px;
cursor: pointer;
font-size: 11px;
color: var(--ot-v3-ink);
}
body.ot-v3-format.ot-v3-workbench .ot-radio-row:hover {
background: var(--ot-v3-surface-alt);
}
body.ot-v3-format.ot-v3-workbench .ot-radio-row.is-selected,
body.ot-v3-format.ot-v3-workbench .ot-radio-row[aria-checked="true"] {
background: var(--ot-v3-teal-soft);
color: var(--ot-v3-ink);
font-weight: 600;
}
body.ot-v3-format.ot-v3-workbench .ot-radio-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1.5px solid var(--ot-v3-ink-4);
display: inline-block;
position: relative;
}
body.ot-v3-format.ot-v3-workbench .ot-radio-row.is-selected .ot-radio-dot,
body.ot-v3-format.ot-v3-workbench .ot-radio-row[aria-checked="true"] .ot-radio-dot {
border-color: var(--ot-v3-teal);
}
body.ot-v3-format.ot-v3-workbench .ot-radio-row.is-selected .ot-radio-dot::after,
body.ot-v3-format.ot-v3-workbench .ot-radio-row[aria-checked="true"] .ot-radio-dot::after {
content: "";
position: absolute;
inset: 2px;
background: var(--ot-v3-teal);
border-radius: 50%;
}
/* Zone 3 - centre data table */
body.ot-v3-format.ot-v3-workbench .ot-data-table {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
background: var(--ot-v3-surface);
border-top: 1px solid var(--ot-v3-rule-soft);
}
body.ot-v3-format.ot-v3-workbench .ot-data-table__head {
display: grid;
grid-template-columns: 1fr 80px;
gap: 8px;
padding: 6px 12px;
background: var(--ot-v3-surface-alt);
border-bottom: 1px solid var(--ot-v3-rule);
font-family: var(--ot-v3-sans, "Helvetica Neue", Arial, sans-serif);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ot-v3-ink-3);
}
body.ot-v3-format.ot-v3-workbench .ot-data-table__body {
flex: 1;
overflow-y: auto;
font-size: 11px;
color: var(--ot-v3-ink);
}
body.ot-v3-format.ot-v3-workbench .ot-data-table__row {
display: grid;
grid-template-columns: 1fr 80px;
gap: 8px;
padding: 4px 12px;
border-bottom: 1px solid var(--ot-v3-rule-soft);
cursor: pointer;
}
body.ot-v3-format.ot-v3-workbench .ot-data-table__row:nth-child(even) {
background: var(--ot-v3-surface-alt);
}
body.ot-v3-format.ot-v3-workbench .ot-data-table__row:hover {
background: var(--ot-v3-teal-soft);
}
body.ot-v3-format.ot-v3-workbench .ot-data-table__row.is-selected,
body.ot-v3-format.ot-v3-workbench .ot-data-table__row[aria-selected="true"] {
background: var(--ot-v3-teal-soft);
font-weight: 600;
}
html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-data-table__row.is-selected,
html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-data-table__row[aria-selected="true"] {
background: var(--ot-v3-teal);
color: var(--ot-v3-panel-deep);
}
body.ot-v3-format.ot-v3-workbench .ot-data-table__pager {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px;
background: var(--ot-v3-surface-alt);
border-top: 1px solid var(--ot-v3-rule);
font-size: 10.5px;
color: var(--ot-v3-ink-3);
}
/* Zone 4 - right chart panels */
body.ot-v3-format.ot-v3-workbench .ot-chart-panel {
background: var(--ot-v3-panel);
color: var(--ot-v3-ink);
border-radius: 2px;
padding: 0;
margin-bottom: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
body.ot-v3-format.ot-v3-workbench .ot-chart-panel:last-child {
margin-bottom: 0;
}
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--ot-v3-panel-deep);
border-bottom: 1px solid var(--ot-v3-rule);
font-size: 12px;
font-weight: 700;
color: var(--ot-v3-ink);
}
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__collapse {
background: transparent;
border: none;
color: var(--ot-v3-ink-3);
font-size: 13px;
cursor: pointer;
}
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__body {
position: relative;
flex: 1;
min-height: 160px;
padding: 0;
}
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__axis {
position: absolute;
top: 6px;
left: 10px;
font-size: 10px;
font-weight: 600;
color: var(--ot-v3-ink-3);
text-transform: uppercase;
letter-spacing: 0.08em;
pointer-events: none;
z-index: 2;
}
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__axis--y {
top: 6px;
left: 10px;
}
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__axis--note {
top: 6px;
right: 10px;
left: auto;
color: var(--ot-v3-ink-4);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
/* Zone 5 - tabs strip (Mars-style) */
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
background: var(--ot-v3-surface);
border-bottom: 1px solid var(--ot-v3-rule);
padding: 4px 6px;
gap: 4px;
}
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__chev {
width: 22px;
height: 26px;
border: none;
background: transparent;
color: var(--ot-v3-ink-3);
font-size: 13px;
cursor: pointer;
}
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__chev:hover {
color: var(--ot-v3-teal);
}
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller {
display: flex;
flex-direction: row;
gap: 4px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
}
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller::-webkit-scrollbar {
display: none;
}
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > a,
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > button {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
color: var(--ot-v3-ink-3);
border: 1px solid transparent;
background: transparent;
border-radius: 2px;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
}
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > a:hover,
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > button:hover {
background: var(--ot-v3-surface-alt);
color: var(--ot-v3-ink);
}
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > a.is-active,
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > button.is-active,
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > a[aria-current="page"],
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > button[aria-pressed="true"] {
background: var(--ot-v3-teal);
color: var(--ot-v3-panel-deep);
font-weight: 700;
}
/* Zone 6 - group label */
body.ot-v3-format.ot-v3-workbench .ot-group-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ot-v3-teal);
background: var(--ot-v3-teal-soft);
border-radius: 2px;
}
body.ot-v3-format.ot-v3-workbench .ot-group-pill--active {
color: var(--ot-v3-panel-deep);
background: var(--ot-v3-teal);
}
/* Zone 7 - advanced tools strip */
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced,
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: center;
padding: 6px 12px;
background: var(--ot-v3-surface);
border-bottom: 1px solid var(--ot-v3-rule-soft);
font-size: 11px;
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced .ot-eyebrow,
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced .section-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ot-v3-teal);
margin: 0;
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced > .ot-toolbar__controls,
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced > .ot-controls {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced label {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ot-v3-ink-3);
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced input[type="text"],
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced input[type="number"] {
width: 72px;
padding: 2px 6px;
font-size: 11px;
background: var(--ot-v3-surface);
border: 1px solid var(--ot-v3-rule);
color: var(--ot-v3-ink);
}
/* Zone 8 - footer strapline */
body.ot-v3-format.ot-v3-workbench .ot-footer .ot-footer__strapline,
body.ot-v3-format.ot-v3-workbench .ot-footer__strapline {
font-family: var(--ot-v3-serif, Georgia, "Times New Roman", serif);
font-size: 12px;
font-style: italic;
color: var(--ot-v3-ink-3);
}
/* Three-column workbench root */
body.ot-v3-format.ot-v3-workbench .ot-workbench,
body.ot-v3-format.ot-v3-workbench .ot-workbench-root {
display: grid;
grid-template-columns: 260px minmax(280px, 1fr) minmax(360px, 1.6fr);
gap: 0;
height: 100%;
}
body.ot-v3-format.ot-v3-workbench .ot-centre-left {
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid var(--ot-v3-rule);
}
body.ot-v3-format.ot-v3-workbench .ot-centre-right {
display: flex;
flex-direction: column;
padding: 8px;
gap: 8px;
background: var(--ot-v3-canvas);
overflow-y: auto;
}
/* Responsive collapse to single column when narrow */
@media (max-width: 1100px) {
body.ot-v3-format.ot-v3-workbench .ot-workbench,
body.ot-v3-format.ot-v3-workbench .ot-workbench-root {
grid-template-columns: 1fr !important;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-panel {
max-width: none;
}
}
/* =============================================================
* Tree-node expander + icon drawn from CSS only (Rev 2 polish)
* No font glyph dependency. Pure border + background shapes.
* Scope: body.ot-v3-format.ot-v3-workbench
* ============================================================= */
body.ot-v3-format.ot-v3-workbench .ot-tree-node__expander {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ot-v3-ink-3);
user-select: none;
position: relative;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__expander::before {
content: "";
display: inline-block;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__expander--collapsed::before {
width: 0;
height: 0;
border-left: 4px solid currentColor;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__expander--expanded::before {
width: 0;
height: 0;
border-top: 4px solid currentColor;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__expander--leaf::before {
width: 4px;
height: 4px;
background: var(--ot-v3-ink-4);
border-radius: 50%;
opacity: 0.45;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__icon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
color: var(--ot-v3-teal);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__icon::before {
content: "";
display: inline-block;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__icon--company::before {
width: 9px;
height: 9px;
background: currentColor;
border-radius: 1px;
box-shadow: inset 0 0 0 1.5px var(--ot-v3-surface);
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__icon--area::before {
width: 9px;
height: 9px;
border: 1.5px solid currentColor;
border-radius: 1px;
background: transparent;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__icon--device::before {
width: 9px;
height: 9px;
background: currentColor;
border-radius: 50%;
opacity: 0.85;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node__icon--axis::before {
width: 5px;
height: 5px;
background: currentColor;
border-radius: 50%;
}
html[data-theme="dark"] body.ot-v3-format.ot-v3-workbench .ot-tree-node__icon--company::before {
box-shadow: inset 0 0 0 1.5px var(--ot-v3-panel);
}
/* =============================================================
* Rev 3: pure-CSS glyphs for button controls in the workbench
* Replaces ‹ › − 🔍 entity content.
* Scope: body.ot-v3-format.ot-v3-workbench
* ============================================================= */
body.ot-v3-format.ot-v3-workbench .ot-tree-panel__chev,
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__chev,
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__collapse,
body.ot-v3-format.ot-v3-workbench .ot-tree-search button {
position: relative;
font-size: 0;
line-height: 0;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-panel__chev::before,
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__chev::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-right: 5px solid currentColor;
}
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__chev--right::before,
body.ot-v3-format.ot-v3-workbench .ot-tree-panel__chev--expanded::before {
border-right: none;
border-left: 5px solid currentColor;
}
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__collapse::before {
content: "";
display: inline-block;
width: 9px;
height: 1.5px;
background: currentColor;
border-radius: 1px;
vertical-align: middle;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-search button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border: 1.5px solid currentColor;
border-radius: 50%;
transform: translate(-65%, -65%);
box-sizing: border-box;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-search button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 1.5px;
background: currentColor;
transform: translate(10%, 35%) rotate(45deg);
border-radius: 1px;
transform-origin: 0 50%;
}
body.ot-v3-format.ot-v3-workbench .ot-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* =============================================================
* Rev 4.2 defensive depth indentation
* External !important rule was eating the inline padding-left set
* by the renderer. Re-applying per data-level with !important so
* the cascade wins regardless of source-order or other CSS files.
* Scope: body.ot-v3-format.ot-v3-workbench
* ============================================================= */
body.ot-v3-format.ot-v3-workbench .ot-tree-node {
display: grid !important;
grid-template-columns: 14px 14px 1fr !important;
gap: 4px !important;
align-items: center !important;
min-height: 22px !important;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="1"] { padding-left: 8px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="2"] { padding-left: 22px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="3"] { padding-left: 36px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="4"] { padding-left: 50px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="5"] { padding-left: 64px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="6"] { padding-left: 78px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="7"] { padding-left: 92px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="8"] { padding-left: 106px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-node__label {
text-align: left !important;
justify-self: start !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
min-width: 0 !important;
}
/* =============================================================
* Rev 4.3 compact workbench density (2026-05-27)
* Director feedback: excessive white space - tighten all paddings,
* margins, font sizes and min-heights across the workbench surface.
* Scope: body.ot-v3-format.ot-v3-workbench
* ============================================================= */
body.ot-v3-format.ot-v3-workbench .ot-page,
body.ot-v3-format.ot-v3-workbench .ot-page--admin { padding: 6px 8px !important; }
body.ot-v3-format.ot-v3-workbench .ot-page__header { padding: 6px 10px !important; margin-bottom: 6px !important; }
body.ot-v3-format.ot-v3-workbench .ot-page__header h1 { font-size: 18px !important; margin: 2px 0 !important; line-height: 1.15 !important; }
body.ot-v3-format.ot-v3-workbench .ot-page__header p { font-size: 11px !important; margin: 2px 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-page__header__meta { font-size: 10px !important; margin: 2px 0 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-card,
body.ot-v3-format.ot-v3-workbench .ot-card--form { margin-bottom: 6px !important; }
body.ot-v3-format.ot-v3-workbench .ot-card__header,
body.ot-v3-format.ot-v3-workbench .ot-card__header--with-action { padding: 6px 10px !important; }
body.ot-v3-format.ot-v3-workbench .ot-card__body { padding: 6px 10px !important; }
body.ot-v3-format.ot-v3-workbench .ot-card__title { font-size: 14px !important; margin: 0 !important; line-height: 1.2 !important; }
body.ot-v3-format.ot-v3-workbench .ot-card__subtitle { font-size: 11px !important; margin: 1px 0 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-eyebrow { font-size: 9px !important; letter-spacing: 0.12em !important; margin: 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-rebalance-grid { margin: 6px 0 !important; gap: 6px !important; }
body.ot-v3-format.ot-v3-workbench .ot-rebalance-card,
body.ot-v3-format.ot-v3-workbench .ot-maint__activity-card,
body.ot-v3-format.ot-v3-workbench .ot-equipment-deployment-panel,
body.ot-v3-format.ot-v3-workbench .ot-hardware-coverage-card,
body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist,
body.ot-v3-format.ot-v3-workbench .plant-dashboard-rebalance-links,
body.ot-v3-format.ot-v3-workbench .rod-mill-deployment-strip { padding: 6px 10px !important; margin: 4px 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-rebalance-card h2,
body.ot-v3-format.ot-v3-workbench .ot-maint__activity-card h2,
body.ot-v3-format.ot-v3-workbench .ot-equipment-deployment-panel h2,
body.ot-v3-format.ot-v3-workbench .ot-hardware-coverage-card h2,
body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist h2 { font-size: 14px !important; margin: 0 0 4px !important; line-height: 1.15 !important; }
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars { padding: 2px 4px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > a,
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > button { padding: 3px 8px !important; font-size: 11px !important; min-height: 24px !important; }
body.ot-v3-format.ot-v3-workbench .ot-filter-card { padding: 4px 6px !important; }
body.ot-v3-format.ot-v3-workbench .ot-radio-row { padding: 2px 4px !important; font-size: 11px !important; }
body.ot-v3-format.ot-v3-workbench .ot-data-table__head { padding: 4px 10px !important; }
body.ot-v3-format.ot-v3-workbench .ot-data-table__row { padding: 3px 10px !important; }
body.ot-v3-format.ot-v3-workbench .ot-data-table__pager { padding: 3px 8px !important; }
body.ot-v3-format.ot-v3-workbench .ot-toolbar,
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced,
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced { padding: 4px 10px !important; gap: 8px !important; }
body.ot-v3-format.ot-v3-workbench .ot-chart-panel { margin-bottom: 4px !important; }
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__head { padding: 4px 10px !important; font-size: 11px !important; }
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__body { min-height: 120px !important; }
body.ot-v3-format.ot-v3-workbench .ot-centre-right { padding: 4px !important; gap: 4px !important; }
body.ot-v3-format.ot-v3-workbench .ot-centre-left { gap: 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-node { min-height: 18px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-panel__header { padding: 4px 8px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-search { padding: 3px 6px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tree-search input { min-height: 24px !important; font-size: 11px !important; }
body.ot-v3-format.ot-v3-workbench .ot-form-grid { gap: 6px !important; }
body.ot-v3-format.ot-v3-workbench .ot-form-row { gap: 2px !important; }
body.ot-v3-format.ot-v3-workbench .ot-form-actions { gap: 6px !important; }
body.ot-v3-format.ot-v3-workbench .ot-kpi-grid { gap: 6px !important; margin: 6px 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-kpi-card { padding: 6px 10px !important; }
body.ot-v3-format.ot-v3-workbench .ot-kpi-card__label { font-size: 10px !important; }
body.ot-v3-format.ot-v3-workbench .ot-kpi-card__value { font-size: 20px !important; line-height: 1.1 !important; margin: 2px 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-kpi-card__detail { font-size: 10px !important; }
/* =============================================================
* Rev 4.4 collapse vertical bands + use horizontal space (2026-05-27)
* Director highlighted four wide empty bands. Strategy: flex-rows
* with align: center and tight padding so each section is a thin
* strip rather than a tall card.
* ============================================================= */
/* Zone 1: page header band - title left, stats right, single thin row */
body.ot-v3-format.ot-v3-workbench .ot-page,
body.ot-v3-format.ot-v3-workbench .ot-page--admin { padding: 2px 8px !important; }
body.ot-v3-format.ot-v3-workbench .ot-page__header {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 4px 10px !important;
margin: 0 0 4px !important;
}
body.ot-v3-format.ot-v3-workbench .ot-page__header > * { margin: 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-page__header h1 { font-size: 16px !important; line-height: 1.1 !important; }
body.ot-v3-format.ot-v3-workbench .ot-page__header p,
body.ot-v3-format.ot-v3-workbench .ot-page__header__meta { font-size: 10px !important; }
body.ot-v3-format.ot-v3-workbench .ot-page__header .ot-eyebrow { font-size: 9px !important; }
/* Zone 2: watch list - single flex row, eyebrow + heading + message + button */
body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist,
body.ot-v3-format.ot-v3-workbench .ot-card.ot-workbench-watchlist {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
padding: 4px 10px !important;
margin: 2px 0 !important;
min-height: 0 !important;
}
body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist > * { margin: 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist h2 { font-size: 13px !important; line-height: 1.1 !important; }
body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist p { font-size: 11px !important; }
body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist .ot-btn,
body.ot-v3-format.ot-v3-workbench .ot-workbench-watchlist button { margin-left: auto !important; min-height: 26px !important; padding: 2px 12px !important; font-size: 11px !important; }
/* Zone 3: filter / date-picker / dropdown row - tight single line */
body.ot-v3-format.ot-v3-workbench .ot-card--filter,
body.ot-v3-format.ot-v3-workbench .ot-filter-card { padding: 3px 6px !important; margin: 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-controls,
body.ot-v3-format.ot-v3-workbench .ot-form-actions { gap: 6px !important; }
body.ot-v3-format.ot-v3-workbench input[type="date"],
body.ot-v3-format.ot-v3-workbench input[type="datetime-local"],
body.ot-v3-format.ot-v3-workbench select,
body.ot-v3-format.ot-v3-workbench input[type="text"],
body.ot-v3-format.ot-v3-workbench input[type="number"] { min-height: 26px !important; padding: 2px 6px !important; font-size: 11px !important; }
body.ot-v3-format.ot-v3-workbench .ot-btn { min-height: 26px !important; padding: 2px 12px !important; font-size: 11px !important; }
/* Zone 4: advanced tools row + chart panel - flush vertically */
body.ot-v3-format.ot-v3-workbench .ot-toolbar,
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced,
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced {
padding: 3px 10px !important;
margin: 0 !important;
gap: 12px !important;
min-height: 28px !important;
}
/* Cards sit flush */
body.ot-v3-format.ot-v3-workbench .ot-card,
body.ot-v3-format.ot-v3-workbench .ot-card--form { margin-bottom: 2px !important; }
body.ot-v3-format.ot-v3-workbench .ot-card + .ot-card,
body.ot-v3-format.ot-v3-workbench .ot-card--form + .ot-card,
body.ot-v3-format.ot-v3-workbench .ot-card + .ot-card--form { margin-top: 0 !important; }
/* Card headers thinner */
body.ot-v3-format.ot-v3-workbench .ot-card__header,
body.ot-v3-format.ot-v3-workbench .ot-card__header--with-action { padding: 4px 10px !important; min-height: 0 !important; }
body.ot-v3-format.ot-v3-workbench .ot-card__body { padding: 4px 10px !important; }
/* Centre-right column flush stack */
body.ot-v3-format.ot-v3-workbench .ot-centre-right { padding: 2px !important; gap: 2px !important; }
body.ot-v3-format.ot-v3-workbench .ot-centre-right > * + * { margin-top: 0 !important; }
/* Chart panel flush above and below */
body.ot-v3-format.ot-v3-workbench .ot-chart-panel { margin: 0 0 2px !important; }
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__head { padding: 3px 10px !important; min-height: 26px !important; }
/* Tabs strip taller-less */
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars { padding: 1px 4px !important; min-height: 28px !important; }
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > a,
body.ot-v3-format.ot-v3-workbench .ot-tabs--mars__scroller > button { padding: 2px 8px !important; min-height: 22px !important; }
/* =============================================================
* Rev 4.5 fold Enveloping subhead + compact advanced-tools (2026-05-27)
* Zone A: chart-panel mode label "Enveloping" duplicates the active tab.
* Compact it to a thin eyebrow strip; the active tab pill above carries the label.
* Zone B: SIDEBAND / BANDWIDTH / MULTIFREQUENCY / COUNT / Y CORDON / Add / Clear
* all collapse to a single row matching the date row height (26 px).
* ============================================================= */
/* Zone A - chart-panel head as thin eyebrow strip */
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__head {
min-height: 0 !important;
padding: 1px 10px !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--ot-v3-ink-3) !important;
background: var(--ot-v3-surface-alt) !important;
border-bottom: 1px solid var(--ot-v3-rule-soft) !important;
}
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__head h2,
body.ot-v3-format.ot-v3-workbench .ot-chart-panel__head h3 {
font-size: 10px !important;
font-weight: 600 !important;
margin: 0 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
/* Zone B - advanced tools single row */
body.ot-v3-format.ot-v3-workbench .ot-toolbar,
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced,
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
padding: 3px 10px !important;
min-height: 32px !important;
max-height: none !important;
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced > *,
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced > *,
body.ot-v3-format.ot-v3-workbench .ot-toolbar > * {
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced label,
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced label,
body.ot-v3-format.ot-v3-workbench .ot-toolbar label {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
margin: 0 !important;
font-size: 11px !important;
white-space: nowrap !important;
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced .ot-eyebrow,
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced .ot-eyebrow,
body.ot-v3-format.ot-v3-workbench .ot-toolbar .ot-eyebrow {
font-size: 10px !important;
letter-spacing: 0.12em !important;
margin: 0 !important;
white-space: nowrap !important;
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced input[type="number"],
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced input[type="text"],
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced input[type="number"],
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced input[type="text"],
body.ot-v3-format.ot-v3-workbench .ot-toolbar input[type="number"],
body.ot-v3-format.ot-v3-workbench .ot-toolbar input[type="text"] {
min-height: 26px !important;
max-height: 26px !important;
width: 56px !important;
padding: 2px 6px !important;
font-size: 11px !important;
box-sizing: border-box !important;
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced input[type="checkbox"],
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced input[type="checkbox"],
body.ot-v3-format.ot-v3-workbench .ot-toolbar input[type="checkbox"] {
margin: 0 !important;
width: 13px !important;
height: 13px !important;
flex: 0 0 auto !important;
}
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced .ot-btn,
body.ot-v3-format.ot-v3-workbench .ot-toolbar--advanced button,
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced .ot-btn,
body.ot-v3-format.ot-v3-workbench .ot-toolbar.ot-toolbar--advanced button,
body.ot-v3-format.ot-v3-workbench .ot-toolbar .ot-btn,
body.ot-v3-format.ot-v3-workbench .ot-toolbar button {
min-height: 26px !important;
max-height: 26px !important;
padding: 2px 12px !important;
font-size: 11px !important;
box-sizing: border-box !important;
}
/* Shared navigation and hierarchy cleanup 2026-05-27 */
body.ot-v3-format .ot-shell__nav a {
text-transform: none;
white-space: nowrap;
}
body.ot-v3-format .ot-shell__nav a[aria-current="page"],
body.ot-v3-format .ot-shell__nav a.is-active {
background: var(--accent, #00A8CB);
color: var(--ink-on-accent, #001E44);
}
body.ot-v3-format .ot-tabs [aria-selected="true"],
body.ot-v3-format .ot-tabs .is-active,
body.ot-v3-format .ot-tab.is-active,
body.ot-v3-format .tabs .active,
body.ot-v3-format .tab.active,
body.ot-v3-format button[aria-selected="true"],
body.ot-v3-format a[aria-current="page"] {
color: var(--ink-on-accent, #FFFFFF);
}
body.ot-v3-format .ot-tabs [aria-selected="true"],
body.ot-v3-format .ot-tabs .is-active,
body.ot-v3-format .ot-tab.is-active,
body.ot-v3-format .tabs .active,
body.ot-v3-format .tab.active {
background: var(--navy, #002F65);
border-bottom: 3px solid var(--accent, #00A8CB);
}
body.ot-v3-format .ot-page-title,
body.ot-v3-format .ot-page-title h1,
body.ot-v3-format h1,
body.ot-v3-format h2 {
color: var(--navy, #002F65);
}
body.ot-v3-format .ot-shell__topbar h1,
body.ot-v3-format .ot-shell__topbar h2,
body.ot-v3-format .ot-shell__topbar .ot-shell-title {
color: #FFFFFF;
}
body.ot-v3-format .ot-table-wrap,
body.ot-v3-format .table-wrap,
body.ot-v3-format .ot-data-table-wrap,
body.ot-v3-format .maintenance-table,
body.ot-v3-format .work-order-table,
body.ot-v3-format [data-table-wrap] {
max-width: 100%;
overflow-x: auto;
}
body.ot-v3-format table {
max-width: 100%;
}
body.ot-v3-format .ot-maintenance-shell,
body.ot-v3-format .ot-maintenance-history,
body.ot-v3-format .ot-history-layout {
min-width: 0;
overflow-x: auto;
}
body.ot-v3-format [id*="envelop"],
body.ot-v3-format [data-tab*="envelop"],
body.ot-v3-format [data-screen*="envelop"],
body.ot-v3-format .ot-chart-panel,
body.ot-v3-format .chart-panel {
min-width: 0;
}
body.ot-v3-format [id*="envelop"] canvas,
body.ot-v3-format [data-tab*="envelop"] canvas,
body.ot-v3-format [data-screen*="envelop"] canvas,
body.ot-v3-format .ot-chart-panel canvas,
body.ot-v3-format .chart-panel canvas {
max-width: 100%;
}
body.ot-v3-format .ot-shared-hierarchy {
flex: 0 0 var(--ot-shared-hierarchy-width, 300px);
max-width: 520px;
min-width: 220px;
position: relative;
}
body.ot-v3-format .ot-shared-hierarchy__header {
display: grid;
gap: 8px;
margin-bottom: 10px;
}
body.ot-v3-format .ot-shared-hierarchy__eyebrow {
color: var(--accent, #00A8CB);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body.ot-v3-format .ot-shared-hierarchy__search {
border: 1px solid var(--rule-c, #D8D3CC);
display: block;
padding: 8px 10px;
}
body.ot-v3-format .ot-shared-hierarchy__search input {
border: 0;
font-size: 13px;
outline: 0;
width: 100%;
}
body.ot-v3-format .ot-shared-hierarchy__status,
body.ot-v3-format .ot-shared-hierarchy__hidden {
color: var(--ink-tertiary, #6B7280);
font-size: 11px;
margin: 8px 0;
}
body.ot-v3-format .ot-shared-hierarchy__tree {
display: grid;
gap: 2px;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node,
body.ot-v3-format .ot-shared-hierarchy__tree button {
align-items: center;
background: transparent;
border: 0;
color: var(--ink-primary, #0D1117);
cursor: pointer;
display: flex;
font: inherit;
gap: 6px;
min-height: 24px;
padding: 4px 6px;
text-align: left;
width: 100%;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node:hover,
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node.is-active,
body.ot-v3-format .ot-shared-hierarchy__tree button:hover,
body.ot-v3-format .ot-shared-hierarchy__tree button.is-active {
background: var(--accent-soft, #E0F6FB);
color: var(--navy, #002F65);
}
body.ot-v3-format .ot-shared-hierarchy__tree [data-level="0"] { padding-left: 6px; font-weight: 700; }
body.ot-v3-format .ot-shared-hierarchy__tree [data-level="1"] { padding-left: 18px; }
body.ot-v3-format .ot-shared-hierarchy__tree [data-level="2"] { padding-left: 30px; }
body.ot-v3-format .ot-shared-hierarchy__tree [data-level="3"] { padding-left: 42px; }
body.ot-v3-format .ot-shared-hierarchy__tree [data-level="4"] { padding-left: 54px; }
body.ot-v3-format .ot-shared-hierarchy__tree [data-level="5"] { padding-left: 66px; }
body.ot-v3-format .ot-shared-hierarchy__tree [data-level="6"] { padding-left: 78px; }
body.ot-v3-format .ot-shared-hierarchy__resize {
bottom: 0;
cursor: col-resize;
position: absolute;
right: -4px;
top: 0;
width: 8px;
}
body.ot-v3-format .ot-gallery-rm2-card {
border: 1px solid var(--rule-c, #D8D3CC);
display: grid;
gap: 6px;
margin: 10px 0;
padding: 12px 14px;
}
body.ot-v3-format .ot-gallery-rm2-card strong {
color: var(--navy, #002F65);
font-size: 16px;
}
body.ot-v3-format .ot-sr-only {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
@media (max-width: 1180px) {
body.ot-v3-format .ot-shell__nav {
overflow-x: auto;
}
}
/* Topbar notification bell restore 2026-05-28 */
body.ot-v3-format .ot-shell__topbar .ot-notif-bell {
background: transparent;
border: 0;
color: var(--ink-on-accent, #FFFFFF);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 8px;
position: relative;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-bell:hover,
body.ot-v3-format .ot-shell__topbar .ot-notif-bell:focus-visible {
background: rgba(255, 255, 255, 0.08);
outline: 0;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-bell__icon {
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 18px;
width: 18px;
}
body.ot-v3-format[data-theme="light"] .ot-shell__topbar .ot-notif-bell__icon {
background-image: url("data:image/svg+xml;utf8,");
}
body.ot-v3-format .ot-shell__topbar .ot-notif-badge {
background: var(--accent, #00A8CB);
border-radius: 8px;
color: var(--ink-on-accent, #001E44);
display: none;
font-size: 10px;
font-weight: 700;
height: 16px;
line-height: 16px;
min-width: 16px;
padding: 0 4px;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-badge:not([hidden]):not(:empty) {
display: inline-block;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-badge[hidden] {
display: none;
}
/* Topbar notification bell size and badge surface hotfix 2026-05-28 */
body.ot-v3-format .ot-shell__topbar .ot-notif-bell {
min-height: 32px;
min-width: 32px;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-bell__icon {
height: 22px;
width: 22px;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-badge:not(:empty) {
display: inline-block !important;
}
/* Topbar notification bell visibility closeout 2026-05-29 */
body.ot-v3-format .ot-shell__topbar .ot-notif-bell {
align-items: center !important;
background: rgba(255, 255, 255, 0.14) !important;
border: 1px solid rgba(255, 255, 255, 0.62) !important;
border-radius: 2px !important;
color: #FFFFFF !important;
cursor: pointer !important;
display: inline-flex !important;
height: 32px !important;
justify-content: center !important;
min-height: 32px !important;
min-width: 32px !important;
opacity: 1 !important;
padding: 4px !important;
position: relative !important;
visibility: visible !important;
width: 32px !important;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-bell:hover,
body.ot-v3-format .ot-shell__topbar .ot-notif-bell:focus-visible {
background: rgba(255, 255, 255, 0.22) !important;
outline: 2px solid rgba(0, 168, 203, 0.85) !important;
outline-offset: 2px !important;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-bell__icon {
background-image: url("data:image/svg+xml;utf8,") !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 22px 22px !important;
display: block !important;
height: 22px !important;
opacity: 1 !important;
visibility: visible !important;
width: 22px !important;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-badge {
align-items: center !important;
background: #00A8CB !important;
border: 1px solid #FFFFFF !important;
border-radius: 999px !important;
color: #001E44 !important;
display: inline-flex !important;
font-size: 10px !important;
font-weight: 700 !important;
height: 16px !important;
justify-content: center !important;
line-height: 16px !important;
min-width: 16px !important;
padding: 0 3px !important;
position: absolute !important;
right: -5px !important;
top: -5px !important;
visibility: visible !important;
z-index: 2 !important;
}
body.ot-v3-format .ot-shell__topbar .ot-notif-badge[hidden] {
display: none !important;
}
/* HIERARCHY-UNIFY-20260528-BEGIN */
body.ot-v3-format {
--ot-shared-hierarchy-width: clamp(260px, 18vw, 340px);
}
body.ot-v3-format.ot-v3-admin .ot-page--admin {
max-width: none !important;
margin: 0 !important;
padding: 8px 16px 14px !important;
}
body.ot-v3-format .ot-shared-page-layout {
display: grid !important;
grid-template-columns: var(--ot-shared-hierarchy-width, 300px) minmax(0, 1fr) !important;
gap: 0 !important;
align-items: stretch !important;
min-height: calc(100vh - 54px) !important;
}
body.ot-v3-format .ot-shared-page-layout__rail,
body.ot-v3-format .ot-asset-dashboard__tree {
background: var(--ot-v3-surface, #FFFFFF) !important;
border-right: 1px solid var(--ot-v3-rule-soft, #EBEBEB) !important;
box-sizing: border-box !important;
min-width: 240px !important;
max-width: 420px !important;
overflow-y: auto !important;
padding: 12px 10px !important;
}
body.ot-v3-format .ot-shared-page-layout__content {
box-sizing: border-box !important;
min-width: 0 !important;
overflow-x: auto !important;
padding: 12px 16px 0 !important;
}
body.ot-v3-format .ot-hierarchy-layout {
align-items: start !important;
display: grid !important;
gap: 14px !important;
grid-template-columns: minmax(280px, var(--ot-shared-hierarchy-width, 320px)) minmax(0, 1fr) !important;
}
body.ot-v3-format .ot-hierarchy-tree-column .ot-shared-hierarchy,
body.ot-v3-format .ot-shared-page-layout__rail .ot-shared-hierarchy,
body.ot-v3-format .ot-asset-dashboard__tree.ot-shared-hierarchy {
box-sizing: border-box !important;
max-width: none !important;
min-width: 0 !important;
width: 100% !important;
}
body.ot-v3-format .ot-hierarchy-tree-column .ot-shared-hierarchy {
border: 1px solid var(--ot-v3-rule-soft, #EBEBEB) !important;
min-height: 520px !important;
padding: 12px !important;
}
body.ot-v3-format .ot-shared-hierarchy__header {
gap: 8px !important;
margin-bottom: 10px !important;
}
body.ot-v3-format .ot-shared-hierarchy__search {
background: var(--ot-v3-surface, #FFFFFF) !important;
border: 1px solid var(--ot-v3-rule, #D8D3CC) !important;
display: block !important;
padding: 8px 10px !important;
}
body.ot-v3-format .ot-shared-hierarchy__status,
body.ot-v3-format .ot-shared-hierarchy__hidden {
color: var(--ot-v3-ink-4, #6B7280) !important;
font-size: 11px !important;
line-height: 1.3 !important;
margin: 8px 0 !important;
}
body.ot-v3-format .ot-shared-hierarchy__tree,
body.ot-v3-format.ot-v3-workbench .ot-tree {
align-content: start !important;
display: grid !important;
gap: 2px !important;
min-height: 0 !important;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node,
body.ot-v3-format.ot-v3-workbench .ot-tree-node {
align-items: center !important;
display: grid !important;
grid-template-columns: 14px 14px minmax(0, 1fr) !important;
gap: 4px !important;
min-height: 22px !important;
padding-bottom: 1px !important;
padding-top: 1px !important;
white-space: nowrap !important;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node[data-level="1"],
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="1"] { padding-left: 8px !important; }
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node[data-level="2"],
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="2"] { padding-left: 22px !important; }
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node[data-level="3"],
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="3"] { padding-left: 36px !important; }
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node[data-level="4"],
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="4"] { padding-left: 50px !important; }
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node[data-level="5"],
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="5"] { padding-left: 64px !important; }
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node[data-level="6"],
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="6"] { padding-left: 78px !important; }
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node[data-level="7"],
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="7"] { padding-left: 92px !important; }
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node[data-level="8"],
body.ot-v3-format.ot-v3-workbench .ot-tree-node[data-level="8"] { padding-left: 106px !important; }
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__label,
body.ot-v3-format.ot-v3-workbench .ot-tree-node__label {
justify-self: start !important;
min-width: 0 !important;
overflow: hidden !important;
text-align: left !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__expander,
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__icon {
align-items: center !important;
display: inline-flex !important;
height: 14px !important;
justify-content: center !important;
position: relative !important;
width: 14px !important;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__expander::before,
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__icon::before {
content: "" !important;
display: inline-block !important;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__expander--collapsed::before {
border-bottom: 3px solid transparent !important;
border-left: 4px solid currentColor !important;
border-top: 3px solid transparent !important;
height: 0 !important;
width: 0 !important;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__expander--expanded::before {
border-left: 3px solid transparent !important;
border-right: 3px solid transparent !important;
border-top: 4px solid currentColor !important;
height: 0 !important;
width: 0 !important;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__expander--leaf::before,
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__icon--device::before,
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__icon--axis::before {
background: var(--ot-v3-teal, #00A8CB) !important;
border-radius: 50% !important;
height: 7px !important;
width: 7px !important;
}
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__icon--company::before,
body.ot-v3-format .ot-shared-hierarchy__tree .ot-tree-node__icon--area::before {
border: 1px solid var(--ot-v3-teal, #00A8CB) !important;
height: 9px !important;
width: 9px !important;
}
body.ot-v3-format .ot-footer,
body.ot-v3-format .ot-v3-footer {
align-items: center !important;
background: var(--ot-v3-surface, #FFFFFF) !important;
border-top: 1px solid var(--ot-v3-rule-soft, #EBEBEB) !important;
box-sizing: border-box !important;
color: var(--ot-v3-ink-4, #6B7280) !important;
display: flex !important;
font-size: 11px !important;
gap: 24px !important;
justify-content: space-between !important;
line-height: 1.35 !important;
margin-top: 14px !important;
padding: 12px 16px !important;
width: 100% !important;
}
body.ot-v3-format.ot-v3-admin > .ot-footer,
body.ot-v3-format.ot-v3-admin > .ot-v3-footer {
margin: 14px 16px 0 !important;
width: calc(100% - 32px) !important;
}
body.ot-v3-format.ot-v3-workbench .ot-tree-panel {
align-self: stretch !important;
max-height: none !important;
overflow-y: auto !important;
padding: 12px 10px !important;
}
@media (max-width: 900px) {
body.ot-v3-format .ot-shared-page-layout {
display: block !important;
}
body.ot-v3-format .ot-shared-page-layout__rail,
body.ot-v3-format .ot-asset-dashboard__tree {
border-bottom: 1px solid var(--ot-v3-rule-soft, #EBEBEB) !important;
border-right: 0 !important;
max-width: none !important;
width: auto !important;
}
}
/* HIERARCHY-UNIFY-20260528-END */
/* FOOTER-TOOLTIP-20260528-BEGIN */
html {
min-height: 100%;
}
body.ot-v3-format {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
}
body.ot-v3-format > .ot-shell__topbar,
body.ot-v3-format > header,
body.ot-v3-format > script,
body.ot-v3-format > style {
flex: 0 0 auto !important;
}
body.ot-v3-format > .ot-page,
body.ot-v3-format > .ot-shared-page-layout,
body.ot-v3-format > main,
body.ot-v3-format > .ot-workbench-shell,
body.ot-v3-format > .ot-admin-shell,
body.ot-v3-format > .ot-dashboard-shell,
body.ot-v3-format > .ot-layout {
flex: 1 0 auto !important;
}
body.ot-v3-format > .ot-footer,
body.ot-v3-format > .ot-v3-footer,
body.ot-v3-format > footer.ot-footer,
body.ot-v3-format > footer.ot-v3-footer {
flex: 0 0 auto !important;
margin-top: auto !important;
}
body.ot-v3-format.ot-v3-admin > .ot-footer,
body.ot-v3-format.ot-v3-admin > .ot-v3-footer {
margin: auto 16px 0 !important;
width: calc(100% - 32px) !important;
}
body.ot-v3-format [data-ot-tooltip] {
position: relative;
}
@media (hover: hover) {
body.ot-v3-format [data-ot-tooltip]::after {
background: var(--ot-v3-navy, #002F65);
border: 1px solid rgba(255, 255, 255, .18);
box-shadow: 0 10px 24px rgba(0, 47, 101, .18);
box-sizing: border-box;
color: #FFFFFF;
content: attr(data-ot-tooltip);
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 500;
left: 50%;
letter-spacing: 0;
line-height: 1.35;
max-width: min(320px, 86vw);
min-width: 180px;
opacity: 0;
padding: 8px 10px;
pointer-events: none;
position: absolute;
text-transform: none;
top: calc(100% + 8px);
transform: translateX(-50%) translateY(-3px);
transition: opacity .14s ease, transform .14s ease;
white-space: normal;
z-index: 10000;
}
body.ot-v3-format [data-ot-tooltip]::before {
border: 6px solid transparent;
border-bottom-color: var(--ot-v3-navy, #002F65);
content: "";
left: 50%;
opacity: 0;
pointer-events: none;
position: absolute;
top: calc(100% - 3px);
transform: translateX(-50%);
transition: opacity .14s ease;
z-index: 10001;
}
body.ot-v3-format [data-ot-tooltip]:hover::after,
body.ot-v3-format [data-ot-tooltip]:focus-visible::after,
body.ot-v3-format [data-ot-tooltip]:hover::before,
body.ot-v3-format [data-ot-tooltip]:focus-visible::before {
opacity: 1;
}
body.ot-v3-format [data-ot-tooltip]:hover::after,
body.ot-v3-format [data-ot-tooltip]:focus-visible::after {
transform: translateX(-50%) translateY(0);
}
}
/* FOOTER-TOOLTIP-20260528-END */
/* SHARED-LAYOUT-FOOTER-20260528-BEGIN */
body.ot-v3-format .ot-shared-page-layout__content {
display: flex !important;
flex-direction: column !important;
min-height: calc(100vh - var(--ot-v3-topbar-h, 54px)) !important;
}
body.ot-v3-format .ot-shared-page-layout__content > .ot-footer,
body.ot-v3-format .ot-shared-page-layout__content > .ot-v3-footer,
body.ot-v3-format .ot-shared-page-layout__content > footer.ot-footer,
body.ot-v3-format .ot-shared-page-layout__content > footer.ot-v3-footer {
flex: 0 0 auto !important;
margin-top: auto !important;
}
/* SHARED-LAYOUT-FOOTER-20260528-END */
/* LABEL-QA-FIXES-20260530-BEGIN */
body.ot-v3-format .tab-strip,
body.ot-v3-format .ot-sc-tab-nav,
body.ot-v3-format .ot-lubrication__tab-nav,
body.ot-v3-format .ot-plant-dashboard__tab-group {
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
overflow-x: auto !important;
padding: 0 !important;
background: var(--ot-v3-navy, #002F65) !important;
border: 1px solid var(--ot-v3-rule-soft, #EBEBEB) !important;
scrollbar-width: thin !important;
}
body.ot-v3-format .tab-strip .tab,
body.ot-v3-format .ot-sc-tab-nav .tab,
body.ot-v3-format .ot-lubrication__tab,
body.ot-v3-format .ot-plant-dashboard__tab {
flex: 0 0 auto !important;
min-height: 30px !important;
padding: 0 12px !important;
border: 0 !important;
border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 0 !important;
background: transparent !important;
color: rgba(255, 255, 255, 0.86) !important;
font-size: 11px !important;
line-height: 30px !important;
white-space: nowrap !important;
}
body.ot-v3-format .tab-strip .tab.active,
body.ot-v3-format .tab-strip .tab.is-active,
body.ot-v3-format .ot-sc-tab-nav .tab.active,
body.ot-v3-format .ot-sc-tab-nav .tab.is-active,
body.ot-v3-format .ot-lubrication__tab.active,
body.ot-v3-format .ot-lubrication__tab.is-active,
body.ot-v3-format .ot-plant-dashboard__tab.active,
body.ot-v3-format .ot-plant-dashboard__tab.is-active {
background: var(--ot-v3-navy, #002F65) !important;
color: #FFFFFF !important;
font-weight: 700 !important;
box-shadow: inset 0 -3px 0 var(--ot-v3-teal, #00A8CB) !important;
}
body.ot-v3-format .ot-ai-console .ot-tab-strip .ot-tab,
body.ot-v3-format .ot-ai-console .ot-tab-strip button,
body.ot-v3-format .ot-ai-console button[id^="ai"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 34px !important;
height: auto !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
body.ot-v3-format .ot-ai-console .ot-tab-strip .ot-tab,
body.ot-v3-format .ot-ai-console .ot-tab-strip button {
min-height: 32px !important;
line-height: 32px !important;
}
body.ot-v3-format .ot-ai-console button[id^="ai"] {
min-width: max-content !important;
padding: 8px 14px !important;
}
body.ot-v3-format .ot-ai-console #aiSubmitLabelBtn {
width: auto !important;
min-width: 136px !important;
}
/* LABEL-QA-FIXES-20260530-END */
/* =========================================================================
OPTIMAL TREND — MARS AESTHETIC LAYER (appended 2026-06-06)
Purpose: bring the Mars (mars.optimalworld.org) look-and-feel to Trend
through TYPOGRAPHY, SPACING, DENSITY, RADIUS, SHADOW and COMPONENT RHYTHM
only. It deliberately introduces NO new colours and NO branding changes.
Every colour below is referenced from the existing Optimal palette
variables (--ot-v3-*). Scoped under body.ot-v3-format so it inherits the
light/dark theme tokens and applies to all 33 pages with zero markup edits.
========================================================================= */
/* Mars signature display face (panel/section titles) + digital readout face.
Same font assets Mars itself ships, hosted locally under static/v2_4/fonts. */
@font-face {
font-family: "YouSheBiaoTiHei";
src: url("fonts/YouSheBiaoTiHei.ttf") format("truetype");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DS-Digital";
src: url("fonts/DS-Digital.ttf") format("truetype");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
body.ot-v3-format {
--ot-mars-display: "YouSheBiaoTiHei", "Oswald", "Saira Condensed", "Helvetica Neue", Arial, sans-serif;
--ot-mars-digital: "DS-Digital", "Helvetica Neue", "Consolas", monospace;
--ot-mars-radius: 3px;
--ot-mars-radius-lg: 4px;
--ot-mars-accent: var(--ot-v3-teal);
}
/* ---- Typography: Mars HUD display headings -----------------------------
Mars renders every panel / section / page title in the YouSheBiaoTiHei
condensed display face. We re-point Trend's heading + title selectors to
it (overriding the previous Georgia serif / Helvetica heading choices),
keeping the existing colours untouched. */
body.ot-v3-format h1,
body.ot-v3-format h2,
body.ot-v3-format h3,
body.ot-v3-format h4,
body.ot-v3-format .ot-shell-title,
body.ot-v3-format .ot-card__title,
body.ot-v3-format .chart-title,
body.ot-v3-format .config-card-title,
body.ot-v3-format .section-title,
body.ot-v3-format .page-title,
body.ot-v3-format .page-header-title,
body.ot-v3-format .header-title,
body.ot-v3-format.ot-v3-workbench .ot-context-band h1 {
font-family: var(--ot-mars-display) !important;
letter-spacing: 0.4px;
font-style: normal;
}
/* Digital seven-segment face available for KPI/metric readouts when a page
opts in (Mars uses it for gauge centres / counters). Harmless if unused. */
body.ot-v3-format .ot-mars-digital,
body.ot-v3-format .ot-metric--digital {
font-family: var(--ot-mars-digital) !important;
letter-spacing: 1px;
}
/* ---- Angular Mars radii (sharper, more technical chassis) -------------- */
body.ot-v3-format .ot-card,
body.ot-v3-format .ot-card--form,
body.ot-v3-format .ot-filter-card,
body.ot-v3-format .ot-chart-panel,
body.ot-v3-format .ot-data-table,
body.ot-v3-format .ot-context-band,
body.ot-v3-format .ot-toolbar,
body.ot-v3-format .ot-rebalance-card,
body.ot-v3-format .ot-maint__activity-card,
body.ot-v3-format .ot-hardware-coverage-card {
border-radius: var(--ot-mars-radius);
}
body.ot-v3-format .ot-btn,
body.ot-v3-format .ot-input,
body.ot-v3-format input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.ot-v3-format select,
body.ot-v3-format textarea {
border-radius: var(--ot-mars-radius);
}
/* ---- Mars panel header: condensed title + left accent marker ----------
Mars marks every panel header with a small accent block at the leading
edge. inset box-shadow draws it inside existing padding => no layout shift
and no text overlap. Colour is the Optimal teal accent. */
body.ot-v3-format .ot-card__header,
body.ot-v3-format .ot-panel__header,
body.ot-v3-format .section-header,
body.ot-v3-format .case-card-header,
body.ot-v3-format .config-card-title,
body.ot-v3-format .chart-title,
body.ot-v3-format .ot-chart-panel__head {
box-shadow: inset 3px 0 0 var(--ot-mars-accent);
}
/* ---- Buttons: Mars solid control rhythm (no colour change) ------------ */
body.ot-v3-format .ot-btn {
font-weight: 600;
letter-spacing: 0.2px;
padding: 7px 14px;
line-height: 1.1;
}
/* ---- Primary nav: tighter Mars tab rhythm + angular active accent ------
Trend nav links are already compact/bordered; we add a leading angular
accent to the active tab to echo Mars's parallelogram active state.
Uses existing accent colour only. */
body.ot-v3-format .ot-shell__nav a {
letter-spacing: 0.3px;
}
body.ot-v3-format .ot-shell__nav a[aria-current="page"],
body.ot-v3-format .ot-shell__nav a.is-active,
body.ot-v3-format .ot-shell__nav a.active {
box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.85);
}
/* ---- Tabs: condensed Mars tab strip ----------------------------------- */
body.ot-v3-format .ot-tab,
body.ot-v3-format .ot-maint__tab,
body.ot-v3-format .ot-plant-dashboard__tab,
body.ot-v3-format .ot-lubrication__tab,
body.ot-v3-format .ot-sc-tab-nav a,
body.ot-v3-format .ot-sc-tab-nav button {
letter-spacing: 0.3px;
}
/* ---- Tables: dense Mars data grid with a defined header row -----------
Subtle header fill + thin rules + compact cells, all via Optimal tokens. */
body.ot-v3-format table th,
body.ot-v3-format .ot-data-table th,
body.ot-v3-format .ot-data-table__head .ot-data-table__cell {
background: var(--ot-v3-surface-alt);
color: var(--ot-v3-ink-3);
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.4px;
border-bottom: 1px solid var(--ot-v3-rule);
padding: 7px 10px;
}
body.ot-v3-format table td,
body.ot-v3-format .ot-data-table td,
body.ot-v3-format .ot-data-table__row .ot-data-table__cell {
padding: 7px 10px;
border-bottom: 1px solid var(--ot-v3-rule-soft);
}
body.ot-v3-format table tbody tr:hover td,
body.ot-v3-format .ot-data-table__row:hover {
background: var(--ot-v3-surface-alt);
}
/* ---- Form controls: consistent Mars 36px control height --------------- */
body.ot-v3-format .ot-input,
body.ot-v3-format input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.ot-v3-format select {
min-height: 34px;
}
/* ---- Footer: keep brand text + colour; just tighten the rhythm -------- */
body.ot-v3-format .ot-footer {
letter-spacing: 0.2px;
}
/* === END MARS AESTHETIC LAYER === */
/* Hierarchy rail overlap fix 20260607RAIL1: portal_shared_hierarchy.js setWidth() sets an inline rail width (default 300px, up to 520px) that can exceed a fixed rail grid track on the dashboard/gallery/diagnostic pages and overlap the main content. Clamp every shared-hierarchy rail to its grid track so it can never overlap content. Layout/spacing only; no colour/branding change. */
body.ot-v3-format [data-ot-shared-hierarchy]{max-width:100%!important;box-sizing:border-box!important;}
/* === Theme-toggle indicator parity - 20260607THEMEICON1 ==================
* The 9 v3-format-only pages (08,14,17,18,19,20,21,28,30) load ONLY this file,
* which previously had NO .ot-theme-toggle__icon rule and forced the toggle
* button to a 28px icon-only box, so they relied on auth-guard.js
* (otEnsureToggleIcon) to inline-paint the disc and never showed the
* "DARK/LIGHT" text label the 23 design-system pages get from
* optimal-design-system.css (rules ~lines 757-805). Replicate those canonical
* rules here so the indicator is drawn by CSS alone - split disc + dark
* variant + DARK/LIGHT label - for true parity. The JS paint then
* short-circuits (its computed backgroundImage !== "none" guard), becoming a
* harmless fallback. Palette unchanged: same teal accent (#00A8CB) already
* used throughout this file; no new colours introduced. Additive only. */
/* Give the toggle button room for the label (mirrors
* .ot-shell__utilities .ot-theme-toggle in optimal-design-system.css);
* overrides the earlier icon-only width:28px/padding:0 via higher specificity. */
body.ot-v3-format .ot-shell__utilities .ot-theme-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
width: auto !important;
min-width: 58px !important;
height: 30px !important;
padding: 0 8px !important;
}
/* Split-disc indicator, light mode (mirrors .ot-theme-toggle__icon). */
body.ot-v3-format .ot-theme-toggle__icon {
width: 12px;
height: 12px;
border-radius: 50%;
background: conic-gradient(var(--accent, var(--teal, #00A8CB)) 50%, transparent 50%);
border: 1px solid currentColor;
}
/* "DARK" / "LIGHT" target-theme label
* (mirrors .ot-shell__utilities .ot-theme-toggle::after). */
body.ot-v3-format .ot-shell__utilities .ot-theme-toggle::after {
content: "Dark";
font-family: var(--font-sans, "Helvetica Neue", Arial, sans-serif);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
html[data-theme="dark"] body.ot-v3-format .ot-shell__utilities .ot-theme-toggle::after {
content: "Light";
}
/* Dark-mode disc variant
* (mirrors [data-theme="dark"] .ot-shell__utilities .ot-theme-toggle__icon). */
html[data-theme="dark"] body.ot-v3-format .ot-shell__utilities .ot-theme-toggle__icon {
background: conic-gradient(transparent 50%, var(--accent, var(--teal, #00A8CB)) 50%);
}
/* === END theme-toggle indicator parity 20260607THEMEICON1 ============== */