/* 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 { position: relative; background: #e3e7e5; border-color: #b8c0bc; }
.rack-port-faulty { position: relative; color: #a71919; background: #fff0ef; border-color: #c93434; box-shadow: inset 0 0 0 1px rgba(201,52,52,.18); }
.rack-port-investigate { position: relative; color: #8a5a00; background: #fff6df; border-color: #c98a12; box-shadow: inset 0 0 0 1px rgba(201,138,18,.2); }
.rack-port-status-mark { position: absolute; inset: -2px 0 0; z-index: 4; display: grid; place-items: center; color: #c52222; font-size: 1.65em; font-weight: 900; line-height: 1; text-shadow: 0 1px #fff; pointer-events: none; }
.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: 0; padding: 0; background: transparent; border: 0; 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 { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--rack-module-rows, 0), minmax(0, 1fr)) minmax(0, 1fr); gap: 3px; padding: 3px; background: linear-gradient(#e4ebed,#cdd9dd); border: 1px solid #a6b8bf; border-radius: 3px; }
.rack-core-slots { display: grid; grid-template-rows: repeat(var(--rack-module-rows), minmax(0, 1fr)); gap: 4px; min-height: 0; }
.rack-core-module-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; min-height: 0; }
.rack-core-slot { position: relative; min-width: 0; min-height: 0; }
.rack-core-head { display: grid; min-width: 0; grid-template-columns: minmax(82px, .28fr) minmax(0, 1fr); align-items: center; gap: 5px; padding: 2px 5px; overflow: hidden; background: linear-gradient(180deg,#dce7e9,#c4d2d6); border: 1px solid #879fa7; border-radius: 3px; box-shadow: inset 0 1px rgba(255,255,255,.7); }
.rack-core-head-display { display: grid; min-width: 0; gap: 2px; color: #3e5d67; }
.rack-core-head-display > strong { overflow: hidden; font-size: 7px; letter-spacing: .4px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.rack-core-head-display > small { overflow: hidden; color: #617b84; font-size: 5px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.rack-core-head-display > span { display: flex; align-items: center; gap: 2px; color: #71868d; font-size: 5px; line-height: 1; white-space: nowrap; }
.rack-core-head-display i { width: 3px; height: 3px; background: #51c876; border-radius: 50%; box-shadow: 0 0 4px rgba(40,220,105,.8); }
.rack-core-head-display i:nth-child(2) { background: #54bada; box-shadow: 0 0 4px rgba(47,175,221,.75); }
.rack-core-head-display i:nth-child(3) { background: #e9bf4c; box-shadow: 0 0 4px rgba(233,191,76,.65); }
.rack-core-head-connections { display: flex; min-width: 0; align-items: center; gap: 5px; }
.rack-core-head-connections > .rack-port-strip { width: 100%; grid-template-columns: repeat(var(--rack-port-columns, 1), minmax(0, var(--rack-port-size))); }
.rack-core-head-uplinks { display: grid; min-width: 0; gap: 1px; color: #627d87; font-size: 5px; }
.rack-core-head-uplinks > .rack-port-strip { width: 100%; grid-template-columns: repeat(var(--rack-port-columns, 1), minmax(0, var(--rack-port-size))); }
.rack-core-slot-label { position: absolute; top: 1px; left: 2px; z-index: 4; display: flex; max-width: calc(100% - 4px); align-items: baseline; gap: 3px; padding: 0 2px; overflow: hidden; color: #496772; background: rgba(243,246,246,.82); border-radius: 1px; font-size: 6px; line-height: 1.1; pointer-events: none; white-space: nowrap; }
.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; color: #789099; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.rack-module-port-groups { position: relative; display: flex; min-width: 0; align-items: stretch; gap: 1px; padding: 1px; background: #f3f6f6; border: 1px solid #9fb2b8; border-radius: 2px; }
.rack-module-port-group { flex-basis: 0; min-width: 0; padding: 2px; background: rgba(255,255,255,.55); border-left: 1px solid #c2d0d4; }
.rack-module-port-group-label { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 3px; margin-bottom: 2px; color: #627d87; font-size: 5px; line-height: 1.1; }
.rack-module-port-group-label strong, .rack-module-port-group-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rack-module-port-group-label small { color: #789099; font-size: 4px; }
.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-port-section { display: grid; gap: 2px; margin-top: 3px; }
.rack-port-bank-caption { color: #627d87; font-size: 5px; font-weight: 700; letter-spacing: .25px; }
.rack-sfp-port-bank { grid-template-columns: repeat(var(--rack-port-columns), minmax(10px, 1fr)); }
.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: minmax(0, 1fr) 6px; min-height: 0; padding: 0; overflow: hidden; background: transparent; border: 0; box-shadow: none; }
.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; }
/* The shelf is a thin tray; its name and actions float above it on hover, focus or when it is empty. */
.rack-shelf-heading { grid-row: 2; position: relative; display: flex; min-width: 0; background: linear-gradient(#a9bcc4,#7f98a3); border: 1px solid #627f8b; border-top: 2px solid #4b6a77; border-radius: 0 0 2px 2px; }
.rack-shelf-heading > * { display: none; }
.rack-shelf-item:hover:not(:has(.rack-equipment-item:hover)) .rack-shelf-heading, .rack-shelf-item:focus-within .rack-shelf-heading, .rack-shelf-vacant .rack-shelf-heading { z-index: 7; }
.rack-shelf-item:hover:not(:has(.rack-equipment-item:hover)) .rack-shelf-heading > *, .rack-shelf-item:focus-within .rack-shelf-heading > *, .rack-shelf-vacant .rack-shelf-heading > * { display: block; }
.rack-shelf-item:hover:not(:has(.rack-equipment-item:hover)) .rack-shelf-heading strong, .rack-shelf-item:focus-within .rack-shelf-heading strong, .rack-shelf-vacant .rack-shelf-heading strong { position: absolute; right: 74px; bottom: 7px; max-width: 45%; padding: 1px 6px; background: #f4f8f9; border: 1px solid #a9bcc4; border-radius: 4px; }
.rack-shelf-item:hover:not(:has(.rack-equipment-item:hover)) .rack-shelf-heading > span, .rack-shelf-item:focus-within .rack-shelf-heading > span, .rack-shelf-vacant .rack-shelf-heading > span { position: absolute; right: 56px; bottom: 9px; }
.rack-shelf-item:hover:not(:has(.rack-equipment-item:hover)) .rack-shelf-heading .rack-item-action, .rack-shelf-item:focus-within .rack-shelf-heading .rack-item-action, .rack-shelf-vacant .rack-shelf-heading .rack-item-action { position: absolute; bottom: 7px; min-height: 0; padding: 1px 6px; font-size: 9px; line-height: 1.3; }
.rack-shelf-heading strong, .rack-shelf-heading > span { pointer-events: none; }
.rack-shelf-heading .rack-item-action:not(.rack-item-remove) { right: 22px; }
.rack-shelf-heading .rack-item-remove { right: 2px; }
.rack-shelf-item .rack-shelf-heading .rack-item-action:focus-visible { display: block; }
.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; }
/* Stacks keep their real width; the spare width is shared evenly around them, so one device sits centred. */
.rack-shelf-contents { grid-row: 1; display: flex; align-items: end; justify-content: space-evenly; gap: 0; min-width: 0; min-height: 0; padding: 0 7px; border-right: 2px solid #8aa0aa; border-left: 2px solid #8aa0aa; }
.rack-shelf-item .rack-shelf-mounted { position: relative; min-height: 0; max-height: 100%; margin: 0; border-radius: 3px 3px 0 0; }
.rack-shelf-item .rack-shelf-mounted.rack-shelf-upright { flex: 0 1 33.333%; min-width: 0; max-width: 33.333%; height: 100%; }
.rack-shelf-item .rack-shelf-mounted.rack-shelf-flat { flex: 1 1 100%; height: min(100%, var(--rack-unit-height, 32px)); }
.rack-shelf-item { cursor: grab; }
.rack-shelf-stack { display: flex; min-width: 0; height: 100%; flex-direction: column-reverse; align-items: center; justify-content: flex-start; }
.rack-shelf-item .rack-shelf-stack > .rack-equipment-item { flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 0; }
.rack-shelf-item .rack-shelf-stack > .rack-equipment-item + .rack-equipment-item { border-radius: 3px; }
.rack-shelf-stack .template-equipment-face { height: 100%; aspect-ratio: auto; }
.rack-shelf-item .rack-shelf-mounted .rack-equipment-front { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 1px; }
.rack-shelf-item .rack-shelf-mounted .rack-equipment-device { min-height: 0; flex-shrink: 0; }
.rack-shelf-item .rack-shelf-mounted .rack-hardware-face { flex: 1; min-height: 0; }
.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: 0; }
.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 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:not(.rack-port-status-mark) { 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; }

/* Reserve one unit for the chassis and one for each pair of modules. */
.rack-grid .rack-equipment-core-switch:not(.rack-template-equipment) .rack-equipment-device { flex: 0 0 calc(var(--rack-unit-height, 32px) - 5px); min-height: 0; }
.rack-grid .rack-equipment-core-switch .rack-module-port-bank { width: 100%; grid-template-columns: repeat(var(--rack-port-columns), minmax(0, var(--rack-port-size))); align-content: start; }
.rack-grid .rack-equipment-core-switch .rack-module-port-bank .rack-port { width: 100%; }

/* Modular core switches are drawn like template hardware: a steel face with dark sockets, a head unit
   and darker line cards, in the rack and on the Connections board. */
.rack-equipment-item.rack-equipment-core-switch:not(.rack-shelf-mounted) { background: linear-gradient(90deg,#aebfc5 0 6px,#d5e0e4 6px calc(100% - 6px),#aebfc5 calc(100% - 6px)); }
.rack-equipment-item .rack-core-chassis, .rack-core-chassis { gap: 2px; padding: 2px; background: #d5e0e4; }
.rack-core-chassis .rack-core-head { background: linear-gradient(180deg,#cbd8dc,#bccbd0); border: 1px solid #9fb2b8; border-radius: 2px; }
.rack-core-chassis .rack-core-head-display { color: #17282f; }
.rack-core-chassis .rack-core-head-display > strong { font-size: 8px; letter-spacing: .2px; }
.rack-core-chassis .rack-core-head-display > small { color: #44606a; font-size: 6px; }
.rack-core-chassis .rack-core-head-display > span, .rack-core-chassis .rack-core-head-uplinks { color: #4e6a74; }
.rack-equipment-item .rack-core-chassis .rack-core-slot, .rack-core-chassis .rack-core-slot { background: transparent; border-radius: 2px; }
.rack-core-chassis .rack-module-port-groups { height: 100%; padding: 9px 2px 2px; background: linear-gradient(180deg,#bfcdd2,#b2c2c8); border-color: #8fa4ac; }
.rack-core-chassis .rack-module-port-group { background: transparent; border-left: 1px solid #9fb2b8; }
.rack-core-chassis .rack-module-port-group-label { color: #2f4a54; }
.rack-core-chassis .rack-module-port-group-label small { color: #4e6a74; }
.rack-core-chassis .rack-core-slot-label { color: #17282f; background: transparent; }
.rack-core-chassis .rack-core-slot-label > span { color: #2f6f86; }
.rack-core-chassis .rack-core-slot-label small { color: #4e6a74; }
.rack-core-chassis .rack-port { color: #f4f7f8; background: #15262c; border-color: #6b8089; }
.rack-core-chassis .rack-port-connected { border-color: var(--cable-color, #168aad); box-shadow: inset 0 0 0 1px var(--cable-color, #168aad); }
.rack-core-chassis .rack-port-free:hover, .rack-core-chassis .rack-port-selected { color: #fff; background: #0785a8; border-color: #056884; }
.rack-core-chassis .rack-port-faulty { border-color: #e04848; }
.rack-core-chassis .rack-port-investigate { border-color: #d89a1c; }
.rack-core-chassis .rack-port-reserved, .rack-core-chassis .rack-port-disabled { color: #b8c6cb; background: #3a4b51; }
.rack-core-chassis .rack-port .rack-port-status-mark { color: #ff5a5a; text-shadow: none; }
.rack-core-chassis .rack-port .rack-port-status-mark.rack-port-status-investigate { color: #f2b13a; }
/* In a rack each pair of line cards has one unit: the slot name becomes a tag on the card's left and
   group names stay in the board view and port labels, so both port rows fit. */
.rack-grid .rack-core-chassis .rack-module-port-groups { padding: 2px 2px 1px 24px; }
.rack-grid .rack-core-chassis .rack-core-slot-label { top: 50%; left: 2px; display: grid; width: 20px; gap: 0; padding: 0; transform: translateY(-50%); }
.rack-grid .rack-core-chassis .rack-core-slot-label > span { font-size: 6px; }
.rack-grid .rack-core-chassis .rack-core-slot-label strong { font-size: 5px; }
.rack-grid .rack-core-chassis .rack-core-slot-label small, .rack-grid .rack-core-chassis .rack-module-port-group-label { display: none; }
.rack-grid .rack-core-chassis .rack-module-port-group { display: flex; align-items: flex-start; padding: 1px 2px; }
/* The board has no U rows to fill: the head unit takes only the height it needs, and slot names sit above the port groups. */
.patch-board .connection-device-face .rack-core-chassis { grid-template-rows: auto; }
.patch-board .connection-device-face .rack-core-head { padding: 6px 8px; }
.patch-board .connection-device-face .rack-core-head-display > strong { font-size: 12px; }
.patch-board .connection-device-face .rack-core-head-display > small, .patch-board .connection-device-face .rack-core-head-display > span { font-size: 9px; }
.patch-board .connection-device-face .rack-core-chassis .rack-module-port-groups { padding-top: 22px; }

/* 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; }


/* 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; }

/* 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-mounted-cable-tray { padding: 3px 7px; cursor: grab; }
.rack-mounted-cable-tray:active { cursor: grabbing; }
.rack-mounted-cable-tray .rack-mounted-tray-slots { z-index: 0; }

/* 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: 26px; }
.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 { top: 5px; left: 8px; gap: 6px; padding: 2px 4px; 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-module-port-groups { gap: 6px; overflow-x: auto; }
.patch-board .connection-device-face .rack-module-port-group { flex-basis: auto; flex-shrink: 0; padding: 5px; }
.patch-board .connection-device-face .rack-module-port-bank { grid-template-columns: repeat(var(--rack-port-columns), var(--connection-board-port-size)); }
.patch-board .connection-device-face .rack-module-port-group-label { gap: 6px; margin-bottom: 4px; font-size: 8px; }
.patch-board .connection-device-face .rack-module-port-group-label small { font-size: 7px; }
.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; }
}

/* Give every rack port, including template-backed ports, one consistent target size. */
#rack-face .rack-equipment-item { --rack-port-size: 12px; }
#rack-face .rack-port { width: 12px; min-width: 12px; max-width: 12px; height: 12px; min-height: 12px; justify-self: center; font-size: 7px; }

/* Custom definitions use one coordinate system in racks, connections, and print. */
.template-equipment-face { position: relative; width: 100%; min-width: 0; overflow: hidden; border-radius: 4px; background: #d5e0e4; }
.template-equipment-face > svg { display: block; width: 100%; height: 100%; }
.template-port-anchor { position: absolute; }
.template-port-anchor .rack-port { position: relative; display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; place-items: center; padding: 0; overflow: hidden; color: #f4f7f8; background: #15262c; border: 1px solid #6b8089; border-radius: 2px; box-shadow: none; font-size: 5px; }
.template-port-anchor .rack-port span { color: inherit; font-size: inherit; text-shadow: none; }
.template-port-anchor .rack-port .rack-port-status-mark { position: absolute; inset: -2px 0 0; z-index: 4; color: #e63e3e; font-size: 1.65em; line-height: 1; text-shadow: none; }
.rack-port-status-mark.rack-port-status-investigate, .template-port-anchor .rack-port .rack-port-status-mark.rack-port-status-investigate { color: #b7790f; }
.template-port-theme-light .rack-port { color: #17282f; background: #f4f7f8; border-color: #8c9ca3; }
.template-port-anchor .rack-port-connected { border-color: var(--cable-color, #168aad); box-shadow: inset 0 0 0 1px var(--cable-color, #168aad); }
.template-port-anchor .rack-port-selected, .template-port-anchor .rack-port:focus-visible { outline: 2px solid #0785a8; outline-offset: 1px; }
.template-port-anchor .rack-port:hover { border-color: #0785a8; }
.rack-template-equipment .rack-equipment-front { display: flex; min-height: 0; flex-direction: column; gap: 1px; }
.rack-template-equipment .rack-equipment-device { flex-shrink: 0; min-height: 9px; }
.rack-template-equipment .template-equipment-face { flex: 1; min-height: 0; }
.connection-device-face.rack-template-equipment .template-equipment-face { flex: none; }
.rack-shelf-item .rack-template-equipment .rack-equipment-front { display: flex; }

/* Built-in equipment identity is drawn over the face so it uses no extra rack height. */
.rack-hardware-artwork { position: relative; display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; }
.rack-hardware-artwork > .rack-hardware-face { width: 100%; height: 100%; }
.rack-equipment-meta { position: absolute; top: 2px; right: 28px; left: 5px; z-index: 4; display: flex; min-width: 0; align-items: baseline; gap: 5px; overflow: hidden; color: #f5fafb; text-shadow: 0 1px 2px #14262bcc; pointer-events: none; }
.rack-equipment-meta strong, .rack-equipment-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rack-equipment-meta strong { flex: 0 1 auto; max-width: 52%; font-size: 7px; line-height: 1; }
.rack-equipment-meta span { color: #eef5f6; font-size: 5px; line-height: 1; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-front { position: relative; display: flex; height: 100%; min-height: 0; flex-direction: row; align-items: center; gap: 0; }
.rack-equipment-item[data-rack-profile="1"] .rack-hardware-artwork { position: relative; width: 100%; height: 100%; flex: 1 1 auto; }
.rack-equipment-item[data-rack-profile="1"] .rack-hardware-face { position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; padding: 0 1px; border: 0; background: transparent; box-shadow: none; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-meta { top: 1px; right: 26px; left: 3px; gap: 3px; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-meta strong { font-size: 6px; }
.rack-equipment-item[data-rack-profile="1"] .rack-equipment-meta span { font-size: 4px; }
.rack-shelf-item .rack-shelf-mounted .rack-hardware-artwork { width: 100%; height: 100%; }
.rack-shelf-item .rack-shelf-mounted .rack-equipment-meta { top: 2px; right: 3px; left: 3px; }
.patch-board .connection-device-face .rack-hardware-artwork { display: flex; width: 100%; min-height: 0; flex: none; }
.patch-board .connection-device-face .rack-equipment-meta { top: 3px; right: 10px; left: 10px; gap: 8px; color: #f5fafb; }
.patch-board .connection-device-face .rack-equipment-meta strong { font-size: 10px; }
.patch-board .connection-device-face .rack-equipment-meta span { font-size: 8px; }

/* Rack rails provide the frame; keep a generic case from shrinking each device face. */
.rack-grid .rack-equipment-item:not(.rack-shelf-mounted) { min-height: 0; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.rack-grid .rack-equipment-item:not(.rack-shelf-mounted)::before,
.rack-grid .rack-equipment-item:not(.rack-shelf-mounted)::after { display: none; content: none; }
.rack-workbench { margin: 10px 0 18px; padding: 14px; border: 1px solid #87b4c5; border-radius: 8px; background: #f5fafc; }
.rack-workbench[hidden] { display: none; }
.rack-workbench > header { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.rack-workbench > header .field { flex: 1; max-width: 480px; }
.rack-workbench > p { font-size: 13px; color: #456371; }
.rack-workbench-face { overflow-x: auto; padding: 12px 0; }
.rack-workbench-face > .connection-device-face { min-width: 1000px; width: 100%; }
.rack-workbench-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.rack-workbench-ports { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 7px; }
.rack-work-port { display: grid; gap: 3px; }
.rack-work-port-select { display: grid; gap: 4px; padding: 10px; min-height: 74px; border: 1px solid #b7ccd5; border-radius: 6px; text-align: left; background: white; color: #254b5d; cursor: pointer; }
.rack-work-port-select strong { font-size: 15px; }
.rack-work-port-select span, .rack-work-port-select small { font-size: 12px; }
.rack-work-port-select.selected { outline: 3px solid #0785a8; }
.rack-work-port-select:focus-visible { outline: 3px solid #0785a8; }
.rack-drop-preview { z-index: 25; display: flex; align-items: center; justify-content: center; padding: 5px; border: 2px solid #07856b; color: #064c3d; background: #b1f2dbd9; font-size: 12px; font-weight: 700; pointer-events: none; box-shadow: 0 0 0 1px white; }
.rack-drop-preview.invalid { border-color: #b43838; color: #7c2222; background: #ffd9d9df; }
#rack-face[aria-busy=true] { cursor: progress; }
.rack-pointer-dragging { pointer-events: none; }
#rack-face .rack-equipment-item, #rack-face .rack-mounted-cable-tray, .rack-available-item { touch-action: none; }