/* ==========================
   Subnet calculator specific styles
   ========================== */
.controls{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
  padding:12px; margin:.6rem 0 0;
}
label{font-weight:600}
label, select, input, button{font-size:.95rem}

input[type=text],select{
  width:100%;max-width:360px;padding:.55rem .65rem;border:1px solid var(--panel-border);
  border-radius:8px;background:transparent;color:var(--fg);outline:none
}
/* Fix for select dropdown in dark mode */
select {
  background-color: var(--panel);
  color: var(--fg);
  appearance: auto; /* Ensure native dropdown arrow is visible */
}
select option {
  background-color: var(--panel);
  color: var(--fg);
}
input[type=text]:focus, select:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent)}

small{color:var(--muted)}

/* KBD style */
.kbd{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  background:var(--kbd-bg);border:1px solid var(--kbd-border);border-bottom-width:2px;border-radius:6px;padding:0 .35rem;color:var(--fg)
}

/* Table styles */
.table-wrap{margin-top:.8rem;overflow:auto}
table{
  width:100%;
  min-width:1000px;           /* Keeps table readable; forces horizontal scroll instead of squishing */
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
  table-layout:auto;
}
th,td{
  border-bottom:1px solid var(--panel-border);
  padding:.65rem .7rem;
  text-align:left;
  vertical-align:top;
  white-space:nowrap;         /* Don't wrap IPs, masks, and ranges */
}
thead th{
  position:sticky;top:0;
  background:color-mix(in oklab, var(--panel) 80%, transparent);
  backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px)
}
tbody tr:hover{background:var(--table-hover)}
.mono{font-family:SFMono-Regular,Consolas,ui-monospace,monospace;font-size:.92em}
.indent{white-space:pre}
.row-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.error{color:#ef4444;margin-top:.35rem}
.warn{color:#f59e0b;margin-top:.35rem}

/* Responsive tweak: we'll keep Netmask hidden on very small screens */
@media (max-width:720px){
  th:nth-child(2), td:nth-child(2){display:none}
}

/* Toast */
.toast{
  position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:8px
}
.toast .item{
  background: var(--panel);
  border:1px solid var(--panel-border);
  color:var(--fg);
  padding:.6rem .75rem;border-radius:10px;box-shadow:var(--shadow);
  animation:slide-in .25s ease, fade-out .2s ease 2.4s forwards;
  display:flex;align-items:center;gap:.5rem
}
@keyframes slide-in{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fade-out{to{opacity:0;transform:translateY(6px)}}