/* LFG HUB REDESIGN - MODIFIED FILE (PHASE 2) */
/* Create Lobby modal — structured flow + live preview */

@layer components {

.create-lobby-panel--structured {
  width: min(1180px, calc(100vw - 28px));
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.create-lobby-panel--structured .modal-panel__header {
  @apply mb-3 shrink-0 px-1;
}

.create-lobby-panel--structured .create-lobby-form {
  @apply flex flex-col flex-1 min-h-0 gap-0;
}

/* ── Body: form + preview ── */
.cl-body {
  @apply grid gap-ds-4 flex-1 min-h-0 overflow-hidden;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .cl-body {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
  }
}

.cl-form-col {
  @apply flex flex-col min-h-0 overflow-hidden;
}

.cl-form-scroll {
  @apply flex-1 overflow-y-auto pr-1 -mr-1;
  min-height: 0;
}

/* ── Step progress (4 steps) ── */
.cl-steps {
  @apply grid grid-cols-2 sm:grid-cols-4 gap-2 mb-ds-4 p-2.5
         list-none m-0 rounded-xl border border-line-subtle bg-surface-input/40;
}

.cl-steps__item {
  @apply relative flex flex-col items-center justify-center gap-0.5
         min-h-[3.25rem] px-2 py-2 rounded-lg text-center
         text-2xs font-semibold text-content-faint
         border border-transparent bg-surface-hover/40
         transition-all duration-200;
}

.cl-steps__item[tabindex='0'] {
  @apply cursor-pointer;
}

.cl-steps__item[tabindex='0']:hover {
  @apply border-line-subtle bg-surface-hover text-content-muted;
}

.cl-steps__num {
  @apply w-5 h-5 rounded-full flex items-center justify-center
         text-2xs font-bold bg-surface-card border border-line-subtle text-content-muted;
}

.cl-steps__item.is-active {
  @apply text-content-primary border-line-accent bg-accent-muted;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}

.cl-steps__item.is-active .cl-steps__num {
  @apply bg-accent text-white border-accent;
}

.cl-steps__item.is-complete {
  @apply text-accent-light border-line-accent/40 bg-accent-muted/50;
}

.cl-steps__item.is-complete .cl-steps__num {
  @apply bg-status-online-muted text-status-online border-status-online/30;
}

.cl-steps__item.is-error {
  @apply text-status-danger;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.cl-steps__item.is-error .cl-steps__num {
  @apply text-status-danger;
  border-color: rgba(239, 68, 68, 0.4);
}

/* ── Step sections ── */
.cl-step-group {
  @apply rounded-xl border border-line-subtle bg-surface-card/60 p-ds-4 mb-ds-3;
}

.cl-step-group.is-invalid {
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12);
}

.cl-step-group__head {
  @apply flex items-start justify-between gap-ds-3 mb-ds-3;
}

.cl-step-group__title {
  @apply ds-h4 m-0 flex items-center gap-ds-2 text-ds-sm;
}

.cl-step-group__hint {
  @apply ds-caption block mt-0.5;
}

.cl-field-status {
  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-2xs font-semibold shrink-0;
}

.cl-field-status--pending {
  @apply text-content-faint bg-surface-hover border border-line-subtle;
}

.cl-field-status--ok {
  @apply text-status-online bg-status-online-muted border border-status-online/25;
}

.cl-field-status--error {
  @apply text-status-danger;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.cl-field-error {
  @apply text-2xs text-status-danger mt-1.5 flex items-center gap-1;
}

.cl-field-error[hidden] {
  display: none;
}

/* Validation banner */
.cl-validation-banner {
  @apply flex items-start gap-ds-2 px-ds-3 py-ds-3 mb-ds-3 rounded-xl text-ds-xs text-content-secondary;
  border: 1px solid rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.1);
}

.cl-validation-banner[hidden] {
  display: none;
}

.cl-validation-banner i {
  @apply text-status-warning mt-0.5 shrink-0;
}

/* Setting cards in step 3/4 */
.cl-settings-grid {
  @apply grid gap-ds-3;
}

@media (min-width: 640px) {
  .cl-settings-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cl-setting-block {
  @apply p-ds-3 rounded-xl border border-line-subtle bg-surface-input/50;
}

.cl-setting-block.is-invalid {
  border-color: rgba(239, 68, 68, 0.35);
}

.cl-setting-block__label {
  @apply text-2xs font-bold uppercase tracking-wide text-content-muted mb-2 flex items-center justify-between gap-2;
}

/* Custom game input validation */
.cl-input--error {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
}

/* ── Live preview panel ── */
.cl-preview {
  @apply hidden md:flex flex-col gap-ds-3 p-ds-4 rounded-xl
         border border-line-accent bg-surface-panel
         sticky top-0 self-start max-h-full overflow-y-auto;
}

@media (min-width: 900px) {
  .cl-preview {
    display: flex;
  }
}

.cl-preview__title {
  @apply ds-h4 m-0 text-ds-sm flex items-center gap-ds-2;
}

.cl-preview__title i {
  @apply text-accent-light;
}

.cl-preview-card {
  @apply rounded-xl overflow-hidden border border-line-strong bg-surface-card;
}

.cl-preview-card__hero {
  @apply relative h-24 overflow-hidden bg-surface-input;
}

.cl-preview-card__hero img {
  @apply w-full h-full object-cover opacity-80;
}

.cl-preview-card__hero-overlay {
  @apply absolute inset-0 bg-gradient-to-t from-surface-card via-transparent to-transparent;
}

.cl-preview-card__game-badge {
  @apply absolute top-2 left-2 px-2 py-0.5 rounded-md text-2xs font-bold
         bg-surface-card/90 border border-line-strong text-content-primary;
}

.cl-preview-card__body {
  @apply p-ds-3 space-y-ds-2;
}

.cl-preview-card__title {
  @apply text-ds-xs font-bold text-content-primary m-0 leading-snug;
}

.cl-preview-card__desc {
  @apply text-2xs text-content-muted m-0 line-clamp-2;
}

.cl-preview-card__meta {
  @apply flex flex-wrap gap-1.5;
}

.cl-preview-card__tag {
  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-2xs font-semibold
         bg-surface-hover border border-line-subtle text-content-secondary;
}

.cl-preview-card__tag--rank {
  font-weight: 700;
}

.cl-preview-card__tag--time {
  @apply text-status-info border-status-info/25 bg-status-info-muted;
}

.cl-preview-card__slots {
  @apply flex items-center justify-between text-2xs text-content-muted pt-1;
}

.cl-preview-card__bar {
  @apply h-1 rounded-full bg-surface-hover overflow-hidden;
}

.cl-preview-card__bar-fill {
  @apply h-full rounded-full bg-accent;
}

.cl-preview-card__cta {
  @apply w-full mt-1 pointer-events-none opacity-90;
}

/* Checklist */
.cl-checklist {
  @apply space-y-1.5 m-0 p-0 list-none;
}

.cl-checklist__item {
  @apply flex items-center gap-2 text-2xs text-content-muted;
}

.cl-checklist__item.is-done {
  @apply text-status-online;
}

.cl-checklist__item.is-missing {
  @apply text-content-faint;
}

.cl-checklist__item.is-error {
  @apply text-status-danger;
}

.cl-checklist__icon {
  @apply w-4 h-4 rounded-full flex items-center justify-center shrink-0
         text-2xs border border-line-subtle bg-surface-hover;
}

.cl-checklist__item.is-done .cl-checklist__icon {
  @apply bg-status-online-muted border-status-online/30 text-status-online;
}

.cl-checklist__item.is-error .cl-checklist__icon {
  @apply text-status-danger;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.cl-draft-badge {
  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-2xs font-medium
         text-accent-light bg-accent-muted border border-line-accent;
}

.cl-draft-badge[hidden] {
  display: none;
}

/* ── Footer actions ── */
.cl-actions {
  @apply flex flex-wrap items-center justify-between gap-2 pt-ds-3 mt-ds-2
         border-t border-line-subtle shrink-0;
}

.cl-actions__left {
  @apply flex items-center gap-2;
}

.cl-actions__right {
  @apply flex flex-wrap items-center gap-2 ml-auto;
}

.cl-actions .create-lobby-submit {
  @apply min-w-[10rem];
}

.cl-actions #wizard-draft-btn {
  @apply min-w-[9rem];
}

@media (max-width: 640px) {
  .cl-actions__left,
  .cl-actions__right {
    @apply w-full;
  }

  .cl-actions__right .ds-btn,
  .cl-actions__right .create-lobby-submit,
  .cl-actions #wizard-draft-btn {
    @apply flex-1;
  }
}

/* Mobile preview strip */
.cl-preview-mobile {
  @apply md:hidden mb-ds-3 p-ds-3 rounded-xl border border-line-subtle bg-surface-panel;
}

/* Dynamic rank panels */
.cl-rank-panel[hidden] {
  display: none !important;
}

.cl-rank-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cl-rank-none-msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
}

.cl-setting-block--no-rank .cl-rank-none-msg {
  opacity: 0.9;
}

.cl-rank-field__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cl-rank-input {
  max-width: 220px;
}

} /* end @layer */