/* Layout and interaction corrections based on production dashboard screenshots. */

/* Action colours: primary is the Elixir rainbow, secondary is glass/rainbow,
   and destructive actions are red only. */
.app-workspace .button:not(.secondary):not(.danger):not(.ghost):not(:disabled),
.collection-toolbar .button:not(:disabled) {
  background: var(--elixir-rainbow, var(--rainbow)) !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: 0 10px 28px rgba(0,197,255,.10) !important;
}

.app-workspace .button.secondary:not(:disabled) {
  color: #f8f8f8 !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(#0b0b0e,#0b0b0e) padding-box,
    var(--elixir-rainbow, var(--rainbow)) border-box !important;
  box-shadow: none !important;
}

.app-workspace .button.secondary:hover:not(:disabled) {
  background:
    linear-gradient(#131318,#131318) padding-box,
    var(--elixir-rainbow, var(--rainbow)) border-box !important;
}

.app-workspace .button.danger,
.app-workspace .button.danger:not(:disabled) {
  color: #ff9aac !important;
  border: 1px solid rgba(255,49,89,.48) !important;
  background: rgba(255,49,89,.10) !important;
  box-shadow: none !important;
}

.app-workspace .button.danger:hover:not(:disabled) {
  color: #fff !important;
  border-color: rgba(255,49,89,.78) !important;
  background: rgba(255,49,89,.22) !important;
}

/* A predictable vertical rhythm throughout settings pages. */
.app-workspace .stack { gap: 22px; }
.app-workspace .form-card,
.app-workspace .config-body { gap: 22px; }
.app-workspace .form-row { gap: 20px; }
.app-workspace .form-row > * { min-width: 0; }

.app-workspace .form-card label,
.app-workspace .config-body label {
  gap: 10px;
  min-width: 0;
}

.app-workspace .form-card label > span:first-child,
.app-workspace .config-body label > span:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 7px;
  row-gap: 3px;
  min-height: 22px;
  line-height: 1.35;
}

.app-workspace .form-card label > span:first-child small,
.app-workspace .config-body label > span:first-child small {
  margin: 0;
  line-height: 1.35;
}

.app-workspace .form-card label > small,
.app-workspace .config-body label > small {
  display: block;
  margin-top: -2px;
  line-height: 1.5;
}

/* Searchable channel / role controls should read as one control, never two. */
.app-workspace .searchable-picker.picker-enhanced { gap: 0; }
.app-workspace .searchable-picker.picker-enhanced > .picker-native {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

.app-workspace .searchable-picker.picker-enhanced > [data-picker-search] {
  margin: 0;
}

/* Accordion summaries: remove browser markers and keep title/subtitle separated. */
.app-workspace .config-panel > summary {
  list-style: none !important;
  grid-template-columns: minmax(0,1fr) 36px;
  gap: 18px;
  padding: 20px 22px;
}

.app-workspace .config-panel > summary::marker { content: ""; font-size: 0; }
.app-workspace .config-panel > summary::-webkit-details-marker { display: none !important; }

.app-workspace .config-summary,
.app-workspace .config-summary-copy { min-width: 0; }

.app-workspace .config-summary-copy {
  display: grid !important;
  gap: 4px !important;
  align-content: center;
}

.app-workspace .config-summary-copy strong,
.app-workspace .config-summary-copy span {
  display: block !important;
  margin: 0 !important;
  min-width: 0;
}

.app-workspace .config-summary-copy strong {
  line-height: 1.25;
  font-size: 1rem;
}

.app-workspace .config-summary-copy span {
  color: var(--muted);
  line-height: 1.45;
  font-size: .82rem;
}

.app-workspace .config-panel > summary::after {
  align-self: center;
  justify-self: end;
}

/* Saved objects should be proper rows instead of compressed black strips. */
.app-workspace .template-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0 !important;
}

.app-workspace .template-row {
  grid-template-columns: minmax(0,1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 78px;
  padding: 14px 16px 14px 20px;
  border-radius: 16px;
}

.app-workspace .template-row > a {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 3px 0;
}

.app-workspace .template-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.app-workspace .template-row small {
  display: block;
  line-height: 1.4;
}

.app-workspace .template-row form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
}

.app-workspace .template-row .button {
  min-width: 88px;
}

/* Form action rows are clearly separated from the fields they submit. */
.app-workspace .form-actions {
  margin-top: 2px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Always-visible add-new action for repeatable configuration collections. */
.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 0 2px;
}

.collection-toolbar-copy {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

.collection-toolbar .button {
  flex: 0 0 auto;
  min-height: 44px;
  border-radius: 6px;
  padding: 0 18px;
  font-weight: 850;
}

/* Embed Builder keeps preview beside editor only when the workspace is wide enough. */
.app-workspace .builder-grid {
  grid-template-columns: minmax(0,1fr) minmax(340px,.72fr);
  gap: 28px;
}

.app-workspace .builder-grid > * { min-width: 0; }
.app-workspace .preview-card { min-width: 0; }

/* Keep inner cards from visually crashing into one another. */
.app-workspace .card { padding: 26px; }
.app-workspace .config-body { padding: 22px; }
.app-workspace .role-options { gap: 14px; }
.app-workspace .role-row { padding: 16px; gap: 14px; }
.app-workspace .split-heading { gap: 20px; align-items: center; }

/* A little breathing room below saved-empty messages and notices. */
.app-workspace .empty-inline { padding: 20px; line-height: 1.55; }
.app-workspace .notice { line-height: 1.5; }

@media (max-width: 1320px) {
  .app-workspace .builder-grid { grid-template-columns: 1fr; }
  .app-workspace .preview-card { position: static; }
}

@media (max-width: 1040px) {
  .app-workspace .form-row,
  .app-workspace .form-row.three { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .app-workspace .card { padding: 20px; }
  .app-workspace .config-body { padding: 18px; }
  .app-workspace .config-panel > summary { padding: 18px; gap: 12px; }
  .collection-toolbar { align-items: stretch; flex-direction: column; }
  .collection-toolbar .button { width: 100%; }
  .app-workspace .template-row { grid-template-columns: 1fr; gap: 12px; }
  .app-workspace .template-row form { justify-content: flex-start; }
  .app-workspace .template-row .button { width: 100%; }
}