/* Domain centre sub-tabs (IP Ranges / IP Address / Ports) */
.dom-tab{padding:5px 12px;font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;
  border:1px solid var(--border);border-bottom:none;border-radius:5px 5px 0 0;background:var(--surface2);}
.dom-tab.active{color:var(--accent);background:var(--surface);border-bottom:2px solid var(--accent);}

/* DdfOdf centre-panel grids (Details + Related Shelves) */
.ddf-table{width:100%;border-collapse:collapse;font-size:11px;}
.ddf-table thead th{position:sticky;top:0;background:var(--surface2);text-align:left;
  padding:7px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text3);border-bottom:2px solid var(--border);white-space:nowrap;z-index:1;}
.ddf-table tbody td{padding:6px 10px;border-bottom:1px solid var(--border);
  color:var(--text);white-space:nowrap;vertical-align:middle;}
.ddf-table tbody tr:nth-child(even){background:var(--surface2);}
.ddf-table tbody tr:hover{background:rgba(0,147,165,.10);}
.ddf-table td.wrap{white-space:normal;min-width:150px;}
.ddf-table td.ell{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ddf-table td.ctr{text-align:center;}
.ddf-grid-title{padding:7px 12px;background:var(--surface);border-bottom:1px solid var(--border);
  font-weight:700;color:var(--text2);font-size:12px;flex-shrink:0;}
.ddf-grid-title.top{border-top:1px solid var(--border);}
.ddf-grid-scroll{overflow:auto;min-height:0;}

/* Domain view's IP Ranges grid -- a second thead row under the column
   headers holding the Name column's filter box (domain-view.js). Its own
   sticky/top offset (rather than the base ".ddf-table thead th{top:0}" rule)
   is needed so it pins directly below the header row instead of both rows
   fighting to stick to the very top of the scroll container; the extra
   class + row selector gives this enough specificity to win over that rule.
   29px matches the rendered header row height (7px+7px padding + ~14px text
   line height) -- confirmed via a headless-browser measurement. */
.ddf-table thead tr.ddf-filter-row th{
  position:sticky;top:29px;background:var(--surface);
  padding:4px 8px;border-bottom:1px solid var(--border);z-index:2;
}
.dom-filter-input{
  /* min-width, not just width:100% -- without it, a column whose data rows
     are all short (e.g. IpAddress) auto-sizes narrow (this table has no
     table-layout:fixed), shrinking the filter box down with it until its
     own placeholder/typed text gets clipped. The min-width forces the
     column itself wide enough to keep the input fully readable. */
  width:100%;min-width:130px;box-sizing:border-box;font-size:11px;padding:3px 6px;
  border:1px solid var(--border);border-radius:4px;
  background:var(--surface);color:var(--text);outline:none;
}
.dom-filter-input:focus{border-color:var(--accent);}

/* CableRoute column's 👁 button — opens the Cable Route diagram (see
   cable-route-modal.js); click handler lives in ddf-odf-view.js. */
.cable-route-btn{
  background:none;border:1px solid var(--border);border-radius:5px;
  color:var(--text2);font-size:13px;line-height:1;padding:3px 7px;cursor:pointer;
}
.cable-route-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--surface2);}

/* ── Cable Route diagram (Details grid's CableRoute 👁 button popup) ────────
   A vertical chain: [site/panel box] -> [cable/circuit edge text] -> [next
   box] -> ... -> optionally a terminal equipment box. Matches legacy IMS's
   own "Cable Route" popup layout (green outlined boxes, cable text between
   them) — see routes/adapter.py's adapter_ddfodf_cable_route() docstring for
   what feeds each field. */
.modal-card.cable-route{max-width:520px;max-height:82vh;}
.cr-diagram{display:flex;flex-direction:column;font-size:12px;}
.cr-loading, .cr-error{color:var(--text3);font-size:12.5px;padding:20px;text-align:center;}
.cr-error{color:var(--red);}

.cr-node{
  display:flex;align-items:flex-start;gap:8px;
  border:1.5px solid #16a34a;border-radius:6px;padding:8px 12px;
  background:rgba(22,163,74,.06);
}
.cr-node-equip{border-color:var(--purple);background:var(--purple-light);}
.cr-dot{width:16px;height:16px;border-radius:50%;background:#16a34a;flex-shrink:0;margin-top:2px;}
.cr-dot-equip{background:var(--purple);}
.cr-node-line1{color:var(--text2);font-size:11.5px;}
.cr-node-line2{color:var(--text);font-weight:600;}

.cr-edge{display:flex;gap:10px;padding:6px 0 6px 18px;}
.cr-edge-line{width:2px;background:var(--border);flex-shrink:0;margin-left:6px;}
.cr-edge-text{display:flex;flex-direction:column;gap:2px;color:var(--text2);font-size:11.5px;line-height:1.5;}
.cr-edge-port{color:var(--text);font-weight:600;font-size:12px;}
.cr-edge-maincable{color:var(--text2);}
.cr-edge-cable{display:flex;align-items:center;gap:5px;}
.cr-cable-icon{color:var(--text3);font-size:9px;letter-spacing:-1px;}
.cr-edge-cable-plain{color:var(--text2);}
.cr-edge-length{color:var(--text3);}
.cr-edge-sub{color:var(--text2);}
.cr-edge-backpanel{color:var(--text);font-weight:600;}
.cr-edge-farend{color:var(--text);font-weight:600;}