/* ── Manage Collage Page ──────────────────────────────────────────────────── */

/* Update-available notice banner */
.manage-collage-update-notice {
  display: flex;
  align-items: center;
  gap: calc(0.8vw / 19.2 * 10);
  padding: calc(1.2vh / 10.8 * 10) calc(1.4vw / 19.2 * 10);
  margin-bottom: calc(2vh / 10.8 * 10);
  background: rgba(0, 188, 212, 0.08);
  border: 1px solid rgba(0, 188, 212, 0.3);
  border-radius: 6px;
  color: #00838f;
  font-size: calc(1.4vh / 10.8 * 10);
}

.manage-collage-update-notice .icon {
  width: calc(1.8vh / 10.8 * 10);
  height: calc(1.8vh / 10.8 * 10);
  flex-shrink: 0;
}

/* Override top-row flex for the two-panel (2:3) layout */
.manage-page__top-row > .manage-page__section {
  flex: 2 1 0;
}
.manage-page__top-row > .manage-page__section:last-child {
  flex: 3 1 0;
}

.manage-collage-connections-scroll {
  max-height: calc(22vh / 10.8 * 10);
  overflow-y: auto;
}

.manage-collage-conn-row {
  cursor: pointer;
}

.manage-collage-conn-row:hover .manage-table__td {
  background: rgba(0, 0, 0, 0.025);
}

/* ── Status ───────────────────────────────────────────────────────────────── */

.manage-collage-status__muted {
  color: rgba(0, 0, 0, 0.4);
}

.manage-collage-status__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: calc(1.2vh / 10.8 * 10);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.manage-collage-status__badge--ready {
  background: rgba(0, 188, 212, 0.12);
  color: #00838f;
}
.manage-collage-status__badge--processing {
  background: rgba(255, 152, 0, 0.12);
  color: #e65100;
}
.manage-collage-status__badge--error {
  background: rgba(229, 57, 53, 0.1);
  color: #c62828;
}
.manage-collage-status__badge--default {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.6);
}

/* ── Table addon ──────────────────────────────────────────────────────────── */

.manage-table__row--add .manage-table__td {
  padding-top: calc(1.6vh / 10.8 * 10);
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

/* ── Actions ──────────────────────────────────────────────────────────────── */

.manage-collage-page__actions {
  display: flex;
  gap: calc(1.2vw / 19.2 * 10);
}

.manage-collage-page__title-actions {
  display: flex;
  align-items: center;
  gap: calc(1.2vw / 19.2 * 10);
  flex-shrink: 0;
}

/* ── Edit Metadata modal ──────────────────────────────────────────────────── */

/* Wide enough for the combine-form select grid (same form as collage creation). */
.manage-collage-edit-modal {
  width: min(700px, calc(100vw - 2rem));
}

/* Unicode refresh glyph (↻) inlined in the refresh-confirm dialog text. */
.manage-collage-inline-icon {
  display: inline-block;
  font-style: normal;
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.1em;
  margin: 0 0.15em;
}

/* ── Visibility ───────────────────────────────────────────────────────────── */

.manage-collage-visibility__text {
  margin: calc(1vh / 10.8 * 10) 0 calc(1.4vh / 10.8 * 10);
  font-size: calc(1.4vh / 10.8 * 10);
  color: rgba(0, 0, 0, 0.6);
}

/* ── Authorization badges ─────────────────────────────────────────────────── */

.manage-collage-auth__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: calc(1.2vh / 10.8 * 10);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.manage-collage-auth__badge--admin {
  background: rgba(103, 58, 183, 0.1);
  color: #4527a0;
}
.manage-collage-auth__badge--write {
  background: rgba(0, 188, 212, 0.12);
  color: #00838f;
}
.manage-collage-auth__badge--read {
  background: rgba(76, 175, 80, 0.12);
  color: #2e7d32;
}
.manage-collage-auth__badge--none {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.45);
}

/* ── Create Collage View form ─────────────────────────────────────────────── */

.manage-collage-page__create-view-btn {
  margin-top: calc(1.4vh / 10.8 * 10);
}

.create-collage-view {
  margin-top: calc(1.6vh / 10.8 * 10);
  display: flex;
  flex-direction: column;
  gap: calc(1.4vh / 10.8 * 10);
}

.create-collage-view__name-input {
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  font-size: calc(1.4vh / 10.8 * 10);
  color: var(--text-primary, #33323d);
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}

.create-collage-view__name-input:focus {
  outline: none;
  border-color: var(--accent, #00bcd4);
}

.create-collage-view__columns-label {
  font-size: calc(1.3vh / 10.8 * 10);
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 calc(0.6vh / 10.8 * 10);
}

.create-collage-view__column-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(22vh / 10.8 * 10);
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: calc(0.8vh / 10.8 * 10) calc(1vw / 19.2 * 10);
}

.create-collage-view__column-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(1.3vh / 10.8 * 10);
  color: var(--text-primary, #33323d);
  cursor: pointer;
  padding: 3px 0;
  user-select: none;
}

.create-collage-view__column-item input[type="checkbox"] {
  cursor: pointer;
  flex-shrink: 0;
}

.create-collage-view__column-type {
  font-size: calc(1.1vh / 10.8 * 10);
  color: rgba(0, 0, 0, 0.35);
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.create-collage-view__actions {
  display: flex;
  gap: calc(1vw / 19.2 * 10);
}