/* ── Reset ── */
.hl *, .hl-overlay *, .hl-confirm * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hl {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--foreground);
}

/* ── Header ── */
.hl-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.hl-header-info { flex: 1; min-width: 20em; }
.hl-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
}
.hl-subtitle {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 3px;
}
.hl-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Buttons ── */
.hl-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity var(--hover-duration), background var(--hover-duration), filter var(--hover-duration);
  white-space: nowrap;
  line-height: 1;
  background: transparent !important;
  color: var(--foreground) !important;
  text-decoration: none;
}
.hl-btn:hover { opacity: .75; }

.hl-btn-primary {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
}
.hl-btn-primary:hover { opacity: 1; filter: brightness(1.1); }

.hl-btn-ghost {
  background: var(--secondary) !important;
  color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
}
.hl-btn-ghost:hover {
  opacity: 1;
  background: var(--primary-foreground) !important;
  color: var(--primary) !important;
}

.hl-btn-danger {
  background: transparent !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
  border: 1px solid var(--danger) !important;
}
.hl-btn-danger:hover {
  opacity: 1;
  background: color-mix(in oklch, var(--danger) 30%, transparent)!important;
}

.hl-btn-warning {
  background: transparent;
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
}
.hl-btn-warning:hover {
  opacity: 1;
  background: color-mix(in oklch, var(--warning) 30%, transparent);
}

.hl-btn-success {
  background: transparent;
  color: var(--success);
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
}
.hl-btn-success:hover {
  opacity: 1;
  background: color-mix(in oklch, var(--success) 30%, transparent);
}

.hl-btn-sm { padding: 4px 10px; font-size: 11px; border-radius: var(--radius-sm); }
.hl-btn-xs { padding: 2px 7px;  font-size: 10px; border-radius: var(--radius-xs); }

/* ── Dirty banner ── */
.hl-dirty-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--warning);
  background: color-mix(in oklch, var(--warning) 10%, var(--background));
  border: 1px solid color-mix(in oklch, var(--warning) 30%, transparent);
  border-radius: var(--radius-sm);
}
.hl-dirty-banner span { flex: 1; }

/* ── Tabs (top-level filter) ── */
.hl-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.hl-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 11px;
  background: var(--card) !important;
  color: var(--muted-foreground) !important;
  border: 1px solid transparent;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
  letter-spacing: var(--tracking-normal);
}
.hl-tab:hover {
  color: var(--foreground);
  border-color: var(--border);
  background: var(--secondary);
}
.hl-tab.active {
  background: var(--primary-foreground)  !important;
  color: var(--foreground);
  border-color: var(--border);
}
.hl-tab-count {
  display: inline-block;
  background: var(--muted);
  color: var(--muted-foreground);
  border-radius: 3px;
  padding: 0 5px;
  font-size: 10px;
}
.hl-tab.active .hl-tab-count {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* ── Toolbar / Search ── */
.hl-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}
.hl-search-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.hl-search-icon {
  position: absolute;
  left: 10px;
  color: var(--muted-foreground);
  font-size: 11px;
  pointer-events: none;
}
.hl-search {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px 7px 30px;
  color: var(--foreground);
  outline: none;
  transition: border-color var(--hover-duration);
}
.hl-search:focus { border-color: var(--primary); }
.hl-search::placeholder { color: var(--muted-foreground); }

.hl-view-toggle { display: flex; gap: 2px; }
.hl-view-active {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}

/* ── Type badges ── */
.hl-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
  text-transform: uppercase;
}
.hl-badge-bm    { color: var(--neutral);  border-color: var(--neutral);  background: color-mix(in oklch, var(--neutral)  15%, transparent); }
.hl-badge-net   { color: var(--warning);  border-color: var(--warning);  background: color-mix(in oklch, var(--warning)  15%, transparent); }
.hl-badge-stor  { color: var(--chart-3);  border-color: var(--chart-3);  background: color-mix(in oklch, var(--chart-3)  15%, transparent); }
.hl-badge-vm    { color: var(--info);     border-color: var(--info);     background: color-mix(in oklch, var(--info)     15%, transparent); }
.hl-badge-ct    { color: var(--success);  border-color: var(--success);  background: color-mix(in oklch, var(--success)  15%, transparent); }
.hl-badge-cloud { color: var(--chart-1);  border-color: var(--chart-1);  background: color-mix(in oklch, var(--chart-1)  15%, transparent); }
.hl-badge-iot   { color: var(--chart-2);  border-color: var(--chart-2);  background: color-mix(in oklch, var(--chart-2)  15%, transparent); }
/* FIX #16 — .hl-badge-ser was missing entirely; Service type instances had no badge styling */
.hl-badge-ser   { color: var(--chart-4);  border-color: var(--chart-4);  background: color-mix(in oklch, var(--chart-4)  15%, transparent); }

