/* Additive browser inventory layer. The original .browser-card DOM stays mounted for mobile and existing actions. */
.browser-inventory { margin: 0 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.browser-inventory-summary, .browser-inventory-bulk, .browser-inventory-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.browser-inventory-summary { margin-bottom: 14px; }
.browser-inventory-summary strong { display: block; color: var(--ink); font-size: 15px; }
.browser-inventory-summary span { color: var(--muted); font-size: 12px; }
.browser-inventory-view { display: flex; gap: 6px; }
.browser-inventory-view button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); background: var(--soft); }
.browser-inventory-filters { display: grid; grid-template-columns: minmax(220px, 1.8fr) repeat(3, minmax(120px, .8fr)); gap: 10px; align-items: end; }
.browser-inventory-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.browser-inventory-filters input, .browser-inventory-filters select { min-height: 40px; width: 100%; }
.browser-inventory-bulk { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.browser-inventory-select-all { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.browser-inventory-select-all input { width: 16px; height: 16px; }
.browser-inventory-bulk button { min-height: 36px; }
.browser-inventory-note { flex: 1 1 240px; color: var(--muted); }
.browser-inventory-note.is-error { color: var(--danger); }
.browser-inventory-empty { margin: 14px 0 0; padding: 18px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; }
.browser-inventory-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.browser-inventory-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.browser-inventory-table th, .browser-inventory-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.browser-inventory-table th { position: sticky; top: 0; z-index: 1; background: var(--soft); color: var(--muted); font-size: 11px; white-space: nowrap; }
.browser-inventory-table tbody tr:hover { background: color-mix(in srgb, var(--soft) 42%, transparent); }
.browser-inventory-table tbody tr:last-child td { border-bottom: 0; }
.browser-inventory-table .inventory-check { width: 34px; text-align: center; }
.browser-inventory-table .inventory-check input { width: 16px; height: 16px; }
.inventory-row-title { display: grid; gap: 2px; min-width: 150px; color: var(--ink); font-weight: 650; }
.inventory-row-title small { color: var(--muted); font-size: 11px; font-weight: 450; }
.inventory-row-title > span:first-child { overflow-wrap: anywhere; }
.inventory-edit-name { width: max-content; min-height: 28px !important; margin-top: 2px; padding: 3px 8px !important; color: var(--accent); background: transparent; font-size: 11px !important; }
.inventory-name-editor { display: grid; gap: 5px; min-width: 170px; }
.inventory-name-input { min-height: 34px !important; padding: 5px 8px !important; font-size: 13px !important; }
.inventory-name-editor button { min-height: 28px !important; padding: 3px 8px !important; font-size: 11px !important; }
.inventory-row-actions { min-width: 190px; white-space: normal; }
.inventory-row-actions > * { margin: 2px 4px 2px 0; }
.inventory-row-actions a, .inventory-row-actions button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.browser-inventory-pagination { padding: 10px 12px; color: var(--muted); font-size: 12px; }
.browser-inventory-pagination .actions { display: flex; gap: 6px; }
.browser-inventory-pagination button { min-height: 34px; padding: 5px 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.browser-inventory-operation-dialog { box-sizing: border-box; width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--panel); color: var(--ink); overflow: auto; }
.browser-inventory-operation-dialog::backdrop { background: #07152580; }
.browser-inventory-operation-dialog form > header, .browser-inventory-operation-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.browser-inventory-operation-dialog h2 { margin: 0; font-size: 20px; }
.browser-inventory-operation-dialog header button { min-width: 40px; font-size: 20px; }
.browser-inventory-operation-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; padding: 14px; border-radius: 9px; background: var(--soft); }
.browser-inventory-operation-summary dt { color: var(--muted); font-size: 11px; }
.browser-inventory-operation-summary dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.browser-inventory-operation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.browser-inventory-operation-actions > * { min-height: 40px; }
.browser-inventory-operation-dialog footer { justify-content: flex-end; margin-top: 16px; }
@media (max-width: 800px) {
  .browser-inventory { padding: 14px; }
  .browser-inventory-filters { grid-template-columns: 1fr 1fr; }
  .browser-inventory-filters label:first-child { grid-column: 1 / -1; }
  .browser-inventory-table { min-width: 760px; }
}
@media (max-width: 480px) {
  .browser-inventory-filters { grid-template-columns: 1fr; }
  .browser-inventory-filters label:first-child { grid-column: auto; }
  .browser-inventory-view { width: 100%; }
  .browser-inventory-view button { flex: 1; }
  .browser-inventory-note { flex-basis: 100%; }
  .browser-inventory-operation-summary { grid-template-columns: 1fr; }
}

.inventory-network-address{min-width:190px;max-width:280px;overflow-wrap:anywhere}.inventory-network-address>div+div{margin-top:8px}.inventory-network-address small{display:block;color:var(--muted)}.inventory-network-address code{font-size:12px;white-space:normal}.inventory-customer-remark{min-width:140px;max-width:260px;overflow-wrap:anywhere;white-space:pre-wrap}.inventory-customer-remark>span{display:block;margin-bottom:7px}.inventory-customer-remark button{min-height:36px}.browser-customer-note{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:12px;margin-top:12px;border-top:1px solid var(--line);font-size:13px}.browser-customer-note>[data-customer-remark]{flex:1 1 180px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}.browser-customer-note button{min-height:44px}.browser-remark-editor{box-sizing:border-box;width:min(510px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink)}.browser-remark-editor::backdrop{background:#10243b99}.browser-remark-editor h2{margin:0 0 10px;font-size:18px}.browser-remark-editor label{display:grid;gap:8px;font-size:14px}.browser-remark-editor textarea{box-sizing:border-box;width:100%;min-height:120px;padding:10px;font:inherit;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}.browser-remark-editor .actions{justify-content:flex-end;margin-top:16px}.browser-remark-editor button{min-height:44px}@media(max-width:720px){.browser-remark-editor textarea{font-size:16px}.inventory-customer-remark button{min-height:44px}}

.browser-access-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;min-width:0;flex-basis:100%}
.browser-access-route{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left}
.browser-access-route>a,.browser-access-route>button{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;white-space:normal;text-align:center}
.browser-access-route>a.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.browser-access-route>a:hover{border-color:var(--accent);filter:brightness(1.05)}
.browser-route-hint{display:block;font-size:11px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;font-weight:400}
.browser-inventory-table th:nth-child(3),.browser-inventory-table td:nth-child(3){min-width:76px;white-space:nowrap}
.browser-inventory-table th:nth-child(4),.browser-inventory-table td:nth-child(4){min-width:96px;white-space:nowrap}
.browser-inventory-table th:last-child,.inventory-row-actions{position:sticky;right:0;width:260px;min-width:260px;max-width:260px;background:var(--panel);box-shadow:-5px 0 9px #10243b0b}
.browser-inventory-table th:last-child{z-index:3;background:var(--soft)}
.inventory-row-actions{z-index:1}
.inventory-row-actions .browser-access-routes{grid-template-columns:repeat(2,minmax(0,1fr))}
.inventory-row-actions .browser-access-route:first-child{grid-column:1/-1}
.inventory-row-actions .browser-access-route>a,.inventory-row-actions .browser-access-route>button{padding:8px 6px;font-size:12px}
.inventory-row-actions>.browser-access-routes{margin:0}
.inventory-row-utilities{display:flex;align-items:flex-start;gap:8px;margin-top:10px}
.browser-copy-details{max-width:100%;min-width:0;font-size:12px;color:var(--muted)}
.browser-copy-details>summary{min-height:36px;padding:8px 3px;cursor:pointer;color:var(--accent)}
.browser-copy-actions{display:flex;flex-wrap:wrap;gap:7px;padding-top:6px}
.browser-secondary-actions>.browser-copy-details{flex-basis:100%}
@media(max-width:600px){
  .browser-primary-actions .browser-access-routes,.browser-detail-footer .browser-access-routes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .browser-primary-actions .browser-access-route:first-child,.browser-detail-footer .browser-access-route:first-child{grid-column:1/-1}
  .browser-access-route>a,.browser-access-route>button{min-height:46px}
  .browser-copy-details>summary{min-height:44px}
}

/* Compact customer actions: keep the control-plane entry, direct IP, NAT,
   copy helpers and details in one wrapping toolbar like the legacy table. */
.browser-primary-actions{align-items:center;gap:6px;width:100%;min-width:0}
.browser-access-routes{display:flex;align-items:center;flex:0 1 auto;flex-wrap:wrap;gap:6px;width:auto;min-width:0;flex-basis:auto}
.browser-primary-actions .browser-access-routes,.browser-detail-footer .browser-access-routes,.inventory-row-actions>.browser-access-routes{display:flex;grid-template-columns:none}
.browser-access-route{display:block;flex:0 0 auto;min-width:0}
.browser-access-route>a,.browser-access-route>button{width:auto;min-width:0;min-height:36px;padding:7px 10px;white-space:nowrap;font-size:12px;line-height:1.25}
.browser-access-route>a.primary{font-weight:700}
.browser-route-hint{display:block}
.browser-inline-copy-actions,.browser-detail-copy-actions{display:contents}
.browser-primary-actions>.browser-inline-copy-actions button,.browser-primary-actions>.browser-inline-copy-actions a{min-height:36px;padding:7px 10px;font-size:12px;white-space:nowrap}
.browser-detail-footer [data-detail-primary]{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.browser-detail-footer .browser-access-routes{flex:0 1 auto;width:auto}
.browser-detail-footer .browser-detail-copy-actions button{min-height:36px;padding:7px 10px;font-size:12px;white-space:nowrap}
.inventory-row-actions{min-width:390px;width:390px;max-width:390px;white-space:normal}
.inventory-row-actions>.browser-access-routes{display:flex;margin:0 0 6px;gap:5px}
.inventory-row-actions .browser-access-route>a,.inventory-row-actions .browser-access-route>button{min-height:34px;padding:6px 8px;font-size:11px}
.inventory-row-utilities{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:0}
.inventory-row-utilities button{min-height:32px;padding:5px 8px;font-size:11px;white-space:nowrap}
.inventory-row-utilities .browser-copy-details{display:none}
.browser-copy-actions{display:contents}
.browser-inventory-operation-actions .browser-access-routes{flex-basis:100%;width:100%}

@media(max-width:700px){
  .browser-primary-actions{gap:6px}
  .browser-access-routes{flex:1 1 100%;width:100%}
  .browser-access-route>a,.browser-access-route>button{min-height:42px}
  .browser-primary-actions>.browser-inline-copy-actions{display:contents}
  .browser-primary-actions>.browser-inline-copy-actions button{min-height:42px}
  .browser-detail-footer [data-detail-primary]{align-items:stretch}
  .browser-detail-footer .browser-access-routes{flex:1 1 100%;width:100%}
  .browser-detail-footer .browser-detail-copy-actions{display:contents}
}

/* Copy the address in place without adding another toolbar action. */
#browser-list .browser-address-copy,.browser-inventory .browser-address-copy{display:inline;padding:3px 2px;min-height:0;width:auto;border:0;border-radius:3px;background:transparent;color:var(--primary,#2468b4);font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;overflow-wrap:anywhere;box-shadow:none}
#browser-list .browser-address-copy:hover,.browser-inventory .browser-address-copy:hover{background:var(--surface-muted,#eef5fc)}
.browser-address-copy:focus-visible{outline:2px solid var(--primary,#2468b4);outline-offset:3px}

/* Keep actions visible without covering expiry or remarks. */
.browser-inventory-table{min-width:1080px}
.browser-inventory-table td:nth-child(6){white-space:nowrap;min-width:145px}
.browser-inventory-table th:last-child,.browser-inventory-table .inventory-row-actions{position:static;min-width:285px;width:285px;max-width:none;box-shadow:none}