.technical-tracking-drawer {
--tracking-text: #172433; --tracking-muted: #637185; --tracking-line: #e3e8ee; box-sizing: border-box; position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; max-width: none; max-height: none; transform: scale(var(--tracking-scale, 1)); transform-origin: top right; border: 0; border-left: 1px solid var(--tracking-line); border-radius: 0; background: #fff; color: var(--tracking-text); font-family:var(--ui-font-family);font-size:var(--ui-text-body-size);font-weight:var(--ui-font-regular);line-height:var(--ui-text-body-line); box-shadow: -8px 0 28px #17243318; overflow: hidden;
}
.technical-tracking-drawer[open] {
display: flex; flex-direction: column; animation: tracking-enter 160ms ease-out;
}
.technical-tracking-drawer::backdrop {
background: #15253824;
}
.technical-tracking-drawer * {
box-sizing: border-box;
}
.technical-tracking-drawer button {
font: inherit;
}
.technical-tracking-drawer [data-tone=danger] {
color: #bd3037;
}
.technical-tracking-drawer [data-tone=warning] {
color: #a7600c;
}
.technical-tracking-drawer [data-tone=green] {
color: #267449;
}
.technical-tracking-drawer [data-tone=blue] {
color: #285faf;
}
.technical-tracking-drawer [data-tone=muted] {
color: var(--tracking-muted);
}
.technical-tracking-drawer .tracking-toolbar {
display: flex; justify-content: flex-end; flex: 0 0 auto; padding: 6px 12px 0; background: #f3f6fa;
}
.technical-tracking-drawer .tracking-close {
flex: 0 0 var(--ui-close-size); height: var(--ui-close-size); --ui-control-border: 0; --ui-control-background: transparent; --ui-control-color: var(--tracking-muted); font-size:var(--ui-text-glyph-large-size); line-height:var(--ui-text-glyph-large-line);
}
.technical-tracking-drawer .tracking-close:hover {
--ui-hover-background: #edf1f6; --ui-hover-color: var(--tracking-text);
}
.technical-tracking-drawer .tracking-content {
flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-rows: repeat(var(--tracking-rows), minmax(0, 1fr)); gap: 8px; background: #f3f6fa; padding: 8px 12px 12px;
}
.technical-tracking-drawer .tracking-module {
display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 10px 14px; color: var(--tracking-text); background: #fff; border: 1px solid var(--tracking-line); border-left: 3px solid var(--module-color);
}
.technical-tracking-drawer [data-module=qc] {
--module-color: #0891b2; --module-tint: #eef9fc; --module-icon: url('./icons/qc.svg');
}
.technical-tracking-drawer [data-module=volumetric] {
--module-color: #2563eb; --module-tint: #eff4fe; --module-icon: url('./icons/volumetric.svg');
}
.technical-tracking-drawer [data-module=proficiency] {
--module-color: #6d5df2; --module-tint: #f3f1fe; --module-icon: url('./icons/proficiency.svg');
}
.technical-tracking-drawer [data-module=personnel] {
--module-color: #238b5a; --module-tint: #eef8f2; --module-icon: url('./icons/personnel.svg');
}
.technical-tracking-drawer [data-module=asset_management] {
--module-color: #ff7a1a; --module-tint: #fff4eb; --module-icon: url('./icons/asset.svg');
}
.technical-tracking-drawer .tracking-module-title {
margin: 0;
}
.technical-tracking-drawer .tracking-module-open {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; --ui-control-padding: 0; --ui-control-border: 0; text-align: left; --ui-control-color: var(--tracking-text); --ui-control-background: transparent; font-size:var(--ui-text-section-size); font-weight:var(--ui-font-emphasis);
}
.technical-tracking-drawer .tracking-module-open:hover {
--ui-hover-color: var(--module-color);
}
.technical-tracking-drawer .tracking-module-icon {
display: block; position: relative; flex: 0 0 36px; height: 36px; background: var(--module-tint);
}
.technical-tracking-drawer .tracking-module-icon::after {
content: ''; position: absolute; inset: 6px; background: var(--module-color); mask: var(--module-icon) center / contain no-repeat;
}
.technical-tracking-drawer .tracking-module-name {
flex: 1;
}
.technical-tracking-drawer .tracking-module-arrow {
color: var(--module-color); font-size:var(--ui-text-section-size);
}
.technical-tracking-drawer .tracking-stats {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px;
}
.technical-tracking-drawer .tracking-stat {
--ui-control-color: var(--tracking-text);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 64px; --ui-control-padding: 6px 4px; --ui-control-border: 1px solid var(--tracking-line); --ui-control-background: var(--module-tint); text-align: center;
}
.technical-tracking-drawer .tracking-stat:hover:enabled {
--ui-hover-border-color: #b8c5d4; --ui-hover-background: #f0f4f9;
}
.technical-tracking-drawer .tracking-stat-caption {
color: var(--tracking-muted); font-size:var(--ui-text-body-size); line-height:var(--ui-text-body-line); overflow-wrap: anywhere;
}
.technical-tracking-drawer .tracking-stat-value {
font-size:var(--ui-text-title-size); line-height:var(--ui-text-title-line); font-weight:var(--ui-font-emphasis); font-variant-numeric: tabular-nums;
}
.technical-tracking-drawer .tracking-read-error {
display: block; color: #bd3037; font-size:var(--ui-text-help-size); font-weight:var(--ui-font-regular); line-height:var(--ui-text-help-line);
}
@keyframes tracking-enter {
from {transform: translateX(100%) scale(var(--tracking-scale, 1));} to {transform: scale(var(--tracking-scale, 1));}
}
@media (prefers-reduced-motion: reduce) {
.technical-tracking-drawer[open] {
animation: none;
}
}