/* Groups page — high-density routes management with table and cards views */

.groups-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.groups-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 160px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--subtle);
}

.groups-search-box svg { width: 14px; height: 14px; flex-shrink: 0; }
.groups-search-box input {
  width: 100%;
  height: 32px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 11.5px;
}

.groups-filter-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.groups-filter-secondary select {
  height: 32px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background-color: var(--surface);
  color: var(--text);
  font-size: 11px;
}

.view-toggle button {
  width: 32px;
  min-width: 32px;
  padding: 0;
  display: grid;
  place-items: center;
}
.view-toggle button svg { width: 14px; height: 14px; }

/* Table View */
.groups-panel {
  margin-bottom: 30px;
}

.groups-table {
  width: 100%;
}

.groups-table .primary-cell {
  min-width: 180px;
}

.route-title-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.group-name {
  font-size: 12.5px;
  font-weight: 780;
  color: var(--text);
}

.row-disabled {
  opacity: .6;
}

.mode-badge {
  padding: 2px 6px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mode-chat { background: rgb(86 217 255 / 15%); color: var(--accent); }
.mode-image { background: rgb(255 180 84 / 15%); color: #ffb454; }
.mode-video { background: rgb(255 107 107 / 15%); color: #ff6b6b; }
.mode-audio { background: rgb(190 149 255 / 15%); color: #be95ff; }
.mode-embeddings { background: rgb(79 227 168 / 15%); color: var(--accent-2); }
.mode-hybrid { background: rgb(255 255 255 / 10%); color: var(--muted); }

.dest-cell-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 440px;
}

.dest-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-size: 11px;
}

.dest-p {
  color: var(--text);
  font-weight: 700;
}

.dest-m {
  color: var(--subtle);
  font-size: 10.5px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dest-t {
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 850;
  background: rgb(86 217 255 / 12%);
  color: var(--accent);
}

.dest-more {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--subtle);
  font-size: 10px;
  font-weight: 700;
}

.dest-add {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--subtle);
  transition: all .15s;
}
.dest-add svg { width: 11px; height: 11px; }
.dest-add:hover { border-color: var(--accent); color: var(--text); }

.dest-add-link {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--subtle);
  font-size: 10.5px;
  font-weight: 700;
  transition: all .15s;
}
.dest-add-link:hover { border-color: var(--accent); color: var(--accent); }

.alias-cell-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 320px;
}

.alias-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 10.5px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.alias-chip:hover { border-color: var(--accent); color: var(--text); }

.alias-x {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--subtle);
  cursor: pointer;
}
.alias-x svg { width: 9px; height: 9px; }
.alias-x:hover { background: rgb(255 107 125 / 20%); color: var(--danger); }

.type-cell-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.type-pill {
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 750;
  border: 1px solid var(--border);
  color: var(--subtle);
  background: var(--bg);
}
.type-pill.public { color: var(--muted); }
.type-pill.opt { border-color: rgb(86 217 255 / 30%); color: var(--accent); }
.type-pill.fb { border-color: rgb(157 134 255 / 30%); color: var(--violet); }

.group-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.group-actions .icon-button {
  width: 28px;
  height: 28px;
  min-height: 0;
  border-radius: 6px;
}
.group-actions .icon-button svg { width: 13px; height: 13px; }

/* Grid View */
.groups-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  padding: 14px;
}

.group-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  transition: border-color .15s;
  overflow: hidden;
}
.group-card:hover { border-color: var(--border-strong); }
.group-card.disabled { opacity: .65; }

.group-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: rgb(14 27 42 / 70%);
}

.group-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.group-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.card-dest-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-dest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  font-size: 11px;
}

.group-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: rgb(10 19 30 / 50%);
}