/* ── Status badges ── */
.hl-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-xl);
  border: 1px solid;
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
}
.hl-status-active  { color: var(--success); border-color: var(--success); background: color-mix(in oklch, var(--success) 15%, transparent); }
.hl-status-init    { color: var(--info);    border-color: var(--info);    background: color-mix(in oklch, var(--info)    15%, transparent); }
.hl-status-free    { color: var(--neutral); border-color: var(--neutral); background: color-mix(in oklch, var(--neutral) 15%, transparent); }
.hl-status-maint   { color: var(--warning); border-color: var(--warning); background: color-mix(in oklch, var(--warning) 15%, transparent); }
.hl-status-decomm  { color: var(--danger);  border-color: var(--danger);  background: color-mix(in oklch, var(--danger)  15%, transparent); }

/* ── Chips ── */
.hl-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.hl-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.hl-chip-val {
  padding: 2px;
}

/* ── Table ── */
.hl-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.hl-table { width: 100%; border-collapse: collapse; }

/* MkDocs Material overrides */
.hl .hl-table        { display: table !important; white-space: normal !important; }
.hl .hl-table thead  { display: table-header-group !important; }
.hl .hl-table tbody  { display: table-row-group !important; }
.hl .hl-table tr     { display: table-row !important; }
.hl .hl-table th,
.hl .hl-table td     { display: table-cell !important; }

.hl-table th {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted-foreground) !important;
  padding: 8px 12px !important;
  text-align: left;
  border-bottom: 1px solid var(--border) !important;
  background: var(--card) !important;
  white-space: nowrap;
  font-weight: 600 !important;
}
.hl-table td {
  padding: 9px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle;
  font-family: var(--font-mono) !important;
}
.hl-table tr:last-child td { border-bottom: none !important; }

/* Clickable rows */
.hl-clickable-row {
  cursor: pointer;
  transition: background 0.1s;
}
.hl-clickable-row:hover td {
  background: color-mix(in oklch, var(--primary) 10%, var(--card)) !important;
}

/* ── Row avatar (alien image in table) ── */
.hl-th-avatar { width: 44px !important; padding: 0 !important; }
.hl-td-avatar { width: 44px !important; padding: 6px 8px !important; }

.hl-row-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hl-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  display: block;
}
.hl-row-avatar-icon {
  color: var(--muted-foreground);
  font-size: 13px;
  opacity: .45;
}

.hl-name-cell { display: flex; flex-direction: column; gap: 2px; }
.hl-inst-name { font-size: 10px; font-weight: 600; }
.hl-hostname  { font-size: 10px; color: var(--muted-foreground); }
.hl-ip        { font-size: 11px; color: var(--muted-foreground); }
.hl-row-actions { display: flex; gap: 4px; white-space: nowrap; }
.hl-dim       { color: var(--muted-foreground); }

/* ── Empty state ── */
.hl-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--muted-foreground);
  font-size: 12px;
}
.hl-empty-icon {
  font-size: 2rem;
  margin-bottom: .6rem;
  opacity: .25;
  display: block;
  color: var(--primary);
}

/* ── Tree ── */
.hl-tree { padding: 4px 0; }
.hl-tree-node { font-size: 12px; }
.hl-tree-root { margin-bottom: 2px; }
.hl-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  padding-left: calc(10px + var(--depth, 0) * 20px);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.hl-tree-row:hover { background: var(--card); }
.hl-tree-prefix {
  font-size: 11px;
  color: var(--border);
  font-family: var(--font-mono);
  white-space: pre;
  user-select: none;
  flex-shrink: 0;
}
.hl-tree-toggle {
  width: 18px; height: 18px;
  flex-shrink: 0;
  background: none; border: none;
  cursor: pointer;
  color: var(--muted-foreground);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  border-radius: 3px;
  padding: 0;
  transition: color 0.12s;
}
.hl-tree-toggle:hover { color: var(--foreground); }
.hl-tree-leaf  { cursor: default; }
.hl-tree-name  { font-weight: 600; flex-shrink: 0; }
.hl-tree-host  { font-size: 10px; flex-shrink: 0; color: var(--muted-foreground); }
.hl-tree-ip    { font-size: 10px; font-family: var(--font-mono); color: var(--muted-foreground); flex-shrink: 0; }
.hl-tree-count { font-size: 10px; color: var(--muted-foreground); margin-left: auto; flex-shrink: 0; }
.hl-tree-children {
  border-left: 1px dashed var(--border);
  margin-left: calc(18px + var(--depth, 0) * 20px);
}

