/* Rack equipment faces, ports, shelves, and hardware profiles. */
.rack-port-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); gap: 2px; min-width: 0; align-items: center; }
.rack-port { position: relative; z-index: 3; display: grid; width: 100%; min-width: 0; height: 11px; place-items: center; padding: 0; color: #587582; background: #eef4f6; border: 1px solid #b8cbd2; border-radius: 2px; font-size: 6px; line-height: 1; cursor: pointer; }
.rack-port span { max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.rack-port-free:hover, .rack-port-selected { color: #fff; background: #0785a8; border-color: #056884; }
.rack-port:disabled { cursor: not-allowed; opacity: .48; }
.rack-port-reserved { background: #f3e9ca; border-color: #d8c484; }
.rack-port-disabled { background: #e3e7e5; border-color: #b8c0bc; }
.rack-port-connected { color: #fff; background: var(--cable-color, #168aad); border-color: var(--cable-color, #168aad); }
.rack-shelf-item .rack-equipment-item { flex: 1 1 100%; min-height: 29px; background: rgba(255,255,255,.72); box-shadow: none; }
.rack-shelf-item .rack-equipment-front { grid-template-rows: auto; }
.rack-shelf-item .rack-equipment-copy small { display: none; }
.rack-shelf-item .rack-port-strip { grid-template-columns: repeat(auto-fill, minmax(8px, 1fr)); }
.rack-core-chassis { padding: 3px; background: linear-gradient(#e4ebed,#cdd9dd); border: 1px solid #a6b8bf; border-radius: 3px; }
.rack-core-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.rack-core-slot { min-width: 0; padding: 2px; background: #f3f6f6; border: 1px solid #9fb2b8; border-radius: 2px; }
.rack-core-slot-label { display: flex; min-width: 0; align-items: center; gap: 3px; margin-bottom: 2px; color: #496772; font-size: 6px; line-height: 1.2; }
.rack-core-slot-label > span { color: #64828d; font-weight: 700; }
.rack-core-slot-label strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.rack-core-slot-label small { overflow: hidden; margin-left: auto; color: #789099; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.rack-module-port-bank { grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); }
.rack-core-chassis .rack-port { height: 9px; font-size: 5px; }
.rack-unconfigured-module { padding: 3px; color: #6d8188; font-size: 7px; }
.rack-face-caption { color: #627d87; font-size: 6px; font-weight: 700; letter-spacing: .35px; }
.rack-patch-panel-face, .rack-switch-face { display: block; width: 100%; min-width: 0; padding: 1px 2px; }
.rack-switch-face { padding: 2px 3px; background: linear-gradient(90deg,#dce6e9,#f1f5f6); border: 1px solid #9eb5be; border-radius: 3px; }
.rack-patch-panel-face { padding: 1px 3px; background: linear-gradient(90deg,#d6dfe2,#f2f5f5); border: 1px solid #a6b7bd; border-radius: 2px; }
.rack-switch-port-bank, .rack-patch-port-bank { width: 100%; grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); }
.rack-patch-port-bank.rack-port-bank-48.rack-port-bank-48-single { grid-template-columns: repeat(48, max-content); }
.rack-port-paired { grid-template-columns: repeat(var(--rack-port-columns), minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: row; }
.rack-switch-port-bank.rack-switch-port-paired { grid-template-columns: repeat(var(--rack-port-columns), minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: row; }
.rack-switch-port-bank.rack-port-bank-48, .rack-patch-port-bank.rack-port-bank-48 { grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1px; }
.rack-port-bank-48 .rack-port { height: 6px; border-radius: 1px; font-size: 4px; }
.rack-equipment-switch .rack-equipment-front, .rack-equipment-patch-panel .rack-equipment-front { gap: 0; }
.rack-equipment-switch .rack-equipment-device, .rack-equipment-patch-panel .rack-equipment-device { min-height: 11px; gap: 3px; }
.rack-equipment-switch .rack-equipment-device[draggable="true"], .rack-equipment-patch-panel .rack-equipment-device[draggable="true"] { min-height: 11px; }
.rack-equipment-switch .rack-device-glyph, .rack-equipment-patch-panel .rack-device-glyph, .rack-equipment-switch .rack-equipment-copy small, .rack-equipment-patch-panel .rack-equipment-copy small, .rack-equipment-switch .rack-face-caption, .rack-equipment-patch-panel .rack-face-caption { display: none; }
.rack-equipment-switch .rack-item-action, .rack-equipment-patch-panel .rack-item-action { padding: 1px 3px; font-size: 7px; }
.rack-equipment-switch .rack-port, .rack-equipment-patch-panel .rack-port { height: 7px; font-size: 5px; }
.rack-equipment-switch .rack-port-bank-48 .rack-port, .rack-equipment-patch-panel .rack-port-bank-48 .rack-port { height: 6px; font-size: 4px; }
.rack-server-face { display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, .52fr); align-items: stretch; gap: 5px; padding: 3px 5px; background: linear-gradient(180deg,#d8e0e3,#bfcbd0); border: 1px solid #879ca4; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.rack-server-chassis { display: grid; min-width: 0; grid-template-rows: auto 1fr; gap: 4px; padding: 2px 5px; background: linear-gradient(180deg,#edf1f2,#d5dfe2); border: 1px solid #a3b1b6; border-radius: 2px; }
.rack-server-header { display: flex; align-items: center; gap: 5px; color: #4d6670; font-size: 6px; letter-spacing: .6px; }
.rack-server-header strong { padding: 1px 4px; color: #eef4f5; background: #536b74; border-radius: 2px; }
.rack-server-status { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: #6d8086; font-size: 5px; letter-spacing: 0; }
.rack-server-status i { width: 4px; height: 4px; background: #61ad77; border: 1px solid #43885b; border-radius: 50%; }
.rack-server-status i + i { background: #d8b75d; border-color: #a18a48; }
.rack-server-details { display: grid; min-width: 0; grid-template-columns: minmax(35px, .7fr) 1fr; align-items: center; gap: 5px; }
.rack-server-vent { display: flex; min-width: 0; justify-content: space-around; gap: 2px; padding: 3px; background: repeating-linear-gradient(180deg,#87999f 0 1px,#d2dcdf 1px 3px); border: 1px solid #a8b7bb; border-radius: 2px; }
.rack-server-vent i { width: 2px; height: 9px; background: #71858c; border-radius: 1px; }
.rack-server-drive-bays { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(10px, 1fr)); gap: 2px; }
.rack-server-drive-bays i { position: relative; height: 14px; background: linear-gradient(180deg,#7f9299,#b4c1c5 45%,#778b92); border: 1px solid #778b92; border-radius: 2px; box-shadow: inset 0 1px rgba(255,255,255,.55); }
.rack-server-drive-bays i::after { position: absolute; right: 2px; bottom: 2px; width: 3px; height: 3px; content: ""; background: #69b47d; border-radius: 50%; }
.rack-server-network { display: grid; min-width: 0; align-content: center; gap: 3px; padding: 2px 4px; background: #edf2f3; border: 1px solid #aab9bd; border-radius: 2px; }
.rack-server-network-label { color: #647c84; font-size: 5px; font-weight: 700; letter-spacing: .6px; }
.rack-server-port-bank { grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); }
.rack-equipment-computer:not(.rack-shelf-mounted) .rack-equipment-front { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.rack-equipment-computer:not(.rack-shelf-mounted) .rack-server-face { display: flex; flex: 1; min-height: 0; gap: 4px; padding: 2px 3px; }
.rack-equipment-computer:not(.rack-shelf-mounted) .rack-server-chassis { display: flex; flex: 1; min-height: 0; align-items: center; gap: 3px; padding: 1px 3px; }
.rack-equipment-computer:not(.rack-shelf-mounted) .rack-server-details { flex: 1; }
.rack-equipment-computer:not(.rack-shelf-mounted) .rack-server-network { flex: 0 1 35%; min-height: 0; gap: 1px; padding: 1px 2px; }
.rack-equipment-computer:not(.rack-shelf-mounted) .rack-server-port-bank { grid-template-columns: repeat(auto-fill, var(--rack-port-size)); }
.rack-other-face { display: flex; align-items: center; gap: 7px; padding: 2px 4px; background: #e8eef0; border: 1px solid #b3c3c8; border-radius: 3px; }
.rack-other-vents { display: flex; gap: 2px; }
.rack-other-vents i { width: 3px; height: 8px; background: #98aeb5; border-radius: 2px; }
.rack-other-port-bank { flex: 1; }
.rack-item-action { flex: 0 0 auto; padding: 4px 7px; color: #3e7185; background: #f1f7f9; border: 1px solid #dce9ed; border-radius: 4px; font-size: 9px; }
.rack-item-action:hover { background: #e4f2f6; }
.rack-item-remove { color: #a54b4b; }
.rack-shelf-item { display: grid; grid-template-rows: auto 1fr; min-height: 34px; padding: 4px 6px; overflow: hidden; background: #e1edf1; border: 1px dashed #7699a7; }
.rack-mounted-cable-tray { display: flex; min-height: 28px; align-items: center; gap: 7px; padding: 3px 7px; overflow: hidden; color: #385966; background: linear-gradient(#dce6e9,#bacbd0 48%,#e8eff1); border: 1px solid #829da5; box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(69,94,102,.16); }
.rack-mounted-cable-tray strong { position: relative; z-index: 1; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.rack-mounted-tray-slots { position: absolute; inset: 4px 7px; background: repeating-linear-gradient(90deg,rgba(73,101,111,.42) 0 3px,transparent 3px 8px); opacity: .42; pointer-events: none; }
.rack-mounted-tray-size { margin-left: auto; color: #627f88; font-size: 7px; }
.rack-mounted-cable-tray .rack-item-action { position: relative; z-index: 1; }
.rack-shelf-heading { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rack-shelf-heading strong { flex: 1; overflow: hidden; color: #345c6d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.rack-shelf-heading > span { color: #66818d; font-size: 9px; }
.rack-shelf-contents { display: flex; flex-wrap: wrap; align-content: start; align-items: stretch; gap: 4px; min-width: 0; padding-top: 3px; }
.rack-shelf-item .rack-shelf-mounted.rack-shelf-upright { flex: 0 1 calc(33.333% - 4px); min-width: 82px; max-width: calc(33.333% - 3px); min-height: 68px; }
.rack-shelf-item .rack-shelf-mounted.rack-shelf-flat { flex: 1 1 100%; min-height: 52px; }
.rack-shelf-item .rack-shelf-mounted .rack-equipment-front { grid-template-rows: auto minmax(0, 1fr); }
.rack-shelf-item .rack-shelf-mounted .rack-equipment-device { min-height: 14px; }
.rack-shelf-item .rack-shelf-mounted .rack-equipment-copy small { display: none; }
.rack-shelf-item .rack-shelf-upright .rack-server-face { height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 2px; padding: 2px; }
.rack-shelf-item .rack-shelf-upright .rack-server-chassis { grid-template-rows: auto 1fr; gap: 2px; padding: 2px; }
.rack-shelf-item .rack-shelf-upright .rack-server-details { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.rack-shelf-item .rack-shelf-upright .rack-server-vent { display: none; }
.rack-shelf-item .rack-shelf-upright .rack-server-drive-bays { grid-template-columns: repeat(2, minmax(8px, 1fr)); grid-template-rows: repeat(2, 9px); }
.rack-shelf-item .rack-shelf-upright .rack-server-drive-bays i { height: 9px; }
.rack-shelf-item .rack-shelf-upright .rack-server-network { grid-template-columns: auto 1fr; align-items: center; gap: 3px; padding: 2px; }
.rack-shelf-item .rack-shelf-upright .rack-server-port-bank { grid-template-columns: repeat(auto-fill, minmax(8px, 1fr)); gap: 1px; }
.rack-shelf-item .rack-shelf-upright .rack-server-network-label { display: none; }
.rack-shelf-item .rack-shelf-flat .rack-server-face { min-height: 28px; }
.rack-shelf-device { display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px; background: white; border: 1px solid #d1e0e5; border-radius: 4px; cursor: grab; }
.rack-shelf-device strong { max-width: 150px; overflow: hidden; color: #2a5366; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.rack-shelf-empty { padding: 3px 2px; color: #6e8894; font-size: 9px; }
.rack-shelf-template { min-height: 39px; border-style: dashed; border-color: #86a6b1; background: #f0f6f7; }
.rack-shelf-template-icon { display: grid; width: 25px; height: 22px; flex: 0 0 25px; place-items: center; color: #477482; background: repeating-linear-gradient(0deg,#d7e5e9 0 4px,#b7cbd1 4px 5px); border: 1px solid #87a5af; border-radius: 3px; font-size: 13px; }
.rack-tray-template { min-height: 39px; border-style: dashed; border-color: #73909a; background: #eaf1f3; }
.rack-tray-template-icon { display: grid; width: 25px; height: 22px; flex: 0 0 25px; place-items: center; color: #496a76; background: repeating-linear-gradient(90deg,#bdcdd1 0 3px,#e0e9eb 3px 6px); border: 1px solid #819ca5; border-radius: 3px; font-size: 13px; }
.rack-drag-grip { color: #829da5; font-size: 17px; }
.rack-available-item[draggable="true"]:hover, .rack-equipment-item:hover, .rack-equipment-device[draggable="true"]:hover { border-color: #30a4b6; }
.rack-dragging { opacity: .55; }
.rack-grid.drag-active { background-color: #e5f4f7; border-color: #168aa8; box-shadow: inset 0 0 0 2px rgba(22, 138, 168, .1); }
.rack-shelf-drop-active { border-color: #168aa8 !important; background-color: #e7f6f8 !important; box-shadow: 0 0 0 2px rgba(22, 138, 168, .22); }

.rack-face-compact .rack-grid { padding-top: 3px; padding-bottom: 3px; }
.rack-face-compact .rack-u-mark { min-height: 0; font-size: 6px; }
.rack-face-compact .rack-u-mark i { width: 16px; height: 12px; }
.rack-face-compact .rack-equipment-item { min-height: 0; padding: 0 2px; }
.rack-face-compact .rack-equipment-front { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 0; }
.rack-face-compact .rack-equipment-device[draggable="true"] { min-height: 9px; gap: 2px; }
.rack-face-compact .rack-device-glyph, .rack-face-compact .rack-equipment-copy small { display: none; }
.rack-face-compact .rack-equipment-copy strong { font-size: 7px; line-height: 1; }
.rack-face-compact .rack-item-action { padding: 0 2px; font-size: 6px; line-height: 1; }
.rack-face-compact .rack-patch-panel-face, .rack-face-compact .rack-switch-face { padding: 0; border: 0; background: transparent; }
.rack-face-compact .rack-face-caption { display: none; }
.rack-face-compact .rack-port-strip { gap: 1px; }
.rack-face-compact .rack-port { height: max(9px, calc(var(--rack-unit-height, 32px) * .45)); font-size: 6px; }
.rack-face-compact .rack-port-bank-48 .rack-port { height: 4px; font-size: 3.5px; }
.rack-face-compact .rack-core-chassis { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 1px; padding: 1px; }
.rack-face-compact .rack-core-slots { flex: 1; grid-template-rows: repeat(var(--rack-module-rows, 1), minmax(0, 1fr)); gap: 1px; min-height: 0; }
.rack-face-compact .rack-core-slot { display: flex; min-height: 0; flex-direction: column; gap: 1px; padding: 1px; overflow: hidden; }
.rack-face-compact .rack-core-slot-label { min-height: 6px; gap: 2px; margin: 0; font-size: 5px; line-height: 1; }
.rack-face-compact .rack-core-slot-label strong { font-size: 5px; }
.rack-face-compact .rack-core-slot-label small { display: none; }
.rack-face-compact .rack-module-port-bank { flex: 1; grid-auto-rows: minmax(0, 1fr); gap: 1px; min-height: 0; }
.rack-face-compact .rack-core-chassis .rack-port { height: auto; min-height: 0; font-size: 5px; }
.rack-face-compact .rack-mounted-cable-tray { min-height: 0; padding-top: 0; padding-bottom: 0; }
.rack-face-compact .rack-shelf-item { min-height: 0; padding: 1px 2px; }
.rack-face-compact .rack-shelf-heading { gap: 2px; }
.rack-face-compact .rack-shelf-heading strong { font-size: 7px; }
.rack-face-compact .rack-shelf-item .rack-shelf-contents { gap: 1px; padding-top: 1px; }

/* Rack hardware scales by the space it occupies, while port sockets keep their shape. */
.rack-equipment-item { --rack-port-size: 8px; }
.rack-equipment-item:not(.rack-shelf-mounted) { padding-right: 8px; padding-left: 8px; border-color: #859da6; border-radius: 3px; background: linear-gradient(90deg,#b9c9ce 0 6px,#e1e9ec 6px calc(100% - 6px),#b9c9ce calc(100% - 6px)); }
.rack-equipment-item:not(.rack-shelf-mounted)::before, .rack-equipment-item:not(.rack-shelf-mounted)::after { position: absolute; top: 50%; width: 3px; height: 3px; border: 1px solid #738b94; border-radius: 50%; background: #dae5e8; content: ""; transform: translateY(-50%); pointer-events: none; }
.rack-equipment-item:not(.rack-shelf-mounted)::before { left: 2px; }
.rack-equipment-item:not(.rack-shelf-mounted)::after { right: 2px; }
.rack-equipment-item:not(.rack-shelf-mounted) .rack-equipment-front { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 1px; }
.rack-equipment-item:not(.rack-shelf-mounted) .rack-hardware-face { position: relative; flex: 1; min-width: 0; min-height: 0; box-shadow: inset 0 1px rgba(255,255,255,.65); }
.rack-equipment-item .rack-port-strip { width: max-content; max-width: 100%; grid-template-columns: repeat(var(--rack-port-columns, 1), var(--rack-port-size)); grid-auto-rows: var(--rack-port-size); justify-content: start; align-content: center; gap: 1px; }
.rack-equipment-item .rack-port, .rack-equipment-item .rack-core-chassis .rack-port, .rack-equipment-item .rack-port-bank-48 .rack-port { width: var(--rack-port-size); height: var(--rack-port-size); min-height: 0; border-radius: 1px; font-size: 5px; }
.rack-equipment-item .rack-server-port-bank, .rack-equipment-item .rack-other-port-bank, .rack-shelf-mounted .rack-port-strip { grid-template-columns: repeat(auto-fill, var(--rack-port-size)); width: 100%; }
.rack-equipment-item .rack-switch-port-bank, .rack-equipment-item .rack-patch-port-bank { width: max-content; }
.rack-equipment-item .rack-port-paired { grid-template-columns: repeat(var(--rack-port-columns), minmax(0, var(--rack-port-size, 10px))); grid-template-rows: repeat(2, var(--rack-port-size)); grid-auto-flow: row; }
.rack-equipment-item .rack-switch-port-paired { grid-template-columns: repeat(var(--rack-port-columns), minmax(0, var(--rack-port-size, 10px))); grid-template-rows: repeat(2, var(--rack-port-size)); grid-auto-flow: row; column-gap: 2px; }
.rack-equipment-item .rack-switch-port-paired.rack-port-bank-48 { column-gap: 1px; }
.rack-equipment-item .rack-switch-face, .rack-equipment-item .rack-patch-panel-face { display: flex; min-width: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; padding: 2px 4px; }
.rack-equipment-item .rack-switch-face { background: linear-gradient(#e7eef0,#cddce1); }
.rack-equipment-item .rack-patch-panel-face { background: linear-gradient(#d9e2e5,#f1f5f5); }
.rack-equipment-item .rack-switch-face::after { position: absolute; top: 3px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: #50b77c; box-shadow: 0 0 0 1px #6c9182; content: ""; pointer-events: none; }
.rack-equipment-item .rack-face-caption { color: #5c7883; font-size: 6px; line-height: 1; }
.rack-equipment-item .rack-core-chassis { background: linear-gradient(#dbe5e8,#bfced3); }
.rack-equipment-item .rack-core-slot { background: rgba(246,250,250,.62); border-color: #9fb2b8; border-radius: 3px; }
.rack-equipment-item .rack-other-face { min-height: 0; background: linear-gradient(#e9f0f2,#ccd9de); }
.rack-equipment-item[data-rack-profile="1"] { --rack-port-size: 7px; padding-top: 0; padding-bottom: 0; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-front { flex-direction: row; align-items: center; gap: 3px; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-device[draggable="true"] { flex: 0 1 68%; min-width: 0; min-height: 0; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-copy small, .rack-equipment-item[data-rack-profile="1"] .rack-face-caption { display: none; }
.rack-equipment-item[data-rack-profile="1"] .rack-hardware-face { height: 100%; padding: 0 1px; border: 0; background: transparent; box-shadow: none; }
.rack-equipment-item[data-rack-profile="1"] .rack-switch-face, .rack-equipment-item[data-rack-profile="1"] .rack-patch-panel-face { flex-direction: row; align-items: center; justify-content: flex-start; gap: 3px; }
.rack-equipment-item[data-rack-profile="1"] .rack-switch-face::before, .rack-equipment-item[data-rack-profile="1"] .rack-patch-panel-face::before { flex: 0 0 10px; height: 7px; border: 1px solid #a0b4ba; border-radius: 1px; background: repeating-linear-gradient(90deg,#8ea5ad 0 1px,#d1dfe3 1px 3px); content: ""; }
.rack-equipment-patch-panel[data-rack-profile="1"] .rack-equipment-device[draggable="true"] { flex: 0 0 22%; }
.rack-equipment-patch-panel[data-rack-profile="1"] .rack-patch-panel-face { flex: 1 1 0; overflow: hidden; }
.rack-equipment-patch-panel[data-rack-profile="1"] .rack-patch-panel-face::before { display: none; }
.rack-equipment-patch-panel[data-rack-profile="1"] .rack-patch-port-bank { width: 100%; max-width: 100%; grid-template-columns: repeat(auto-fit, minmax(var(--rack-port-size), 1fr)); grid-auto-rows: var(--rack-port-size); align-content: start; }
.rack-equipment-patch-panel[data-rack-profile="1"] .rack-patch-port-bank .rack-port { width: var(--rack-port-size); justify-self: start; }
.rack-equipment-switch[data-rack-profile="1"] .rack-switch-face::before { flex-basis: 26px; }
.rack-equipment-switch[data-rack-profile="1"] .rack-switch-port-paired:not(.rack-port-bank-48) { --rack-port-size: 8px; }
.rack-equipment-switch[data-rack-profile="1"] .rack-switch-port-paired.rack-port-bank-48 { --rack-port-size: 6px; }
.rack-equipment-item[data-rack-profile="1"] .rack-port span { display: none; }
.rack-equipment-item[data-rack-profile="1"] .rack-core-chassis { align-items: center; }
.rack-equipment-item[data-rack-profile="1"] .rack-core-slots { width: 100%; gap: 2px; }
.rack-equipment-item[data-rack-profile="1"] .rack-core-slot { padding: 1px; }
.rack-equipment-item[data-rack-profile="1"] .rack-core-slot-label { display: none; }
.rack-equipment-item[data-rack-profile="1"] .rack-server-face { align-items: center; gap: 3px; }
.rack-equipment-item[data-rack-profile="1"] .rack-server-chassis { display: flex; flex: 1; min-width: 0; padding: 0 2px; border: 0; background: transparent; }
.rack-equipment-item[data-rack-profile="1"] .rack-server-header, .rack-equipment-item[data-rack-profile="1"] .rack-server-drive-bays, .rack-equipment-item[data-rack-profile="1"] .rack-server-network-label { display: none; }
.rack-equipment-item[data-rack-profile="1"] .rack-server-vent { height: 8px; padding: 1px; }
.rack-equipment-item[data-rack-profile="1"] .rack-server-vent i { height: 4px; }
.rack-equipment-item[data-rack-profile="1"] .rack-server-network { --rack-port-size: 9px; flex: 0 1 45%; border: 0; background: transparent; padding: 0; }
.rack-equipment-item[data-rack-profile="2"] { --rack-port-size: 8px; }
.rack-equipment-switch[data-rack-profile="2"] .rack-switch-port-paired:not(.rack-port-bank-48) { --rack-port-size: 9px; }
.rack-equipment-item[data-rack-profile="2"] .rack-switch-face::before { position: absolute; right: 15px; bottom: 4px; width: 34px; height: 6px; border: 1px solid #a9bcc2; border-radius: 1px; background: repeating-linear-gradient(90deg,#91a9b1 0 2px,#dbe6e9 2px 4px); content: ""; }
.rack-equipment-item[data-rack-profile="3"] { --rack-port-size: 9px; }
.rack-equipment-switch[data-rack-profile="3"] .rack-switch-port-paired:not(.rack-port-bank-48) { --rack-port-size: 10px; }
.rack-equipment-item[data-rack-profile="4"] { --rack-port-size: 10px; }
.rack-equipment-switch[data-rack-profile="4"] .rack-switch-port-paired:not(.rack-port-bank-48) { --rack-port-size: 11px; }
.rack-equipment-item:is([data-rack-profile="3"],[data-rack-profile="4"]) .rack-face-caption, .rack-equipment-item:is([data-rack-profile="3"],[data-rack-profile="4"]) .rack-equipment-copy small { display: block; }
.rack-equipment-item:is([data-rack-profile="3"],[data-rack-profile="4"]) .rack-switch-face::before { width: 52px; height: 7px; border: 1px solid #adbec3; border-radius: 1px; background: repeating-linear-gradient(90deg,#98adb4 0 2px,#d9e5e8 2px 4px); content: ""; }
.rack-equipment-item:is([data-rack-profile="3"],[data-rack-profile="4"]) .rack-patch-panel-face::after { position: absolute; right: 5px; bottom: 5px; left: 5px; height: 7px; border: 1px solid #adbec3; border-radius: 1px; background: repeating-linear-gradient(90deg,#9fb4bc 0 4px,#dbe6e9 4px 7px); content: ""; }
.rack-equipment-item:is([data-rack-profile="3"],[data-rack-profile="4"]) .rack-core-slot { position: relative; }
.rack-equipment-item:is([data-rack-profile="3"],[data-rack-profile="4"]) .rack-core-slot::after { position: absolute; right: 5px; bottom: 4px; left: 5px; height: 5px; border: 1px solid #b4c5ca; background: repeating-linear-gradient(90deg,#9fb4bb 0 2px,#e2eaec 2px 4px); content: ""; pointer-events: none; }
.rack-equipment-item[data-rack-profile="3"] .rack-server-drive-bays, .rack-equipment-item[data-rack-profile="4"] .rack-server-drive-bays { grid-template-columns: repeat(2, minmax(10px, 1fr)); }
.rack-equipment-item[data-rack-profile="4"] .rack-server-drive-bays i { height: 19px; }

/* Keep the rack and Connections board on the same equipment face artwork. */
.rack-equipment-item.rack-equipment-switch .rack-switch-face { background: linear-gradient(90deg,#dce6e9,#f1f5f6); }
.rack-equipment-item.rack-equipment-patch-panel .rack-patch-panel-face { background: linear-gradient(90deg,#d6dfe2,#f2f5f5); }
.rack-equipment-item.rack-equipment-switch .rack-switch-face::before,
.rack-equipment-item.rack-equipment-patch-panel .rack-patch-panel-face::before,
.rack-equipment-item.rack-equipment-switch[data-rack-profile="2"] .rack-switch-face::before,
.rack-equipment-item.rack-equipment-switch:is([data-rack-profile="3"],[data-rack-profile="4"]) .rack-switch-face::before,
.rack-equipment-item.rack-equipment-patch-panel:is([data-rack-profile="3"],[data-rack-profile="4"]) .rack-patch-panel-face::after,
.rack-equipment-item.rack-equipment-core-switch:is([data-rack-profile="3"],[data-rack-profile="4"]) .rack-core-slot::after { content: none; }

/* The HPE-inspired server artwork is shared; rack sizing rules still control its fit. */
.rack-equipment-item.rack-equipment-computer .rack-server-face {
  color: #dce8ee;
  background: linear-gradient(115deg,#162d42 0%,#263f56 58%,#172c40 100%);
  border: 1px solid #10263a;
  border-radius: 4px;
  box-shadow: inset 0 1px rgba(255,255,255,.13), inset 0 -2px rgba(0,0,0,.34), 0 1px 2px rgba(10,25,38,.2);
}
.rack-equipment-item.rack-equipment-computer .rack-server-chassis {
  background: linear-gradient(180deg,#314b62,#1e354a);
  border: 1px solid #466078;
  border-left: 3px solid #01a982;
  border-radius: 3px;
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}
.rack-equipment-item.rack-equipment-computer .rack-server-header { color: #dce8ee; }
.rack-equipment-item.rack-equipment-computer .rack-server-header strong {
  position: relative;
  display: grid;
  width: 36px;
  height: 20px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: #01a982;
  border-radius: 2px 2px 7px 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.24);
  font-size: 0;
}
.rack-equipment-item.rack-equipment-computer .rack-server-header strong::before { content: "HPE"; font-size: 10px; font-weight: 800; letter-spacing: -.4px; }
.rack-equipment-item.rack-equipment-computer .rack-server-header strong::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 7px);
  color: #b8cad5;
  content: "PROLIANT";
  font-size: 6px;
  font-weight: 750;
  letter-spacing: .8px;
  transform: translateY(-50%);
}
.rack-equipment-item.rack-equipment-computer .rack-server-status { color: #b5c7d1; }
.rack-equipment-item.rack-equipment-computer .rack-server-vent { background: repeating-linear-gradient(180deg,#263d51 0 1px,#344e63 1px 3px); border-color: #536c7d; }
.rack-equipment-item.rack-equipment-computer .rack-server-vent i { background: #708998; }
.rack-equipment-item.rack-equipment-computer .rack-server-drive-bays i {
  background: linear-gradient(180deg,#456076,#1b3043 52%,#304a5e);
  border-color: #6c8290;
  box-shadow: inset 0 1px rgba(255,255,255,.17);
}
.rack-equipment-item.rack-equipment-computer .rack-server-network { background: linear-gradient(180deg,#10273a,#1b3449); border-color: #466078; }
.rack-equipment-item.rack-equipment-computer .rack-server-network-label { color: #45d0a7; }

.rack-face-compact .rack-u-mark { font-size: 8px; }
.rack-face-compact .rack-u-mark i { width: 19px; height: 16px; }
.rack-face-compact .rack-equipment-copy strong { font-size: 8px; }
.rack-face-compact .rack-item-action { padding: 1px 4px; font-size: 8px; }
.rack-face-compact .rack-port { font-size: 7px; }

/* Front-panel artwork for rack-mounted UPS units (2U, 3U, and 4U). */
.rack-ups-face { position: relative; display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(26px,.78fr) minmax(36px,.74fr) minmax(12px,.45fr) minmax(30px,.68fr) minmax(24px,.62fr) minmax(34px,.85fr); align-items: center; gap: clamp(3px,1vw,8px); padding: 5px 6px; overflow: hidden; color: #dbe5e8; background: linear-gradient(180deg,#46545b 0%,#28343a 15%,#1d282e 50%,#303d43 86%,#56636a 100%); border: 1px solid #172126; border-radius: 4px; box-shadow: inset 0 1px rgba(255,255,255,.22), inset 0 -2px rgba(0,0,0,.45), 0 1px 2px rgba(20,35,40,.24); }
.rack-ups-face::before { position: absolute; inset: 3px 4px; border: 1px solid rgba(218,233,237,.13); border-radius: 2px; content: ""; pointer-events: none; }
.rack-ups-brand { display: flex; min-width: 0; align-items: center; gap: 6px; }
.rack-ups-brand strong { display: grid; width: 29px; height: 23px; flex: 0 0 auto; place-items: center; color: #15242a; background: linear-gradient(145deg,#f0c664,#bd8d36); border: 1px solid #e2bd66; border-radius: 3px; box-shadow: 0 1px 2px #10191d; font-size: 9px; letter-spacing: .5px; }
.rack-ups-brand span { color: #aab9be; font-size: 5px; font-weight: 800; line-height: 1.25; letter-spacing: .5px; }
.rack-ups-screen { display: grid; min-width: 0; grid-template-columns: 1fr auto; align-items: center; gap: 1px 4px; padding: 3px 5px; color: #a6e5a9; background: linear-gradient(180deg,#0e1c1d,#152c2b); border: 2px solid #78888a; border-radius: 3px; box-shadow: inset 0 0 7px rgba(74,204,130,.18), 0 1px 1px #12191c; }
.rack-ups-screen-label { color: #759e85; font-size: 5px; font-weight: 800; letter-spacing: .6px; }
.rack-ups-screen strong { grid-row: span 2; font-family: ui-monospace,monospace; font-size: 13px; line-height: 1; }
.rack-ups-screen strong span { padding-left: 1px; font-size: 6px; }
.rack-ups-screen small { color: #82bf8b; font-size: 5px; font-weight: 800; letter-spacing: .5px; }
.rack-ups-battery { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 3px; }
.rack-ups-battery i { position: relative; width: 9px; height: 19px; background: linear-gradient(90deg,#1b262a,#66747a 45%,#2b373c); border: 1px solid #849297; border-radius: 2px; box-shadow: inset 0 1px rgba(255,255,255,.2); }
.rack-ups-battery i::before { position: absolute; top: -3px; left: 2px; width: 3px; height: 2px; background: #9ba9ad; content: ""; }
.rack-ups-status { display: flex; min-width: 0; justify-content: space-around; gap: 4px; color: #9bacb0; font-size: 5px; font-weight: 800; }
.rack-ups-status span { display: grid; justify-items: center; gap: 3px; }
.rack-ups-status i { width: 5px; height: 5px; background: #76d790; border: 1px solid #a6efb8; border-radius: 50%; box-shadow: 0 0 5px rgba(99,230,131,.55); }
.rack-ups-status span:nth-child(2) i { background: #d2b568; border-color: #f2d68b; box-shadow: 0 0 4px rgba(225,193,109,.38); }
.rack-ups-status span:nth-child(3) i { background: #67bce0; border-color: #9be1ff; box-shadow: 0 0 4px rgba(104,197,238,.4); }
.rack-ups-vents { display: grid; min-width: 0; grid-template-columns: repeat(6,minmax(2px,1fr)); gap: 3px; padding: 4px; background: linear-gradient(180deg,#202b30,#344148); border: 1px solid #59686e; border-radius: 2px; }
.rack-ups-vents i { height: 10px; background: linear-gradient(90deg,#111a1e,#8b999c 48%,#1a2428); border-radius: 1px; box-shadow: 0 0 1px #aeb9bc; }
.rack-ups-network { display: grid; min-width: 0; align-content: center; gap: 2px; }
.rack-ups-network > span { color: #9bacb0; font-size: 5px; font-weight: 800; letter-spacing: .4px; }
.rack-equipment-item .rack-ups-port-bank { width: 100%; grid-template-columns: repeat(var(--rack-port-columns, 1), minmax(0, 1fr)); grid-auto-rows: auto; gap: 2px; }
.rack-equipment-item .rack-ups-port-bank .rack-port { width: 100%; height: auto; aspect-ratio: 1; font-size: 5px; }
.rack-ups-controls { position: absolute; bottom: 5px; left: 7px; display: flex; justify-content: flex-end; gap: 4px; }
.rack-ups-controls i { width: 8px; height: 8px; background: radial-gradient(circle at 35% 30%,#dce6e8,#738187 52%,#263238 58%); border: 1px solid #8c9a9f; border-radius: 50%; box-shadow: 0 1px 1px #10171a; }
.rack-equipment-item[data-rack-profile="2"] .rack-ups-battery i { height: 17px; }
.rack-equipment-item[data-rack-profile="2"] .rack-ups-brand strong { width: 26px; height: 20px; font-size: 8px; }
.rack-equipment-item[data-rack-profile="3"] .rack-ups-battery i { width: 11px; height: 23px; }
.rack-equipment-item[data-rack-profile="3"] .rack-ups-battery::after { color: #9badb2; content: "BATTERY MODULE"; font-size: 5px; font-weight: 800; letter-spacing: .3px; }
.rack-equipment-item[data-rack-profile="4"] .rack-ups-battery i { width: 13px; height: 28px; }
.rack-equipment-item[data-rack-profile="4"] .rack-ups-screen strong { font-size: 16px; }
.rack-equipment-item[data-rack-profile="4"] .rack-ups-vents i { height: 17px; }
.rack-equipment-item[data-rack-profile="4"] .rack-ups-controls i { width: 10px; height: 10px; }

@media print {
  .rack-equipment-item { min-height: 0; padding: 0 2px; }
  .rack-equipment-copy strong { font-size: 7px; }
  .rack-item-action { display: none !important; }
  .rack-port { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Keep the equipment identity and actions in a header band above the ports. */
.rack-equipment-item { position: relative; }
.rack-equipment-item .rack-equipment-device { position: relative; min-width: 0; }
.rack-equipment-item .rack-equipment-copy { min-width: 0; padding-right: 30px; text-align: left; }
.rack-equipment-item .rack-equipment-copy strong { text-align: left; }
.rack-equipment-actions { position: absolute; top: 2px; right: 3px; z-index: 5; display: flex; flex-direction: column; gap: 1px; cursor: grab; }
.rack-equipment-actions:active { cursor: grabbing; }
.rack-equipment-actions .rack-item-action { min-height: 0; padding: 1px 2px; font-size: 6px; line-height: 1; }
.rack-equipment-actions .rack-item-remove { padding-right: 3px; padding-left: 3px; }

/* One-U names stay at the top-left; port faces use the full row below them. */
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-front { position: relative; display: block; min-height: 0; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-device[draggable="true"] { position: absolute; inset: 0 0 auto; display: block; width: 100%; height: 9px; min-height: 0; padding: 0 36px 0 2px; overflow: visible; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-copy { display: block; width: 100%; padding: 0; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-copy strong { overflow: hidden; font-size: 8px; line-height: 8px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.rack-equipment-item[data-rack-profile="1"] .rack-device-glyph { display: none; }
.rack-equipment-item[data-rack-profile="1"] .rack-hardware-face { position: absolute; inset: 10px 23px 0 1px; display: flex; width: auto; height: auto; min-height: 0; justify-content: center; }
.rack-equipment-item[data-rack-profile="1"] .rack-switch-face,
.rack-equipment-item[data-rack-profile="1"] .rack-patch-panel-face { justify-content: center; }
.rack-equipment-switch[data-rack-profile="1"] { --rack-port-size: 10px; }
.rack-equipment-switch[data-rack-profile="1"] .rack-switch-port-paired:not(.rack-port-bank-48) { --rack-port-size: 10px; }
.rack-equipment-switch[data-rack-profile="1"] .rack-switch-port-paired.rack-port-bank-48 { --rack-port-size: 7px; }
.rack-equipment-patch-panel[data-rack-profile="1"] .rack-patch-port-bank:not(.rack-port-bank-48) { --rack-port-size: 10px; }
.rack-equipment-patch-panel[data-rack-profile="1"] .rack-patch-port-bank.rack-port-bank-48 { --rack-port-size: 8px; }
.rack-face-compact .rack-equipment-actions { right: 2px; gap: 0; }
.rack-face-compact .rack-equipment-actions .rack-item-action { padding: 0 2px; font-size: 6px; }
.rack-mounted-cable-tray { padding-right: 48px; padding-left: 7px; cursor: grab; }
.rack-mounted-cable-tray:active { cursor: grabbing; }
.rack-mounted-cable-tray .rack-mounted-tray-slots { z-index: 0; }
.rack-mounted-cable-tray > .rack-item-action { position: absolute; top: 2px; right: 25px; left: auto; z-index: 2; min-height: 0; padding: 1px 3px; font-size: 7px; line-height: 1; }
.rack-mounted-cable-tray > .rack-item-action.rack-item-remove { right: 2px; }

/* Standalone equipment faces on the quick patch board reuse the rack hardware artwork. */
.patch-board .connection-device-face { grid-column: auto; min-height: 0; padding: 8px 10px 9px; cursor: default; border: 1px solid #a8bec6; border-radius: 8px; background: linear-gradient(90deg,#c4d2d6 0 8px,#e4ebed 8px calc(100% - 8px),#c4d2d6 calc(100% - 8px)); box-shadow: 0 3px 10px rgba(31,67,80,.1), inset 0 1px rgba(255,255,255,.8); }
.patch-board .connection-device-face.connection-wide-port-layout { grid-column: 1 / -1; }
.patch-board .connection-device-face::before, .patch-board .connection-device-face::after { top: 50%; width: 5px; height: 5px; background: #e6edef; }
.patch-board .connection-device-heading { position: relative; z-index: 1; display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 6px; }
.patch-board .connection-device-heading strong, .patch-board .connection-device-heading span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patch-board .connection-device-heading strong { color: #20485a; font-size: 12px; }
.patch-board .connection-device-heading span { color: #6d8791; font-size: 10px; }
.patch-board .connection-device-face .rack-equipment-front { display: block; height: auto; min-height: 0; }
.patch-board .connection-device-face .rack-hardware-face { min-height: 0; }
.patch-board .connection-device-face { --connection-board-port-size: 22px; }
.patch-board .connection-device-face .rack-port-strip { width: 100%; max-width: 100%; grid-template-columns: repeat(auto-fill, var(--connection-board-port-size)); grid-auto-rows: var(--connection-board-port-size); justify-content: start; align-content: start; gap: 3px; }
.patch-board .connection-device-face .rack-port-paired { grid-template-columns: repeat(var(--rack-port-columns), var(--connection-board-port-size)); grid-template-rows: repeat(2, var(--connection-board-port-size)); grid-auto-rows: var(--connection-board-port-size); grid-auto-flow: row; column-gap: 3px; }
.patch-board .connection-device-face .rack-patch-port-bank.rack-port-bank-48-single { width: max-content; grid-template-columns: repeat(48, var(--connection-board-port-size)); }
.patch-board .connection-device-face .rack-port { width: var(--connection-board-port-size); min-width: var(--connection-board-port-size); height: var(--connection-board-port-size); min-height: var(--connection-board-port-size); aspect-ratio: 1; font-size: 7px; border-radius: 3px; }
.patch-board .connection-device-face .rack-port span { position: absolute; inset: 0; display: grid; max-width: 100%; place-items: center; }
.patch-board .connection-device-face .rack-face-caption { color: #4f6c77; font-size: 9px; }
.patch-board .connection-device-face .rack-patch-panel-face, .patch-board .connection-device-face .rack-switch-face { align-items: stretch; gap: 7px; padding: 4px 8px; }
.patch-board .connection-device-face .rack-patch-panel-face { overflow-x: auto; }
.patch-board .connection-device-face .rack-switch-face::after { top: 5px; right: 7px; width: 6px; height: 6px; }
.patch-board .connection-device-face .rack-switch-port-paired { column-gap: 3px; }
.patch-board .connection-device-face .rack-core-chassis { padding: 8px; }
.patch-board .connection-device-face .rack-core-slots { gap: 8px; }
.patch-board .connection-device-face .rack-core-slot { padding: 6px; }
.patch-board .connection-device-face .rack-core-slot-label { gap: 6px; margin-bottom: 5px; font-size: 9px; }
.patch-board .connection-device-face .rack-core-slot-label strong { font-size: 10px; }
.patch-board .connection-device-face .rack-core-slot-label small { font-size: 8px; }
.patch-board .connection-device-face .rack-server-face { min-height: 60px; }
.patch-board .connection-device-face .rack-server-network { flex: 0 1 auto; min-width: 0; }
.patch-board .connection-device-face .rack-server-port-bank { width: 100%; }
.patch-board .connection-device-face.rack-equipment-computer .rack-server-face { display: grid; min-height: 60px; grid-template-columns: minmax(0, 1fr) minmax(128px, .42fr); gap: 7px; padding: 5px; }
.patch-board .connection-device-face.rack-equipment-computer .rack-server-chassis { display: grid; min-height: 0; grid-template-rows: auto 1fr; align-items: stretch; padding: 4px 7px; }
.patch-board .connection-device-face.rack-equipment-computer .rack-server-header { min-height: 18px; font-size: 8px; letter-spacing: .7px; }
.patch-board .connection-device-face.rack-equipment-computer .rack-server-status { font-size: 6px; }
.patch-board .connection-device-face.rack-equipment-computer .rack-server-details { grid-template-columns: minmax(48px,.55fr) minmax(0,1fr); gap: 7px; }
.patch-board .connection-device-face.rack-equipment-computer .rack-server-drive-bays i { height: 17px; }
.patch-board .connection-device-face.rack-equipment-computer .rack-server-network { gap: 4px; padding: 4px 6px; }
.patch-board .connection-device-face.rack-equipment-computer .rack-server-network-label { font-size: 7px; letter-spacing: .8px; }

@media (max-width: 640px) {
  .patch-board .connection-device-face .rack-core-slots { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .patch-board .connection-device-face .rack-port-strip { grid-template-columns: repeat(auto-fill, var(--connection-board-port-size)); grid-auto-rows: var(--connection-board-port-size); gap: 3px; }
}