/* Büro › IT-Plan: tree left, entry right; stacked below ~1100 px of view width (container query). */
#itplan-view { container-type: inline-size; container-name: ipview; display: flex; flex-direction: column; gap: 12px; }
.ip-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.ip-head h2 { margin: 0; }
.ip-head .help { max-width: 62ch; margin: 4px 0 0; }
.ip-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ip-toolbar input[type="search"] { min-width: 260px; flex: 1 1 260px; }
.ip-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 16px; align-items: start; }
.ip-tree { border: 1px solid var(--k-line, #2a3a4a); border-radius: var(--k-radius, 14px); background: var(--k-surface, transparent);
  padding: 6px; max-height: 76vh; overflow: auto; }
.ip-row { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 8px 5px calc(6px + var(--depth) * 22px);
  border-radius: 10px; cursor: pointer; position: relative; outline: none; }
.ip-row::before { content: ""; position: absolute; left: calc(16px + (var(--depth) - 1) * 22px); top: 0; bottom: 0; border-left: 1px dashed var(--k-line, #2a3a4a);
  display: var(--guide, block); }
.ip-row[style*="--depth: 0"]::before { display: none; }
.ip-row:hover { background: var(--k-surface-2, rgba(255,255,255,.04)); }
.ip-row:focus-visible { box-shadow: inset 0 0 0 2px var(--k-accent, #22c3e6); }
.ip-row.selected { background: var(--k-accent-soft, rgba(34,195,230,.14)); }
.ip-row.hit .ip-name { text-decoration: underline; text-decoration-color: var(--k-accent, #22c3e6); text-underline-offset: 3px; }
.ip-row.kind-group { margin-top: 8px; }
.ip-row.kind-group .ip-name { font-size: 1.02rem; letter-spacing: .01em; }
.ip-row.kind-site .ip-name { font-weight: 700; }
.ip-toggle { width: 22px; height: 22px; border: 0; background: none; color: var(--k-muted, #8aa); cursor: pointer; font-size: .85rem; padding: 0; }
.ip-badge { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: .95rem;
  background: var(--ip-tint, rgba(120,140,160,.18)); }
.ip-badge.big { width: 40px; height: 40px; font-size: 1.3rem; }
.kind-group { --ip-tint: rgba(150,120,255,.22); } .kind-site { --ip-tint: rgba(34,195,230,.22); } .kind-router, .kind-wifi, .kind-switch { --ip-tint: rgba(80,200,140,.22); }
.kind-firewall, .kind-connector { --ip-tint: rgba(240,170,60,.24); } .kind-server, .kind-nas { --ip-tint: rgba(230,110,110,.22); }
.kind-client, .kind-laptop { --ip-tint: rgba(120,160,220,.2); } .kind-printer, .kind-cardreader, .kind-medical, .kind-phone { --ip-tint: rgba(200,200,120,.2); }
.ip-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.ip-name { font-weight: 600; overflow-wrap: anywhere; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ip-chip { font-size: .75rem; padding: 1px 7px; border-radius: 999px; background: var(--k-surface-3, rgba(255,255,255,.07)); color: var(--k-muted, #9ab);
  border: 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ip-ip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--k-text, #e6eef6); cursor: copy; }
.ip-os { color: #9fd3ff; } .ip-hw { color: #e8c9a0; } .ip-url { color: var(--k-accent, #22c3e6); } .ip-count { font-style: italic; }
.ip-empty { padding: 24px; color: var(--k-muted, #8aa); }
.ip-empty h3 { color: var(--k-text, inherit); margin-top: 0; }
.ip-detail { position: sticky; top: 12px; max-height: 82vh; overflow: auto; }
.ip-card { border: 1px solid var(--k-line, #2a3a4a); border-radius: var(--k-radius, 14px); background: var(--k-surface, transparent); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; }
.ip-card h3 { margin: 0; overflow-wrap: anywhere; }
.ip-path { margin: 0; font-size: .8rem; color: var(--k-muted, #8aa); }
.ip-crumb { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; text-decoration: underline dotted; }
.ip-detail-head { display: flex; gap: 10px; align-items: center; }
.ip-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-form { display: flex; flex-direction: column; gap: 10px; }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 10px; }
.ip-field { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; min-width: 0; }
.ip-field > span { color: var(--k-muted, #8aa); }
.ip-field input, .ip-field select, .ip-field textarea { width: 100%; font: inherit; font-size: 16px; box-sizing: border-box; }
.ip-field .mono, .ip-extra input:first-child + input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ip-extras { display: flex; flex-direction: column; gap: 6px; }
.ip-extra { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; }
.ip-remove { background: none; border: 0; color: var(--k-muted, #8aa); cursor: pointer; font-size: .85rem; }
.ip-move { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ip-move .ip-field { flex: 1 1 200px; }
.ip-files-head { display: flex; gap: 6px; align-items: center; }
.ip-files-head h4 { margin: 0 auto 0 0; }
.ip-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ip-file { position: relative; display: flex; flex-direction: column; gap: 2px; }
.ip-thumb { padding: 0; border: 1px solid var(--k-line, #2a3a4a); border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: #000; }
.ip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-file-name { text-align: left; background: none; border: 1px solid var(--k-line, #2a3a4a); border-radius: 8px; padding: 6px; color: inherit; cursor: pointer;
  font-size: .78rem; overflow-wrap: anywhere; }
.ip-history summary { cursor: pointer; color: var(--k-muted, #8aa); font-size: .85rem; }
.ip-history ul { margin: 6px 0 0; padding-left: 1.1em; font-size: .8rem; color: var(--k-muted, #8aa); }
.ip-dialog { width: min(760px, 100%); }
.ip-proposals { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.ip-proposal { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--k-line, #2a3a4a); border-radius: 10px; cursor: pointer; }
.ip-proposal input { margin-top: 4px; flex: none; width: auto; }
.ip-proposal div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ip-proposal.update { border-left: 3px solid #e0b44c; } .ip-proposal.create { border-left: 3px solid #50c88c; }
.ip-proposal-facts { font-size: .82rem; overflow-wrap: anywhere; }
.ip-reason { color: var(--k-muted, #8aa); font-size: .75rem; }
.ip-status:empty { display: none; }

@container ipview (max-width: 1100px) {
  .ip-body { grid-template-columns: 1fr; }
  .ip-tree { max-height: 55vh; }
  .ip-detail { position: static; max-height: none; }
}
@container ipview (max-width: 520px) {
  .ip-row { padding-left: calc(4px + var(--depth) * 12px); grid-template-columns: 20px 26px minmax(0, 1fr); }
  .ip-row::before { display: none; }
  .ip-toolbar input[type="search"] { min-width: 0; flex-basis: 100%; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) { .ip-body { grid-template-columns: 1fr; } .ip-detail { position: static; } }
}