/* RackTrack styling: compact, panel-based look similar to classic DCIM tools */
body {
    font-size: 13px;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

.rt-navbar { padding-top: .35rem; padding-bottom: .35rem; }
.rt-navbar .nav-link { font-size: 13px; color: #555; }

/* Dropdown with + / import buttons beside each entry (Devices menu) */
.rt-menu { min-width: 230px; font-size: 13px; }
.rt-menu .dropdown-header { font-size: 11px; text-transform: none; color: #888; padding-top: 2px; }
.rt-menu-item { display: flex; align-items: center; padding-right: 10px; }
.rt-menu-item .dropdown-item { flex: 1; font-size: 13px; padding-top: 3px; padding-bottom: 3px; }
.rt-menu-actions { display: flex; gap: 3px; }
.rt-menu-actions .btn-xs { padding: 0 6px; font-size: 11px; line-height: 18px; }
.rt-brand { font-weight: 600; color: #1e88e5 !important; font-size: 20px; }
.rt-brand i { color: #1e88e5; }

.rt-breadcrumb { background: #f5f5f5; border-radius: 4px; padding: 8px 12px; }
.rt-breadcrumb .breadcrumb-item a { text-decoration: none; }

h1.rt-title { font-size: 30px; font-weight: 400; margin-bottom: 4px; }
.rt-meta { font-size: 11px; color: #777; }

.rt-tabs { margin-top: 16px; margin-bottom: 16px; }
.rt-tabs .nav-link { font-size: 13px; padding: 8px 12px; }

.card { border-color: #ddd; margin-bottom: 18px; border-radius: 4px; }
.card > .card-header { background: #f5f5f5; font-weight: 600; padding: 9px 12px; border-color: #ddd; }
.card > .card-footer { background: #f5f5f5; text-align: right; padding: 6px 12px; }
.card .table { margin-bottom: 0; }

.attr-table th { font-weight: 400; width: 25%; color: #222; }
.attr-table td, .attr-table th { padding: 7px 8px; vertical-align: middle; }
.table { font-size: 13px; }
.table a { text-decoration: none; }
.table-sm td, .table-sm th { padding: 6px 8px; }

.btn-xs { padding: 1px 6px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.text-none { color: #999; }

.cable-swatch {
    display: inline-block; width: 14px; height: 14px; border: 1px solid #aaa;
    vertical-align: middle; border-radius: 2px;
}
tr.connected > td { background: #dff0d8 !important; }
tr.ip-row > td { background: #fafafa; font-size: 12px; }
.rt-tab-card { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
tr.planned > td { background: #fcf8e3 !important; }
.rt-iface-table td, .rt-iface-table th { padding: 6px 8px; }
.rt-iface-table thead th { border-bottom: 2px solid #ddd; }
.rt-iface-table .btn-xs { margin-left: 2px; }

/* Cable trace */
.rt-trace-cable { display: flex; align-items: center; gap: 14px; min-height: 90px; padding-left: calc(50% - 4px); }
.rt-trace-line { width: 8px; align-self: stretch; background: var(--cable-color); border: 1px solid rgba(0,0,0,.25); border-radius: 2px; }
.rt-trace-info { font-size: 13px; }
.nav-tabs .nav-link { font-size: 13px; }

.rt-comments p:last-child { margin-bottom: 0; }

/* Rack elevation: PDU gutter | dark frame with U rails | PDU gutter, same width on both faces */
.rt-rack { display: flex; justify-content: center; align-items: stretch; gap: 4px; }
.rt-pdu-gutter { display: flex; gap: 4px; flex: 0 0 auto; }
.rt-rack-frame { flex: 0 1 320px; min-width: 0; background: #2b3035; border-radius: 6px; padding: 8px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 0 0 1px #1c1f23; }
.rack-elevation { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; table-layout: fixed; }
.rack-elevation td { height: 22px; padding: 0 6px; border: 0; }
.rack-elevation td.u { width: 34px; padding: 0; text-align: center; font-size: 10px; color: #adb5bd; background: #2b3035;
    border-bottom: 1px solid #383e44; font-variant-numeric: tabular-nums; }
.rack-elevation td.u a { color: inherit; text-decoration: none; display: block; line-height: 21px; }
.rack-elevation td.empty { background: #f1f3f5; border-bottom: 1px solid #dee2e6; text-align: center; }
.rack-elevation tr:last-child td.empty { border-bottom-color: transparent; }
.rack-elevation td.device { text-align: center; color: #fff; font-size: 11px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3); }
.rack-elevation td.device a { color: #fff; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.rack-elevation td.device.multi { white-space: normal; word-break: break-all; line-height: 1.25; }
.rack-elevation td.device:hover { filter: brightness(1.08); }
.rack-elevation td.device.other-face { opacity: .45; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.rack-elevation .rt-add-u { display: block; line-height: 21px; opacity: 0; color: #198754; text-decoration: none; font-size: 11px; }
.rack-elevation tr.rt-free-u:hover td.empty { background: #d1e7dd; }
.rack-elevation tr.rt-free-u:hover .rt-add-u { opacity: 1; }
.rack-elevation tr.rt-free-u:hover td.u a { color: #75b798; font-weight: 700; }

/* Vertical 0U PDU beside the elevation */
.rt-pdu { flex: 0 0 26px; display: flex; flex-direction: column; border: 2px solid #9e9e9e; border-radius: 4px; background: #37474f; overflow: hidden; }
.rt-pdu-spacer { flex: 0 0 26px; }
.rt-pdu-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; color: #fff; text-decoration: none; padding: 4px 0;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 45%; text-shadow: 0 0 2px rgba(0,0,0,.5); }
.rt-pdu-outlets { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 4px 0; }
.rt-socket { display: block; width: 14px; height: 10px; border-radius: 2px; background: #cfd8dc; border: 1px solid #263238; }
.rt-socket.big { width: 18px; height: 12px; }
.rt-socket.round { width: 13px; height: 13px; border-radius: 50%; }
.rt-socket.used { background: #66bb6a; }

.stat-card { text-decoration: none; }

/* Utilisation bar with the percentage centred on top (rack list) */
.rt-util { position: relative; height: 18px; background: #eee; }
.rt-util > span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 18px; color: #222; }
.stat-card .display-6 { font-size: 28px; }

.rt-footer { background: #f5f5f5; }

/* Servers landing page */
body.rt-bg-soft { background: #f4f5f8; }
body.rt-bg-soft .card { border-color: #e5e7eb; border-radius: 10px; overflow: hidden; }
.rt-subnav { background: #fff; }
.rt-subnav .nav-link { color: #555; padding: 12px 14px; border-bottom: 2px solid transparent; font-size: 14px; }
.rt-subnav .nav-link:hover { color: #1e88e5; }
.rt-subnav .nav-link.active { color: #1e88e5; border-bottom-color: #1e88e5; }
.rt-page-title { font-size: 24px; font-weight: 700; margin: 8px 0 2px; }

.rt-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 991px) { .rt-stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .rt-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.rt-stat {
    display: flex; align-items: center; gap: 14px; padding: 16px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s, border-color .15s;
}
.rt-stat:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); border-color: #c7d2fe; }
.rt-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; flex: none; }
.rt-stat-number { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; }
.rt-stat-label { display: block; font-size: 12px; color: #6b7280; }
.login-box { max-width: 360px; margin: 10vh auto; }