/* Small avatar in tree rows */
.hl-tree-avatar {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: scale-down;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--card);
}

/* ── Overlay ── */
.hl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / 0.65);
  z-index: 999;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin: 0 !important;
}
.hl-overlay.open { display: flex; }

/* ── Modal shell ── */
.hl-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  display: none;
  flex-direction: column;
}
.hl-modal.open { display: flex; }

.hl-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--background);
  z-index: 2;
  flex-shrink: 0;
}
.hl-modal-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hl-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted-foreground);
  font-size: 13px;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.12s, background 0.12s;
  display: flex;
  align-items: center;
  height: fit-content;
}
.hl-modal-close:hover {
  color: var(--foreground);
  background: var(--secondary);
}

.hl-modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .9rem 1.5rem;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--background);
  z-index: 2;
  flex-shrink: 0;
}

/* FIX #3 — this class existed in the JS template but had no CSS rule at all.
   It is the scrollable content region between the sticky header and sticky footer
   in the detail modal. min-height: 0 is required for flex children to scroll. */
.hl-detail-content-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Detail card — hero section ── */
.hl-detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.hl-detail-hero-avatar {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hl-detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  display: block;
}
.hl-detail-hero-icon {
  font-size: 28px;
  color: var(--muted-foreground);
  opacity: .4;
}

.hl-detail-hero-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hl-detail-hero-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: var(--tracking-normal);
  line-height: 1.2;
}
.hl-detail-hero-host {
  font-size: 12px;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  cursor: pointer;
}

.hl-detail-hero-mac {
  font-size: 10px;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  cursor: pointer;
  display: flex;
  border: 1px solid var(--foreground);
}

.hl-detail-hero-badges {
  display: flex;
  gap: 6px;
  font-weight: 200;
  flex-wrap: wrap;
  align-items: center;
}

.hl-detail-hero-desc {
  font-size: 11px;
  line-height: 1.5;
  margin-top: 2px;
}

/* ── Detail card — key-value grid ── */
.hl-detail-kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
}

.hl-detail-kv {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
}
.hl-detail-kv:nth-last-child(-n+2) { border-bottom: none; }
.hl-detail-kv-full { grid-column: 1 / -1; }

.hl-detail-key {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.hl-detail-val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--foreground);
  word-break: break-all;
  display: inline-grid;
}
.hl-detail-val.copy-btn { cursor: pointer; }
.hl-detail-val.copy-btn:hover { color: var(--primary); }

.hl-detail-notes {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 11px;
  color: var(--muted-foreground);
}

/* Timestamps section — slightly muted */
.hl-detail-timestamps {
  background: color-mix(in oklch, var(--card) 40%, transparent);
}
.hl-detail-timestamps .hl-detail-key,
.hl-detail-timestamps .hl-detail-val { opacity: .7; }

/* ── Form sections ── */
.hl-section {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.hl-section:last-of-type { border-bottom: none; }

.hl-section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.hl-section-label i { color: var(--primary); font-size: 10px; }

.hl-grid-1 { display: grid; grid-template-columns: 1fr;         gap: 10px; }
.hl-grid-2 { display: grid; grid-template-columns: 1fr 1fr;     gap: 10px; }
.hl-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ── Fields ── */
.hl-field { display: flex; flex-direction: column; gap: 5px; }

.hl-field label,
.hl-field label * {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--muted-foreground) !important;
  margin-bottom: 0 !important;
}

.hl-field input,
.hl-field select,
.hl-field textarea {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  background: var(--input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 10px !important;
  color: var(--foreground) !important;
  outline: none !important;
  transition: border-color var(--hover-duration), box-shadow var(--hover-duration) !important;
  box-shadow: none !important;
  width: 100%;
  line-height: 1.4;
}
.hl-field input:focus,
.hl-field select:focus,
.hl-field textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 15%, transparent) !important;
}
.hl-field input::placeholder { color: var(--muted-foreground) !important; opacity: .6; }
.hl-field textarea { resize: vertical; min-height: 72px; line-height: 1.6 !important; }

.hl-req  { color: var(--danger); margin-left: 2px; }
.hl-hint { font-size: 10px; color: var(--muted-foreground); opacity: .75; }

