/* components.css — inputs, buttons, cards, grids, toolbars, JSON previews */

/* Inputs */
.sn-input-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #8f8;
  font-size: 12px;
  margin-bottom: 10px;
}
.sn-input {
  background: rgba(0,0,0,0.6);
  color: #0f0;
  border: 1px solid #0f0;
  border-radius: 4px;
  font-family: "OCRA", monospace;
  font-size: 13px;
  padding: 6px 8px;
  outline: none;
  transition: box-shadow .15s, background .15s, border-color .15s;
}
.sn-input:focus {
  background: rgba(0,255,0,0.06);
  box-shadow: 0 0 6px #0f0;
}

/* Login card */
.sn-login-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #0b0b0b;
  border: 1px solid #0f0;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,255,0,0.15);
}
.sn-login-title {
  color: #0f0;
  font-size: 14px;
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.sn-login-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Buttons */
.sn-btn {
  background: rgba(0,0,0,0.6);
  color: #0f0;
  border: 1px solid #0f0;
  border-radius: 4px;
  font-family: "OCRA", monospace;
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .02s;
}
.sn-btn:hover { background: rgba(0,255,0,0.1); box-shadow: 0 0 6px #0f0; }
.sn-btn:active { background: rgba(0,255,0,0.2); box-shadow: 0 0 8px #3f3 inset; transform: translateY(1px); }
.sn-btn--primary {
  background: linear-gradient(180deg, rgba(0,255,0,0.15), rgba(0,255,0,0.05));
}

/* Selection states */
.sn-btn.is-selected {
  box-shadow: 0 0 8px #0f0;
  background: rgba(0,255,0,0.12);
}
.sn-btn--sub.is-selected {
  box-shadow: 0 0 8px #0ff;
  border-color: #0ff;
}

/* Role/permission layout */
.sn-role-detail { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #0f0; }
.sn-role-title  { color:#0f0; font-weight:600; margin-bottom: 4px; }
.sn-role-desc   { color:#cfc; font-size:12px; display:grid; gap:3px; }
.sn-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .sn-sub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Init/next steps cards */
.sn-next-card { display:flex; flex-direction:column; gap:10px; padding:10px; background:#0b0b0b; border:1px solid #0f0; border-radius:8px; box-shadow:0 0 8px rgba(0,255,0,.15); }
.sn-next-title { color:#0f0; font-size:14px; letter-spacing:.02em; }
.sn-init-actions { margin-top: 8px; }

/* Steps grid */
.sn-steps-grid { display:grid; gap:8px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.sn-step { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid #0f0; border-radius:6px; background:rgba(0,0,0,.6); cursor:pointer; }
.sn-step.is-selected { box-shadow:0 0 8px #0f0; background:rgba(0,255,0,.08); }
.sn-radio { accent-color:#0f0; }
.sn-step-main { flex:1 1 auto; min-width:0; }
.sn-step-name { color:#0f0; font-weight:600; }
.sn-step-topic { color:#cfc; font-size:12px; opacity:.9; }
.sn-step-tags { display:flex; gap:6px; }
.sn-pill { border:1px solid #0f0; border-radius:999px; padding:2px 6px; font-size:11px; color:#0f0; }
.sn-pill-op { background: rgba(0,255,0,0.15); }
.sn-pill-slim { padding: 1px 6px; font-size: 11px; }

/* Queue and list items */
.sn-queue-card { display:flex; flex-direction:column; gap:10px; padding:10px; background:#0b0b0b; border:1px solid #0f0; border-radius:8px; box-shadow:0 0 8px rgba(0,255,0,.15); }
.sn-queue-title { color:#0f0; font-size:14px; letter-spacing:.02em; }
.sn-queue-list { display:flex; flex-direction:column; gap:8px; }
.sn-queue-item { display:flex; gap:10px; align-items:flex-start; padding:8px; border:1px solid #0f0; border-radius:6px; background:rgba(0,0,0,.6); cursor:pointer; }
.sn-queue-item.is-selected { box-shadow:0 0 8px #0f0; background:rgba(0,255,0,.08); }
.sn-queue-item.is-newest { border-color:#0ff; box-shadow:0 0 6px #0ff inset; }
.sn-queue-main { flex:1 1 auto; min-width:0; }
.sn-queue-line { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.sn-queue-path { color:#cfc; font-size:12px; opacity:.95; word-break:break-all; }
.sn-queue-data { color:#9f9; font-size:12px; margin-top:2px; }
.sn-queue-ts { color:#9f9; font-size:11px; opacity:.85; margin-top:4px; }
.sn-queue-ts-local { color:#cfc; margin-left:6px; }
.sn-queue-eid { color:#8f8; margin-left:8px; }

/* Breadcrumb path */
.sn-breadcrumb { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:2px 0 6px; }
.sn-crumb { background: rgba(0,255,0,0.08); border:1px solid #0f0; border-radius:12px; padding:2px 8px; font-size:11px; color:#0f0; }
.sn-crumb-sep { margin: 0 4px; color:#9f9; }

/* JSON preview */
.sn-json { margin-top:6px; }
.sn-json > summary { cursor:pointer; color:#9f9; font-size:12px; }
.sn-json pre { margin:6px 0 0; padding:8px; background:#0a0a0a; border:1px solid #0f0; border-radius:6px; max-height:240px; overflow:auto; }
.sn-json code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "OCRA", monospace; font-size:12px; color:#cfc; }

/* Dropdown toolbar groups */
.qs-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 10px;
  align-items: start;
}
details.qs-group { display: inline-flex; position: relative; }
details.qs-group > summary { list-style: none; }
details.qs-group > summary::-webkit-details-marker { display: none; }
.qs-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  z-index: 12000;
  border: 1px solid #0f0;
  border-radius: 8px;
  background: #0b0b0b;
  box-shadow: 0 0 8px rgba(0,255,0,.15);
  padding: 8px;
}
.qs-menu .sn-btn { width: 100%; text-align: left; padding: 6px 10px; }
.qs-sticky {
  position: sticky;
  top: 0;
  z-index: 11050;
  background: #111;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid #0f0;
}

/* Accessibility focus */
.sn-btn:focus-visible { outline: 2px solid #0ff; outline-offset: 2px; }