/* ==========================================================================
   ipam-manage.css
   Vyve Unified Dashboard v11.1  -  IPAM Manage sub-tab
   Dark theme matching index-CURRENT.html palette.
   v1.0  2026-04-10
   ========================================================================== */

/* ----- layout: three column grid -------------------------------------------- */
.ipam-manage-wrap {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  gap: 14px;
  padding: 12px;
  color: #e6edf3;
  font-size: 13px;
}

.ipam-col {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 540px;
  overflow: auto;
}

.ipam-col h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #58a6ff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #30363d;
  padding-bottom: 6px;
}

.ipam-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  margin: 0 12px 8px 12px;
}

.ipam-toolbar label {
  color: #8b949e;
  font-size: 12px;
  margin-right: 4px;
}

.ipam-toolbar select,
.ipam-toolbar input[type="text"] {
  background: #0d1117;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
}

.ipam-btn {
  background: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 5px 12px;
  font: inherit;
  cursor: pointer;
}

.ipam-btn:hover { background: #30363d; border-color: #58a6ff; }
.ipam-btn.primary { background: #238636; border-color: #2ea043; }
.ipam-btn.primary:hover { background: #2ea043; }
.ipam-btn.danger { background: #6e2020; border-color: #9b2c2c; }
.ipam-btn.danger:hover { background: #9b2c2c; }
.ipam-btn.ghost { background: transparent; }

.ipam-status {
  color: #8b949e;
  font-size: 12px;
  margin-left: auto;
  font-family: ui-monospace, Consolas, monospace;
}

/* ----- block tree ----------------------------------------------------------- */
.ipam-tree ul { list-style: none; padding-left: 14px; margin: 0; }
.ipam-tree > ul { padding-left: 0; }
.ipam-tree li { margin: 2px 0; line-height: 1.4; }

.ipam-tree-label {
  display: inline-block;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  color: #e6edf3;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace;
}
.ipam-tree-label:hover { background: #21262d; border-color: #30363d; }
.ipam-tree-label.active {
  background: #0b3a66;
  border-color: #58a6ff;
  color: #ffffff;
}
.ipam-tree-label.container { color: #8b949e; font-style: italic; }
.ipam-tree-label.retired { text-decoration: line-through; opacity: 0.55; }

.ipam-tree-meta { color: #8b949e; font-size: 11px; margin-left: 4px; }

/* ----- block detail header + KPIs ------------------------------------------ */
.ipam-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.ipam-detail-header h3 {
  margin: 0;
  font-size: 16px;
  color: #e6edf3;
  font-family: ui-monospace, Consolas, monospace;
}
.ipam-detail-sub { color: #8b949e; font-size: 12px; margin-top: 2px; }

.ipam-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 10px 0 14px 0;
}
.ipam-kpi {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}
.ipam-kpi .k-label {
  color: #8b949e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ipam-kpi .k-value {
  color: #e6edf3;
  font-size: 18px;
  font-weight: 600;
  margin-top: 2px;
  font-family: ui-monospace, Consolas, monospace;
}
.ipam-kpi.alloc .k-value { color: #3fb950; }
.ipam-kpi.inuse .k-value { color: #56d364; }
.ipam-kpi.reserved .k-value { color: #58a6ff; }
.ipam-kpi.pct .k-value { color: #f0883e; }

/* ----- subnet grid ---------------------------------------------------------- */
.ipam-grid {
  display: grid;
  gap: 3px;
  padding: 8px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  margin-bottom: 8px;
}
.ipam-grid.g16x16 { grid-template-columns: repeat(16, 1fr); }
.ipam-grid.g16x8  { grid-template-columns: repeat(16, 1fr); }
.ipam-grid.g8x8   { grid-template-columns: repeat(8,  1fr); }
.ipam-grid.g8x4   { grid-template-columns: repeat(8,  1fr); }
.ipam-grid.g4x4   { grid-template-columns: repeat(4,  1fr); }
.ipam-grid.g4x2   { grid-template-columns: repeat(4,  1fr); }
.ipam-grid.g4x1   { grid-template-columns: repeat(4,  1fr); }

.ipam-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid #30363d;
  background: #161b22;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px;
  color: #8b949e;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
  border-radius: 2px;
}
.ipam-cell:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px #58a6ff;
  z-index: 2;
  position: relative;
}

/* state colors (match state machine: free/reserved/allocated/retired/conflict
   plus the verification dimension in_use=true which brightens allocated) */
.ipam-cell.free      { background: #161b22; color: #6e7681; }
.ipam-cell.alloc     { background: #1a4d2e; color: #d4f4dd; border-color: #2ea043; }
.ipam-cell.inuse     { background: #2ea043; color: #ffffff; border-color: #56d364; }
.ipam-cell.reserved  { background: #0b3a66; color: #c9e1ff; border-color: #58a6ff; }
.ipam-cell.conflict  { background: #6e2020; color: #ffd4d4; border-color: #f85149; }
.ipam-cell.retired   { background: #21262d; color: #484f58; text-decoration: line-through; }
.ipam-cell.gateway   { box-shadow: inset 0 0 0 2px #f0883e; }
.ipam-cell.network   { box-shadow: inset 0 0 0 2px #6e7681; }

/* ----- heat strip (for blocks larger than /24) ------------------------------ */
.ipam-strip {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  font-size: 11px;
}
.ipam-strip th,
.ipam-strip td {
  padding: 4px 6px;
  border-bottom: 1px solid #30363d;
  text-align: left;
  color: #e6edf3;
  font-family: ui-monospace, Consolas, monospace;
}
.ipam-strip th {
  color: #58a6ff;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.ipam-strip tbody tr:hover { background: #21262d; cursor: pointer; }
.ipam-strip-bar {
  width: 140px;
  height: 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.ipam-strip-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ea043, #f0883e, #f85149);
  transition: width 0.25s ease;
}

/* ----- swatch legend -------------------------------------------------------- */
.ipam-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: #8b949e;
  margin: 6px 0 12px 0;
}
.ipam-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
  border: 1px solid #30363d;
}
.ipam-sw.free     { background: #161b22; }
.ipam-sw.alloc    { background: #1a4d2e; border-color: #2ea043; }
.ipam-sw.inuse    { background: #2ea043; border-color: #56d364; }
.ipam-sw.reserved { background: #0b3a66; border-color: #58a6ff; }
.ipam-sw.conflict { background: #6e2020; border-color: #f85149; }
.ipam-sw.retired  { background: #21262d; }

/* ----- status pills --------------------------------------------------------- */
.ipam-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
}
.ipam-pill.free      { color: #8b949e; border-color: #484f58; }
.ipam-pill.alloc     { color: #3fb950; border-color: #2ea043; background: rgba(46,160,67,0.1); }
.ipam-pill.inuse     { color: #56d364; border-color: #56d364; background: rgba(86,211,100,0.15); }
.ipam-pill.reserved  { color: #58a6ff; border-color: #58a6ff; background: rgba(88,166,255,0.1); }
.ipam-pill.conflict  { color: #f85149; border-color: #f85149; background: rgba(248,81,73,0.1); }
.ipam-pill.retired   { color: #8b949e; border-color: #484f58; }

/* ----- assignment list ------------------------------------------------------ */
.ipam-assign-list {
  max-height: 240px;
  overflow: auto;
  border: 1px solid #30363d;
  border-radius: 6px;
}
.ipam-assign-list table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: ui-monospace, Consolas, monospace;
}
.ipam-assign-list th,
.ipam-assign-list td {
  padding: 5px 8px;
  border-bottom: 1px solid #30363d;
  text-align: left;
  white-space: nowrap;
}
.ipam-assign-list th {
  background: #0d1117;
  color: #58a6ff;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
}
.ipam-assign-list tbody tr { cursor: pointer; }
.ipam-assign-list tbody tr:hover { background: #21262d; }
.ipam-assign-list tbody tr.active { background: #0b3a66; }

/* ----- assignment form ------------------------------------------------------ */
#ipam-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
#ipam-form label {
  color: #8b949e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
#ipam-form input[type="text"],
#ipam-form select,
#ipam-form textarea {
  background: #0d1117;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 5px 8px;
  font: inherit;
  font-family: ui-monospace, Consolas, monospace;
}
#ipam-form textarea { min-height: 48px; resize: vertical; }
#ipam-form .ipam-form-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ----- audit tail ----------------------------------------------------------- */
.ipam-audit-tail {
  margin-top: 14px;
  border-top: 1px solid #30363d;
  padding-top: 10px;
  font-size: 11px;
  max-height: 200px;
  overflow: auto;
}
.ipam-audit-tail h5 {
  margin: 0 0 6px 0;
  color: #58a6ff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ipam-audit-row {
  padding: 4px 0;
  border-bottom: 1px solid #21262d;
  font-family: ui-monospace, Consolas, monospace;
  color: #e6edf3;
}
.ipam-audit-row .a-when { color: #8b949e; font-size: 10px; }
.ipam-audit-row .a-action {
  color: #f0883e;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  margin-right: 6px;
}
.ipam-audit-row .a-actor { color: #58a6ff; }

/* ----- search results ------------------------------------------------------- */
.ipam-search-results {
  margin-top: 8px;
  max-height: 200px;
  overflow: auto;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 6px;
  font-size: 11px;
  font-family: ui-monospace, Consolas, monospace;
}
.ipam-search-results .sr-row {
  padding: 3px 4px;
  cursor: pointer;
  border-bottom: 1px solid #21262d;
  color: #e6edf3;
}
.ipam-search-results .sr-row:hover { background: #21262d; }

/* ----- responsive breakpoint ------------------------------------------------ */
@media (max-width: 1280px) {
  .ipam-manage-wrap { grid-template-columns: 240px 1fr 300px; }
  .ipam-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .ipam-manage-wrap { grid-template-columns: 1fr; }
  .ipam-col { min-height: 320px; }
}