// 선박 검색 필터 스타일
// dark 프로젝트 패밀리 스타일 적용

.vessel-search-filter-wrapper {
  background: var(--tertiary1, rgba(0, 0, 0, 0.2));
  border-bottom: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.1));
}

.vessel-search-filter {
  background: transparent;
  padding: 1rem 1.2rem;

  .search-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1rem;

    .search-input-group {
      position: relative;
      flex: 1;
      min-width: 15rem;

      .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--tertiary4, #777);
        font-size: 1.2rem;
        pointer-events: none;
      }

      .search-input {
        width: 100%;
        padding: 0.8rem 1.2rem 0.8rem 3rem;
        border: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.2));
        border-radius: 0.6rem;
        font-size: var(--fs-s, 1.2rem);
        background: var(--tertiary1, rgba(0, 0, 0, 0.3));
        color: var(--white, #fff);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        &:focus {
          outline: none;
          border-color: var(--primary1, #4a9eff);
          box-shadow: 0 0 0 2px var(--primary1-alpha, rgba(74, 158, 255, 0.1));
        }

        &::placeholder {
          color: var(--tertiary4, #666);
        }
      }

      .clear-search-btn {
        position: absolute;
        right: 0.8rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--tertiary4, #777);
        cursor: pointer;
        padding: 0.4rem;
        border-radius: 0.4rem;
        font-size: 1.1rem;

        &:hover {
          color: var(--white, #ccc);
          background: var(--tertiary2, rgba(255, 255, 255, 0.1));
        }
      }
    }

    .select-all-group {
      .select-all-checkbox {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        cursor: pointer;
        font-size: var(--fs-s, 1.2rem);
        font-weight: var(--fw-medium, 500);
        color: var(--tertiary4, #ccc);

        input[type="checkbox"] {
          display: none;
        }

        .checkmark {
          position: relative;
          width: 1.8rem;
          height: 1.8rem;
          border: 2px solid var(--tertiary3, #555);
          border-radius: 0.4rem;
          background: transparent;
          transition: all 0.2s ease;

          &::after {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0.2rem;
            width: 0.5rem;
            height: 0.8rem;
            border: solid var(--white, #fff);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity 0.2s ease;
          }
        }

        input[type="checkbox"]:checked + .checkmark {
          background: var(--primary1, #4a9eff);
          border-color: var(--primary1, #4a9eff);

          &::after {
            opacity: 1;
          }
        }

        input[type="checkbox"]:indeterminate + .checkmark {
          background: var(--tertiary3, #555);
          border-color: var(--tertiary3, #555);

          &::after {
            left: 0.3rem;
            top: 0.7rem;
            width: 1rem;
            height: 0.2rem;
            border: none;
            background: var(--white, #fff);
            transform: none;
            opacity: 1;
          }
        }

        .select-all-text {
          white-space: nowrap;
        }
      }
    }
  }

  .filter-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;

    .filter-group {
      display: flex;
      align-items: center;
      flex: 1;

      label {
        font-size: var(--fs-s, 1.2rem);
        font-weight: var(--fw-medium, 500);
        color: var(--tertiary4, #ccc);
        white-space: nowrap;
      }

      .filter-select {
        width: 100%;
        padding: 0.7rem 0.8rem;
        border: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.2));
        border-radius: 0.4rem;
        font-size: var(--fs-s, 1.2rem);
        background: var(--bg-dark, rgba(0, 0, 0, 0.4));
        color: var(--white, #fff);
        transition: border-color 0.2s ease;
        cursor: pointer;

        &:focus {
          outline: none;
          border-color: var(--primary1, #4a9eff);
        }

        option {
          background: #1a1a2e;
          color: var(--white, #fff);
        }
      }

      .search-input {
        width: 100%;
        padding: 0.7rem 0.8rem;
        border: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.2));
        border-radius: 0.4rem;
        font-size: var(--fs-s, 1.2rem);
        background: var(--bg-dark, rgba(0, 0, 0, 0.4));
        color: var(--white, #fff);
        transition: border-color 0.2s ease;

        &:focus {
          outline: none;
          border-color: var(--primary1, #4a9eff);
        }

        &::placeholder {
          color: var(--tertiary4, #666);
        }
      }
    }

    .clear-filters-btn {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.6rem 1rem;
      background: var(--tertiary1, rgba(0, 0, 0, 0.3));
      border: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.2));
      border-radius: 0.4rem;
      font-size: var(--fs-s, 1.2rem);
      color: var(--tertiary4, #999);
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover:not(:disabled) {
        background: var(--tertiary2, rgba(255, 255, 255, 0.1));
        border-color: var(--tertiary3, #666);
        color: var(--white, #ccc);
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      i {
        font-size: 1.1rem;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 1rem;

    .search-row {
      flex-direction: column;
      gap: 1rem;

      .search-input-group {
        width: 100%;
      }

      .select-all-group {
        width: 100%;
      }
    }

    .filter-row {
      flex-direction: column;
      align-items: stretch;
      gap: 0.8rem;

      .filter-group {
        justify-content: space-between;
        width: 100%;

        .filter-select {
          flex: 1;
          max-width: 15rem;
        }
      }

      .clear-filters-btn {
        align-self: flex-end;
      }
    }
  }
}

.filter-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs, 1.1rem);
  color: var(--tertiary4, #999);
  padding: 0.8rem 1.2rem;
  background: var(--tertiary1, rgba(0, 0, 0, 0.15));
  border-bottom: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.1));

  .result-count {
    font-weight: var(--fw-medium, 500);
  }

  .selected-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

    .selected-count {
      background: var(--primary1, #4a9eff);
      color: var(--white, #fff);
      padding: 0.5rem 1.2rem;
      border-radius: 1.2rem;
      font-weight: var(--fw-medium, 500);
    }

    .bulk-actions {
      display: flex;
      align-items: center;
      gap: 0.6rem;

      .action-label {
        font-size: var(--fs-xs, 1.1rem);
        color: var(--white, #ccc);
        font-weight: var(--fw-medium, 500);
      }

      .bulk-action-btn {
        min-width: 5.5rem;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.2));
        border-radius: 0.4rem;
        font-size: var(--fs-s, 1.2rem);
        font-weight: var(--fw-semibold, 600);
        cursor: pointer;
        transition: all 0.2s ease;
        background-color: var(--tertiary1, rgba(0, 0, 0, 0.2));
        color: var(--tertiary4, #ccc);

        .icon {
          font-size: 1.1rem;
        }

        &:hover {
          background: var(--tertiary2, rgba(255, 255, 255, 0.1));
          border-color: var(--tertiary3, #666);
        }

        &.normal {
          &:hover {
            background: rgba(74, 222, 128, 0.15);
            border-color: #4ade80;
            color: #4ade80;
          }
        }

        &.selected {
          &:hover {
            background: rgba(74, 158, 255, 0.15);
            border-color: #4a9eff;
            color: #4a9eff;
          }
        }

        &.deleted {
          &:hover {
            background: rgba(248, 113, 113, 0.15);
            border-color: #f87171;
            color: #f87171;
          }
        }
      }
    }
  }
}