.hl-tag-input {
  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  background: color-mix(in oklch, var(--input) 50%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hl-tag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hl-tag-chips:empty { display: none; }
.hl-chip-tag { display: inline-flex; align-items: center; gap: 3px; }
.hl-chip-remove {
  background: none; border: none; cursor: pointer; height: 15px;
  width: 15px;
  border-radius: 2px;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  padding: 6px 5px 5px;
  opacity: .55; color: inherit; font-size: 9px;
  display: inline-flex; align-items: center; line-height: 1;
}
.hl-chip-remove:hover { opacity: 1; }
.hl-tag-row { display: flex; gap: 6px; align-items: center; }
.hl-tag-row input {
  flex: 1; background: transparent; border: none; outline: none;
  color: inherit; font-size: 13px; padding: 2px 0; min-width: 100px;
}
.hl-tag-row input::placeholder { opacity: .38; }

/* custom field rows */
.hl-cf-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.hl-cf-row label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--muted-foreground) !important;
}
.hl-cf-row input {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  background: var(--input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 10px !important;
  color: var(--foreground) !important;
  outline: none !important;
  transition: border-color var(--hover-duration), box-shadow var(--hover-duration) !important;
  box-shadow: none !important;
  width: 100%;
  line-height: 1.4;
}
.hl-cf-row input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 15%, transparent) !important;
}

/* template buttons */
.hl-template-btns { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

/* custom fields detail grid */
.hl-detail-cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }

/* ── Type switcher (inside modal section) ── */
.hl-section .hl-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 4px;
  margin-bottom: 0;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.hl-section .hl-tab {
  font-size: 10px;
  padding: 25px 20px 20px;
  border-radius: calc(var(--radius-sm) - 2px);
  border: 1px solid transparent;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  letter-spacing: var(--tracking-normal);
}
.hl-section .hl-tab i { font-size: 15px; display: block; }
.hl-section .hl-tab:hover {
  background: var(--secondary);
  border-color: var(--border);
}
.hl-section .hl-tab.active {
  background: var(--card);
  border-color: var(--border);
  color: var(--primary) !important;
  box-shadow: var(--shadow-sm);
}
.hl-section .hl-tab-count { display: none; }

/* ── Name / avatar ── */
.hl-name-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hl-name-avatar {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 22px;
}
.hl-name-avatar img { width: 100%; height: 100%; object-fit: scale-down; }
.hl-avatar-icon { font-size: 22px; color: var(--muted-foreground); opacity: .5; }

/* ── Confirm dialog ── */
.hl-confirm {
  display: none;
  position: fixed;
  inset: 0;
  background: hsl(0 0% 0% / 0.75);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.hl-confirm.open { display: flex; }
.hl-confirm-box {
  background: var(--background);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-xl);
}
.hl-confirm-title {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hl-confirm-msg {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.hl-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Network Map View ── */
.hl-net-map {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem 0;
}

.hl-net-device-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--card) 30%, transparent);
  padding: 1.5rem;
  position: relative;
}

.hl-net-core {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  margin-bottom: 1.5rem;
  font-size: 14px;
  transition: border-color var(--hover-duration), box-shadow var(--hover-duration);
}
.hl-net-core:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--primary) 10%, transparent);
}

.hl-net-vlans-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.hl-net-vlan {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  filter: grayscale(.4);
}

.hl-net-vlan-header {
  background: var(--card);
  padding: 8px 12px;
  border-bottom: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hl-net-vlan-id {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  background: color-mix(in oklch, var(--primary) 15%, transparent);
  padding: 2px 6px;
  border-radius: 3px;
}

.hl-net-vlan-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
}

.hl-net-nodes {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hl-net-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color var(--hover-duration), transform var(--hover-duration);
}
.hl-net-node:hover {
  border-color: var(--secondary);
  transform: scale(1.03);
}

.hl-net-node-name {
  font-size: 11px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hl-net-node-ips {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-foreground);
}

/* ── Interface / Subnet Form Mapping Container ── */
#hl-net-map-container,
#hl-subnet-map-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hl-net-iface-block {
  background: color-mix(in oklch, var(--card) 40%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: border-color 0.2s, background 0.2s;
}
.hl-net-iface-block:focus-within {
  border-color: var(--primary);
  background: var(--card);
}

/* Strict Grid Layouts */
.hl-net-iface-header {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(110px, 1.5fr) minmax(110px, 1.5fr) auto;
  gap: 8px;
  align-items: center;
}

.hl-subnet-row {
  display: grid;
  grid-template-columns: minmax(100px, 1.5fr) minmax(110px, 1.5fr) minmax(80px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.hl-net-ports-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in oklch, var(--border) 60%, transparent);
}

/* FIX #4 — was 3 columns (minmax 1.5fr, 90px, auto) but the port row template
   renders 5 elements: port input, service input, protocol select, exposure select,
   remove button. Columns 4–5 were wrapping to a second row. */
