  .sorting-card {
    width: 100%;
    max-width: 1200px;
    padding: 20px;

    .controls-panel {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      align-items: center;
      flex-wrap: wrap;

      mat-form-field {
        width: 200px;
      }
    }

    .visualization-area {
      display: flex;
      align-items: flex-end;
      height: 300px; /* Max height for bars */
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
      gap: 1px;
      background-color: #f0f0f0;

      .bar {
        flex-grow: 1;
        background-color: #424242; /* Default unsorted color */
        transition: height 0.05s ease-in-out, background-color 0.05s ease-in-out;
        width: 10px; /* Default width, flex-grow will adjust */
        min-width: 1px; /* Ensure bars are always visible */

        &.unsorted {
          background-color: #424242;
        }

        &.comparing {
          background-color: #ffeb3b; /* Yellow for comparing */
        }

        &.sorted {
          background-color: #4caf50; /* Green for sorted */
        }
      }
    }

    .info-panel {
      margin-top: 10px;
      font-size: 0.9em;
      color: #FFFFFF;
    }
  }
