// Counter Selection Component Styles
// Consistent with /close-to-prod pattern

:host {
  display: block;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.counter-selection-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  width: 100%;
  min-width: 700px;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;

  .search-header {
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--mat-sys-outline-variant);

    form {
      margin: 0;
      padding: 0;
    }

    ::ng-deep {
      .search-field.mat-mdc-form-field {
        width: 100%;
        // Necessary to override Material default margins
        margin: 0;

        .mat-mdc-form-field-flex {
          margin: 0;
        }
      }
    }
  }

  .main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;

    .selection-pane {
      flex: 1;
      overflow-y: auto;
      padding: 0;
      border-right: 1px solid var(--mat-sys-outline-variant);

      .no-results {
        padding: var(--spacing-6);
        text-align: center;
        color: var(--mat-sys-on-surface-variant);
      }
    }

    .selected-pane {
      flex: 0 0 400px;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      background-color: var(--mat-sys-surface-container-low);

      .selected-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-2);
        padding: var(--spacing-4) var(--spacing-4) 0;
      }

      .selected-list-container {
        flex: 1;
        overflow-y: auto;
        padding: 0 var(--spacing-4) var(--spacing-4);

        .no-selections {
          padding: var(--spacing-4);
          color: var(--mat-sys-on-surface-variant);
          text-align: center;
        }

        mat-list-item {
          span[matListItemTitle] {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
          }
        }
      }

      .actions-footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--spacing-2);
        padding: var(--spacing-4);
        border-top: 1px solid var(--mat-sys-outline-variant);
      }
    }
  }

  mat-accordion mat-expansion-panel.mat-expansion-panel {
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--mat-sys-outline-variant);
    border-radius: 0;
    margin: 0;
    background: transparent;

    &:last-child {
      border-bottom: none;
    }
  }

  .mat-expansion-panel-header {
    padding: 0 var(--spacing-4);
  }

  .mat-panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
  }

  .counters-grid {
    padding: var(--spacing-2) 0;

    &.column-layout {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: var(--spacing-3);
    }

    &.list-layout {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-2);
    }
  }

  .counter-item {
    .counter-label-container {
      display: flex;
      flex-direction: column;
    }
  }

  // Compact density overrides
  &.compact {
    .search-header {
      padding: var(--spacing-2) var(--spacing-4);
    }

    .scrollable-content {
      padding: 0;
    }

    .mat-expansion-panel-body {
      padding: var(--spacing-2) var(--spacing-4);
    }

    .counters-grid {
      &.column-layout {
        gap: var(--spacing-2);
      }
    }
  }
}