.hl-net-port-row {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) minmax(90px, 1.5fr) auto auto auto;
  gap: 8px;
  align-items: center;
}

.hl-net-iface-actions {
  margin-top: 10px;
  display: flex;
}

/* ── Standardise the Form Mapping Inputs ── */
.hl-net-iface-header input,
.hl-net-iface-header select,
.hl-subnet-row input,
.hl-net-port-row input,
.hl-net-port-row select {
  width: 100% !important;
  margin: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  background: var(--input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 10px !important;
  color: var(--foreground) !important;
  outline: none !important;
  transition: border-color var(--hover-duration), box-shadow var(--hover-duration) !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  font-weight: normal !important;
}

.hl-net-iface-header input.hl-nm-iface-name,
.hl-subnet-row input.hl-sn-name {
  font-weight: 700 !important;
}

.hl-net-iface-header input:focus,
.hl-net-iface-header select:focus,
.hl-subnet-row input:focus,
.hl-net-port-row input:focus,
.hl-net-port-row select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 15%, transparent) !important;
}

.hl-net-iface-header input::placeholder,
.hl-subnet-row input::placeholder,
.hl-net-port-row input::placeholder {
  color: var(--muted-foreground) !important;
  opacity: .6;
}

/* ── Port Badge (Detail View & Map) ── */
.hl-port-badge {
  background: color-mix(in oklch, var(--primary) 15%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ── Detail View: Grouped Items (Aliases, CNAMEs) ── */
.hl-detail-item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hl-detail-item {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}

/* ── Detail View: Interface Pills ── */
.hl-iface-pill {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: color-mix(in oklch, var(--card) 40%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  height: min-content;
}
.hl-iface-pill:last-child { margin-bottom: 0; }

.hl-iface-pill-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hl-iface-ip {
  font-weight: 700;
  color: var(--primary);
  font-size: 12px;
}

.hl-iface-vlan {
  color: var(--muted-foreground);
  font-size: 10px;
}

/* ── Port Grouping within Interface Pills ── */
.hl-iface-port-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklch, var(--border) 60%, transparent);
}

.hl-iface-port-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hl-port-item-name {
  font-size: 11px;
  font-weight: 600;
  flex: 1;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .hl-grid-2, .hl-grid-3 { grid-template-columns: 1fr; }

  /* hide less important table columns on small screens */
  .hl-table th:nth-child(5),
  .hl-table td:nth-child(5),
  .hl-table th:nth-child(6),
  .hl-table td:nth-child(6) { display: none !important; }

  .hl-actions { gap: 4px; }
  .hl-btn { padding: 5px 9px; font-size: 11px; }
  .hl-modal { border-radius: 0; max-height: 100vh; }
  .hl-section .hl-tabs { grid-template-columns: repeat(4, 1fr); }

  .hl-detail-hero { flex-direction: column; gap: 12px; }
  .hl-detail-kv-grid { grid-template-columns: 1fr; }
  .hl-detail-kv:nth-last-child(-n+2) { border-bottom: 1px solid color-mix(in oklch, var(--border) 50%, transparent); }
  .hl-detail-kv:last-child { border-bottom: none; }

  /* Stack the network mapping forms nicely on mobile */
  .hl-net-iface-header {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "ip   vlan"
      "btn  btn";
  }
  .hl-net-iface-header .hl-nm-iface-name { grid-area: name; }
  .hl-net-iface-header .hl-nm-ip         { grid-area: ip;   }
  .hl-net-iface-header .hl-nm-vlan       { grid-area: vlan; }
  .hl-net-iface-header .hl-btn           { grid-area: btn;  justify-content: center; }

  .hl-subnet-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "cidr vlan"
      "btn  btn";
  }
  .hl-subnet-row .hl-sn-name { grid-area: name; }
  .hl-subnet-row .hl-sn-cidr { grid-area: cidr; }
  .hl-subnet-row .hl-sn-vlan { grid-area: vlan; }
  .hl-subnet-row .hl-btn     { grid-area: btn;  justify-content: center; }

  /* FIX #4 — mobile port row: was also broken at 3 columns for 5 elements */
  .hl-net-port-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "port    service"
      "proto   exposure"
      "btn     btn";
  }
  .hl-net-port-row .hl-nm-port     { grid-area: port;     }
  .hl-net-port-row .hl-nm-service  { grid-area: service;  }
  .hl-net-port-row .hl-nm-protocol { grid-area: proto;    }
  .hl-net-port-row .hl-nm-exposure { grid-area: exposure; }
  .hl-net-port-row .hl-btn         { grid-area: btn;      justify-content: center; }
}