/* Small global UI fixes that should not depend on daisyUI utility classes. */

#flash-group {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  width: min(24rem, calc(100vw - 2rem));
  flex-direction: column;
  gap: .75rem;
}

#flash-group > [role="alert"] {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

#flash-group > [role="alert"] > .alert {
  display: flex;
  width: 100% !important;
  max-width: none !important;
  align-items: flex-start;
  gap: .75rem;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: .9rem;
  padding: .9rem 1rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .28);
  backdrop-filter: blur(10px);
}

#flash-group #flash-info > .alert {
  background: rgba(219, 234, 254, .97);
  color: #172554;
  border-color: rgba(96, 165, 250, .38);
}

#flash-group #flash-error > .alert,
#flash-group #client-error > .alert,
#flash-group #server-error > .alert {
  background: rgba(254, 226, 226, .97);
  color: #7f1d1d;
  border-color: rgba(248, 113, 113, .42);
}

/* Cloud GitHub settings: one source per row, repo / branch / token. */
form[id^="github-access-form-"] {
  grid-template-columns: minmax(0, 1fr);
}

form[id^="github-access-form-"] > label:has(input[id^="plugin-repository-"]) {
  order: 1;
  grid-column: auto;
}

form[id^="github-access-form-"] > label:has(input[id^="plugin-branch-"]) {
  order: 2;
  grid-column: auto;
}

form[id^="github-access-form-"] > label:has(input[id^="plugin-github-token-"]) {
  order: 3;
  grid-column: auto;
}

form[id^="github-access-form-"] > label:has(input[id^="config-repository-"]) {
  order: 4;
  grid-column: auto;
}

form[id^="github-access-form-"] > label:has(input[id^="config-branch-"]) {
  order: 5;
  grid-column: auto;
}

form[id^="github-access-form-"] > label:has(input[id^="config-github-token-"]) {
  order: 6;
  grid-column: auto;
}

form[id^="github-access-form-"] > p {
  order: 7;
  grid-column: 1 / -1;
}

form[id^="github-access-form-"] > button {
  order: 8;
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  #cloud-modes details:has(form[id^="github-access-form-"]) > div {
    width: min(42rem, calc(100vw - 24rem));
    max-width: 42rem;
  }

  form[id^="github-access-form-"] {
    grid-template-columns: minmax(0, 1.6fr) minmax(7.5rem, .72fr) minmax(10rem, 1fr);
  }
}

@media (max-width: 640px) {
  #flash-group {
    top: .75rem;
    left: .75rem;
    right: .75rem;
    width: auto;
  }
}