/*
 * Dialog.css assigns grid-template-rows: subgrid to all .has-ActionBarContent elements
 * via a deeply-nested selector at specificity (0,4,1). The Advanced Query Builder form
 * needs its own 4-row grid (header | scrollpane | 1fr spacer | ActionBar), so !important
 * is the only way to override it from outside Dialog.css.
 */
.SearchWidgetAdvanced > form.has-ActionBarContent {
  grid-template-rows: min-content min-content 1fr min-content !important;
  align-items: stretch;
  height: 100%;
}

.SearchWidgetAdvanced > form {
  @apply pt-6;

  /* Explicit row assignments for the 4-row grid above.
   * Row 1: header (ComboInput + add button side by side)
   * Row 2: scrollpane
   * Row 3: 1fr spacer (pushes ActionBar to the bottom)
   * Row 4: ActionBar */
  > .ComboInput {
    @apply [grid-row:1];
  }

  > button.icon-action-add {
    @apply self-center [grid-row:1];
  }

  > .SearchWidgetAdvanced-scrollpane {
    @apply [grid-row:2];
  }

  > .ActionBar {
    @apply mt-6 [grid-row:4];
  }

  button.icon-action-add {
    @apply btu-button btu-button-fill-none btu-button-primary ms-4 w-max btu-button-container-none before:btu-icon before:btu-icon-plus;
  }

  button.icon-action-remove {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error before:btu-icon before:btu-icon-x;
  }
}

.SearchWidgetAdvanced:has(> form.form-submit) {
  @apply relative;

  &::after {
    @apply btu-loader absolute left-1/2 top-1/2 z-[1] blokk size-[--loader-size] -translate-x-1/2 -translate-y-1/2;
  }
}

.SearchWidgetAdvanced-scrollpane ul:not(:where(.ComboInput-list, .RCS-list)) {
  &:not(:empty) {
    @apply px-4;
  }
  .ComboInput:has(+ button.icon-action-add) {
    @apply max-w-[185px];
  }

  > li {
    @apply mt-4 flex flex-wrap items-center gap-2;

    > .ComboInput,
    > btu-input {
      @apply flex-1;
    }

    > button.icon-action-add {
      @apply mx-2;
    }

    > button.icon-action-remove {
      @apply order-1;
    }

    /* This sets up the spacing of RCS list items in Advanced Query filed popup
     * The actual list item styling will be handled separately by RCS component styles
    */
    > .RCS {
      @apply order-2 mt-2 w-full px-4;

      > .RCS-list {
        @apply flex w-2/3 flex-col gap-1.5;
      }

      .RCS-item {
        @apply flex;
      }

      .RCS-controls {
        @apply mt-1.5 w-max py-2;
      }

      .RCS-controls > .RCS-add {
        @apply btu-button btu-button-fill-none btu-button-primary btu-button-container-none before:btu-icon before:btu-icon-plus;
      }
    }

    > ul {
      @apply order-2 w-full;

      > li:first-child {
        @apply mt-2;
      }
    }
  }
}
